:root{
  --lw:#3698D4; --lw-claro:#8FCDEC;
  --tinta:#0E2B3D; --profundo:#08202E;
  --papel:#F4F7F9; --gris:#6E8290; --linea:rgba(14,43,61,.13);
  --mont:"Montserrat",system-ui,sans-serif;
  --lora:"Lora",Georgia,serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--papel);color:var(--tinta);
  font-family:var(--mont);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
.env{max-width:1080px;margin:0 auto;padding:0 22px}
h1,h2{letter-spacing:-.02em;margin:0}
a{color:inherit}
button{font-family:var(--mont);cursor:pointer}

/* cabecera */
.tope{background:#fff;border-bottom:1px solid var(--linea)}
.tope .env{display:flex;align-items:center;justify-content:space-between;gap:18px;height:70px}
.marca{display:flex;align-items:center;gap:11px;text-decoration:none}
.marca svg{width:26px;height:26px;flex:none}
.marca span{font-size:12.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;line-height:1.2}
.marca span i{display:block;font-style:normal;font-weight:500;color:var(--lw);letter-spacing:.13em}
.quien{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--gris)}
.salir{text-decoration:none;border:1px solid var(--linea);border-radius:999px;
  padding:7px 15px;font-size:11.5px;font-weight:700;color:var(--gris)}
.salir:hover{border-color:#C2413B;color:#C2413B}
.pestanas{display:flex;gap:6px;padding-bottom:12px;flex-wrap:wrap}
.pestanas a{text-decoration:none;border:1.5px solid var(--linea);border-radius:999px;
  padding:8px 17px;font-size:12.5px;font-weight:700;color:var(--tinta)}
.pestanas a.on{background:var(--tinta);color:#fff;border-color:var(--tinta)}

main.env{padding-top:30px;padding-bottom:60px}

/* cajas */
.caja{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:26px;margin-bottom:20px}
.caja h2{font-size:19px;margin-bottom:4px}
.ayuda{color:var(--gris);font-size:13.5px;margin:0 0 20px;max-width:74ch}
.vacio{text-align:center;color:var(--gris);padding:32px;font-size:13.5px}

/* formularios */
label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gris);margin:14px 0 6px}
input,select{width:100%;padding:11px 13px;border:1px solid var(--linea);border-radius:7px;
  font-family:var(--mont);font-size:14px;background:#fff;color:var(--tinta)}
input:focus,select:focus{outline:2px solid var(--lw);outline-offset:1px;border-color:transparent}
input.num{width:96px;text-align:right;font-variant-numeric:tabular-nums;padding:7px 9px}
.tripla{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.filtros{display:grid;grid-template-columns:1fr 200px auto;gap:14px;align-items:end;margin-bottom:8px}
.filtros .alineado{display:flex;gap:9px}
button.principal{border:0;border-radius:8px;background:var(--tinta);color:#fff;
  padding:14px 26px;font-size:14px;font-weight:700;margin-top:20px}
button.principal:hover{background:#17415B}
a.principal{display:inline-block;text-decoration:none;border-radius:8px;background:var(--tinta);
  color:#fff;padding:14px 26px;font-size:14px;font-weight:700;margin-top:20px}
.secundario{display:inline-block;text-decoration:none;text-align:center;border:1.5px solid var(--linea);
  background:#fff;border-radius:8px;padding:11px 18px;font-size:13px;font-weight:700;color:var(--tinta)}
.secundario:hover{border-color:var(--lw);color:var(--lw)}
.enlace-rojo{background:none;border:0;color:var(--gris);font-size:12px;
  text-decoration:underline;padding:0}
.enlace-rojo:hover{color:#C2413B}

/* tablas */
.tabla-scroll{overflow-x:auto;border:1px solid var(--linea);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
th{text-align:left;padding:12px 11px;border-bottom:2px solid var(--tinta);font-size:9.5px;
  font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--gris);white-space:nowrap}
td{padding:11px;border-bottom:1px solid var(--linea);vertical-align:middle}
td.der,th.der{text-align:right}
td.tenue{color:var(--gris)}
td.suma{color:#1E7A4D;font-weight:700}
td.resta{color:#B03A34;font-weight:700}
tfoot td{font-weight:700;border-bottom:0;background:var(--papel)}
tr.anulada td{opacity:.5;text-decoration:line-through}
tr.apagado td{opacity:.5}
.nota{display:block;font-size:11.5px;color:var(--gris)}

/* etiquetas de estado */
.chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  padding:3px 10px;border-radius:999px;white-space:nowrap}
.chip.ok{background:#E6F4EC;color:#1E7A4D}
.chip.poco{background:#FDF1DC;color:#96631A}
.chip.nada{background:#FBE9E8;color:#B03A34}

/* avisos */
.aviso{border-left:3px solid var(--lw);background:rgba(54,152,212,.1);
  padding:13px 16px;border-radius:0 7px 7px 0;font-size:13.5px;margin:0 0 20px}
.aviso.ok{border-color:#1E7A4D;background:#E9F5EF}
.aviso.error{border-color:#B03A34;background:#FBEBEA}

/* resumen del informe */
.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:15px;margin-top:22px}
.dato{background:var(--papel);border-radius:10px;padding:18px 20px}
.dato span{display:block;font-size:10px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gris);margin-bottom:6px}
.dato b{font-size:23px;font-weight:700;letter-spacing:-.02em}
.dato.destaca{background:var(--tinta);color:#fff}
.dato.destaca span{color:var(--lw-claro)}

/* acceso */
.acceso{max-width:410px;margin:60px auto;background:#fff;border:1px solid var(--linea);
  border-radius:14px;padding:36px}
.acceso h1{font-size:23px;margin-bottom:4px}
.acceso .sub{color:var(--gris);font-size:14px;margin:0 0 20px;font-family:var(--lora)}

.pie-panel{border-top:1px solid var(--linea);padding:22px 0;color:var(--gris);font-size:11.5px}

@media (max-width:760px){
  .tripla,.filtros{grid-template-columns:1fr}
  .tope .env{height:auto;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
}

/* casilla con explicación */
.casilla{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--linea);
  border-radius:9px;padding:14px 16px;cursor:pointer;margin-top:6px;
  text-transform:none;letter-spacing:0;font-size:13px;color:var(--tinta);font-weight:400}
.casilla:hover{border-color:var(--lw)}
.casilla input{width:auto;margin-top:3px;flex:none}
.casilla b{display:block;font-weight:700;margin-bottom:3px}
.casilla span{color:var(--gris);font-size:12.5px;line-height:1.5}
.casilla span b{color:var(--tinta);font-size:13.5px}


/* solicitudes */
.filtro{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  border:1.5px solid var(--linea);border-radius:999px;padding:8px 17px;
  font-size:12.5px;font-weight:700;color:var(--tinta)}
.filtro.on{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.filtro b{background:#C2413B;color:#fff;border-radius:999px;padding:1px 7px;font-size:10.5px}
.filtro.on b{background:var(--lw);color:#04121F}
.solicitud{border:1px solid var(--linea);border-left:3px solid var(--lw);
  border-radius:10px;padding:20px 22px;margin-bottom:14px;background:#fff}
.solicitud.leida{border-left-color:var(--linea);opacity:.62}
.solicitud header{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;flex-wrap:wrap;margin-bottom:10px}
.solicitud header strong{font-size:15.5px;margin-left:8px}
.solicitud time{font-size:12px;color:var(--gris)}
.etiqueta{display:inline-block;background:var(--papel);border-radius:999px;padding:3px 11px;
  font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.contacto-linea{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.contacto-linea a{font-size:13px;color:var(--lw);text-decoration:none;font-weight:600}
.contacto-linea a:hover{text-decoration:underline}
.solicitud dl{margin:0;display:grid;grid-template-columns:150px 1fr;gap:2px 16px;
  border-top:1px solid var(--linea);padding-top:12px}
.solicitud dt{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gris);padding-top:5px}
.solicitud dd{margin:0;font-size:14px;padding-top:3px}
.solicitud form{margin-top:16px}
@media(max-width:640px){.solicitud dl{grid-template-columns:1fr;gap:0}
  .solicitud dt{margin-top:10px}}

/* interruptor publicado / oculto */
.interruptor{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--gris);text-transform:none;letter-spacing:0;margin:0}
.interruptor input{width:auto;margin:0}
.interruptor input:checked + span{color:#1E7A4D}

/* lista de espera por stock */
.espera{border:1px solid var(--linea);border-left:3px solid var(--lw);border-radius:10px;
  padding:18px 20px;margin-bottom:14px;background:#fff}
.espera.listo{border-left-color:#1E7A4D;background:#F4FBF7}
.espera header{display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;margin-bottom:10px}
.espera header strong{font-size:15px}
.espera header .tenue{font-size:12.5px;color:var(--gris);margin-left:8px}
.espera ul{list-style:none;padding:12px 0 0;margin:0;border-top:1px solid var(--linea)}
.espera li{display:flex;gap:14px;align-items:baseline;padding:5px 0;font-size:13.5px;flex-wrap:wrap}
.espera li a{color:var(--lw);text-decoration:none;font-weight:600}
.espera li a:hover{text-decoration:underline}
.espera li .tenue{font-size:12px;color:var(--gris)}