@font-face{font-family:Grotesk;src:url('/assets/grotesk.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Chronik;src:url('/assets/chronik.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:Chronik;src:url('/assets/chronik-italic.woff2') format('woff2');font-weight:300;font-style:italic;font-display:swap}

:root{
  --fondo:#f7f6f3;--superficie:#fff;--suave:#f1f0ec;--tinta:#16130f;--tinta-2:#4a4640;--apagado:#8a857d;--linea:#e8e5df;
  --violeta:#5f79ff;--violeta-suave:#eef1ff;--ambar:#d98a04;--ambar-suave:#fff5e0;--verde:#0a9f62;--verde-suave:#e6f7ef;--rojo:#c2410c;--rojo-suave:#fdeee6;--gris:#a3a3a3;
  --sans:Grotesk,"Helvetica Neue",Arial,sans-serif;--serif:Chronik,Georgia,serif;--radio:16px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fondo);color:var(--tinta);font:15px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
em{font-family:var(--serif);font-style:italic;font-weight:300}

.boton{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 18px;border-radius:100px;border:1px solid transparent;background:none;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,opacity .15s}
.boton:disabled{opacity:.45;cursor:not-allowed}
.boton.primario{background:var(--tinta);color:#fff}
.boton.primario:hover:not(:disabled){background:#2d2822}
.boton.suave{border-color:var(--linea);background:var(--superficie)}
.boton.suave:hover:not(:disabled){border-color:#cfcac2}
.boton.peligro{color:var(--rojo);border-color:#f2d3c4;background:var(--superficie)}
.boton.peligro:hover:not(:disabled){background:var(--rojo-suave)}
:focus-visible{outline:2px solid var(--violeta);outline-offset:2px}

/* Ingreso */
.ingreso{min-height:100vh;display:grid;place-items:center;padding:16px}
.ingreso-caja{width:min(380px,100%);display:grid;gap:18px;padding:36px 32px;background:var(--superficie);border:1px solid var(--linea);border-radius:24px}
.ingreso-logo{height:26px;width:auto}
.ingreso h1{margin:0;font:300 34px/1.05 var(--serif)}
.ingreso label{display:grid;gap:8px;font-size:13px;color:var(--tinta-2)}
.ingreso input{height:46px;padding:0 14px;border:1px solid var(--linea);border-radius:12px;background:var(--fondo)}
.ingreso-error{margin:-6px 0 0;min-height:1em;color:var(--rojo);font-size:13px}

/* Barra */
.barra{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;height:64px;padding:0 28px;background:rgba(247,246,243,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--linea)}
.barra-logo{height:22px;width:auto}
.barra-titulo{padding-left:12px;border-left:1px solid var(--linea);color:var(--apagado)}
.barra-espacio{flex:1}
.barra-actualizado{color:var(--apagado);font-size:12px}
.barra .boton{min-height:34px;padding:0 14px;font-size:14px}

.contenido{max-width:1240px;margin:0 auto;padding:40px 28px 80px}
.saludo{margin:0 0 28px;font:300 clamp(34px,4.4vw,52px)/1.05 var(--serif);letter-spacing:-.01em}

/* Tarjetas */
.tarjetas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px}
.tarjeta{--acento:var(--violeta);display:grid;gap:14px;text-align:left;padding:20px 22px 18px;background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);border-bottom:4px solid var(--acento);transition:transform .15s,box-shadow .15s}
.tarjeta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,19,15,.06)}
.tarjeta[data-tono=ambar]{--acento:var(--ambar)}.tarjeta[data-tono=verde]{--acento:var(--verde)}.tarjeta[data-tono=gris]{--acento:var(--gris)}
.tarjeta span{color:var(--tinta-2);font-size:14px}
.tarjeta strong{font:400 40px/1 var(--sans);font-variant-numeric:tabular-nums}

/* Lista */
.lista{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden}
.pestanas{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:10px 12px;border-bottom:1px solid var(--linea)}
.pestanas button{padding:8px 14px;border:0;border-radius:100px;background:none;color:var(--tinta-2)}
.pestanas button:hover{background:var(--suave)}
.pestanas button[aria-current=true]{background:var(--tinta);color:#fff}
.pestanas .n{margin-left:6px;opacity:.6;font-variant-numeric:tabular-nums}
.buscar{margin-left:auto;width:min(280px,100%);height:38px;padding:0 14px;border:1px solid var(--linea);border-radius:100px;background:var(--fondo)}
.tabla-envoltura{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;min-width:720px}
.tabla th{padding:12px 20px;text-align:left;font-weight:400;font-size:13px;color:var(--apagado);border-bottom:1px solid var(--linea)}
.tabla td{padding:14px 20px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla tbody tr{cursor:pointer;transition:background .12s}
.tabla tbody tr:hover,.tabla tbody tr.activa{background:#faf9f6}
.tabla tbody tr:last-child td{border-bottom:0}
.celda-principal{display:block;color:var(--tinta)}
.celda-secundaria{display:block;color:var(--apagado);font-size:13px}
.monto{font-variant-numeric:tabular-nums}
.vacio{display:grid;justify-items:center;gap:4px;padding:56px 16px;color:var(--apagado);text-align:center}
.vacio strong{color:var(--tinta);font-weight:400;font-size:17px}

.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:100px;font-size:12px;white-space:nowrap;background:var(--suave);color:var(--tinta-2)}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.por_aprobar{background:var(--violeta-suave);color:#3d55d6}
.chip.revision_humana{background:var(--ambar-suave);color:#a26400}
.chip.enviada{background:var(--verde-suave);color:var(--verde)}
.chip.cancelada,.chip.reemplazada{color:var(--apagado)}
.chip.recibida{color:var(--tinta-2)}
.etiqueta{display:inline-block;margin:4px 4px 0 0;padding:1px 8px;border:1px solid var(--linea);border-radius:100px;font-size:11px;color:var(--tinta-2)}
.etiqueta.alerta{border-color:#f3d9a8;color:#a26400;background:var(--ambar-suave)}

/* Detalle */
.velo{position:fixed;inset:0;z-index:9;background:rgba(22,19,15,.28)}
.detalle{position:fixed;top:0;right:0;bottom:0;z-index:10;display:flex;flex-direction:column;width:min(620px,100%);background:var(--superficie);box-shadow:-24px 0 48px rgba(22,19,15,.12);transform:translateX(100%);transition:transform .22s ease;outline:0}
.detalle.abierto{transform:none}
.detalle-cabecera{display:flex;justify-content:space-between;gap:16px;padding:24px 28px 18px;border-bottom:1px solid var(--linea)}
.detalle-cabecera h2{margin:2px 0 6px;font:300 32px/1.05 var(--serif)}
.detalle-codigo{margin:0;color:var(--apagado);font-size:13px;letter-spacing:.04em}
.detalle-datos{margin:0;color:var(--tinta-2);font-size:14px}
.detalle-datos a{color:inherit}
.cerrar{flex:none;width:36px;height:36px;border:1px solid var(--linea);border-radius:50%;background:none;font-size:20px;line-height:1}
.detalle-cuerpo{flex:1;overflow-y:auto;padding:22px 28px 28px;display:grid;gap:26px;align-content:start}
.detalle-acciones{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;padding:16px 28px;border-top:1px solid var(--linea);background:#fcfbf9}
.detalle-acciones .boton.primario{min-width:170px}
.detalle-acciones .izquierda{margin-right:auto}

.bloque h3{margin:0 0 10px;font-weight:400;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--apagado)}
.alertas{margin:0;padding:12px 16px 12px 34px;border-radius:12px;background:var(--ambar-suave);color:#7a4c00;font-size:14px}
.alertas li+li{margin-top:2px}
.alertas.info{background:var(--suave);color:var(--tinta-2)}

.receta{display:grid;grid-template-columns:200px 1fr;gap:18px;align-items:start}
.receta-foto{display:block;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:var(--suave);border:1px solid var(--linea)}
.receta-foto img{width:100%;height:100%;object-fit:cover;display:block}
.receta-foto .sin-foto{display:grid;place-items:center;height:100%;padding:12px;text-align:center;color:var(--apagado);font-size:13px}
.graduacion{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.graduacion th,.graduacion td{padding:8px 6px;text-align:right;border-bottom:1px solid var(--linea);font-size:14px}
.graduacion th{color:var(--apagado);font-weight:400;font-size:12px}
.graduacion th:first-child,.graduacion td:first-child{text-align:left}
.graduacion-nota{margin:10px 0 0;color:var(--apagado);font-size:13px}

.opciones{display:grid;gap:10px}
.opcion{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--linea);border-radius:14px}
.opcion.recomendada{border-color:var(--violeta);box-shadow:0 0 0 3px var(--violeta-suave)}
.opcion-letra{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--suave);font-size:14px}
.opcion.recomendada .opcion-letra{background:var(--violeta);color:#fff}
.opcion-producto{min-width:0}
.opcion-producto select{width:100%;padding:6px 28px 6px 0;border:0;background:transparent;font-size:15px;text-overflow:ellipsis;cursor:pointer}
.opcion-producto select:disabled{cursor:default;opacity:1;appearance:none}
.opcion-sello{display:block;color:var(--violeta);font-size:12px}
.opcion-montos{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.opcion-montos strong{display:block;font-weight:400}
.opcion-montos small{color:var(--apagado);font-size:12px}
.opciones-nota{margin:2px 0 0;color:var(--apagado);font-size:13px}
.elegida{margin-left:6px;color:var(--verde);font-size:12px}

/* Diálogos */
.dialogo{width:min(460px,calc(100% - 32px));padding:28px;border:0;border-radius:20px;box-shadow:0 24px 64px rgba(22,19,15,.2)}
.dialogo::backdrop{background:rgba(22,19,15,.35)}
.dialogo h3{margin:0 0 8px;font:300 28px/1.1 var(--serif)}
.dialogo p{margin:0 0 16px;color:var(--tinta-2)}
.dialogo .nota{font-size:13px;color:var(--apagado)}
.motivos{display:grid;gap:4px;margin:0 0 20px;padding:0;border:0}
.motivos label{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer}
.motivos label:hover{background:var(--suave)}
.motivos input[type=text]{flex:1;height:34px;padding:0 10px;border:1px solid var(--linea);border-radius:8px}
.dialogo-botones{display:flex;justify-content:flex-end;gap:10px}
.dialogo .advertencia{padding:12px 16px;border-radius:12px;background:var(--ambar-suave);color:#7a4c00;font-size:14px}
.campo{display:grid;gap:6px;margin:0 0 20px;font-size:14px;color:var(--tinta-2)}
.campo select{height:40px;padding:0 10px;border:1px solid var(--linea);border-radius:10px;background:transparent}
.enlace-texto{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;cursor:pointer}
.historial,.envios{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.historial-item{width:100%;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;padding:10px 12px;border:1px solid var(--linea);border-radius:12px;background:transparent;text-align:left;cursor:pointer}
.historial-item:hover{background:var(--suave)}
.historial-item .chip{grid-row:1/3;grid-column:2}
.envios{gap:4px;font-size:13px;color:var(--tinta-2)}
.envios .falla{color:#a26400}
.enlace{display:flex;gap:8px;margin-bottom:12px}
.enlace input{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid var(--linea);border-radius:10px;background:var(--fondo);font-size:13px}

.aviso{position:fixed;left:50%;bottom:24px;z-index:20;transform:translateX(-50%);padding:12px 18px;border-radius:12px;background:var(--tinta);color:#fff;font-size:14px;box-shadow:0 12px 32px rgba(22,19,15,.25)}
.aviso.error{background:var(--rojo)}

@media (max-width:900px){.tarjetas{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .barra{padding:0 16px}.barra-actualizado,.barra-titulo{display:none}
  .contenido{padding:28px 16px 64px}
  .tarjetas{gap:10px}.tarjeta{padding:16px}.tarjeta strong{font-size:32px}
  .buscar{margin-left:0;width:100%}
  .detalle-cabecera,.detalle-cuerpo,.detalle-acciones{padding-left:18px;padding-right:18px}
  .receta{grid-template-columns:1fr}.receta-foto{aspect-ratio:4/3}
  .detalle-acciones .boton{flex:1}
}
.historial li.con-pdf{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}