:root{
  --bg:#F3F4FA; --surface:#FFFFFF; --surface-2:#EAECF6; --border:#DBDEED;
  --text:#181530; --text-muted:#5C5878; --text-faint:#8683A0;
  --brand:#0E065B; --brand-2:#170D7A; --brand-text:#F3F1FF;
  --accent:#5D8F22; --accent-strong:#4C7A1B; --accent-tint:#E7F1DA;
  --focus:#5D8F22;
  --st-generada:#6B7280; --st-generada-tint:#EBEDF1;
  --st-tramite:#2E63C7; --st-tramite-tint:#E4EBFB;
  --st-devuelta:#B87A16; --st-devuelta-tint:#F7ECD9;
  --st-despachada:#1E8FA0; --st-despachada-tint:#DFF1F4;
  --st-entregada:#4C8A1F; --st-entregada-tint:#E4F1D9;
  --st-fallida:#BC4433; --st-fallida-tint:#F8E4E0;
  --st-parcial:#7C4FC9; --st-parcial-tint:#EEE6FA;
  --radius-s:8px; --radius-m:12px;
  --font-head:Cambria,Georgia,'Times New Roman',serif;
  --font-body:Calibri,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'Cascadia Mono','Consolas',ui-monospace,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:15px; line-height:1.5;}
h1,h2,h3{font-family:var(--font-head); margin:0; color:var(--text);}
a{color:inherit;}
.tabular{font-variant-numeric:tabular-nums;}

header.top{background:linear-gradient(155deg,var(--brand),var(--brand-2)); color:var(--brand-text); padding:16px 24px;}
.top-inner{max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:36px; height:36px; border-radius:10px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-family:var(--font-head); font-weight:700; font-size:17px; color:#0E065B; flex:none;}
.brand-word h1{font-size:18px; color:var(--brand-text);}
.brand-word p{margin:2px 0 0; font-size:12px; color:#C9C4F0;}
.top-nav{display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:13.5px;}
.top-nav a, .top-nav button{color:#E6E3FA; text-decoration:none; background:none; border:none; font:inherit; cursor:pointer; padding:6px 4px;}
.top-nav a:hover, .top-nav button:hover{color:#fff;}
.top-nav .who{color:#C9C4F0; font-size:12.5px;}

.app{max-width:1180px; margin:0 auto; padding:24px 20px 60px;}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:0 1px 2px rgba(14,6,91,.06);}
.card-pad{padding:20px;}
.section-title{display:flex; align-items:baseline; gap:10px; margin-bottom:4px;}
.section-title h2{font-size:17px;}
.section-sub{color:var(--text-muted); font-size:13px; margin:2px 0 16px;}
.stack{display:flex; flex-direction:column; gap:18px;}

.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
@media (max-width:620px){.form-grid{grid-template-columns:1fr;}}
.field{display:flex; flex-direction:column; gap:5px;}
.field.full{grid-column:1/-1;}
.field label{font-size:12.5px; font-weight:600; color:var(--text-muted);}
.field input, .field select, .field textarea{border:1px solid var(--border); border-radius:var(--radius-s); padding:9px 11px; background:var(--surface); color:var(--text); width:100%; font:inherit;}
.field textarea{resize:vertical; min-height:64px;}
.radio-row, .check-row{display:flex; gap:14px; flex-wrap:wrap;}
.radio-row label, .check-row label{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:normal;}
.hr{height:1px; background:var(--border); border:none; margin:18px 0;}

.med-row{display:grid; grid-template-columns:1fr 90px 34px; gap:8px; align-items:center;}
.med-row + .med-row{margin-top:8px;}
.icon-btn{border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-s); width:34px; height:34px; display:flex; align-items:center; justify-content:center; color:var(--st-fallida); cursor:pointer;}
.add-link{align-self:flex-start; background:none; border:none; color:var(--accent-strong); font-weight:700; font-size:13px; padding:6px 0; cursor:pointer;}

.btn{border:1px solid transparent; border-radius:var(--radius-s); padding:10px 18px; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-strong);}
.btn-ghost{background:transparent; border-color:var(--border); color:var(--text);}
.btn-ghost:hover{background:var(--surface-2);}
.btn-outline-danger{background:transparent; border-color:var(--st-fallida); color:var(--st-fallida);}
.btn-outline-danger:hover{background:var(--st-fallida-tint);}
.btn-row{display:flex; gap:10px; flex-wrap:wrap;}
.btn:disabled{opacity:.45; cursor:not-allowed;}

.alert{padding:12px 16px; border-radius:var(--radius-s); font-size:13.5px; margin-bottom:14px;}
.alert-error{background:var(--st-fallida-tint); color:var(--st-fallida); border:1px solid var(--st-fallida);}
.alert-ok{background:var(--accent-tint); color:var(--accent-strong); border:1px solid var(--accent);}

.badge{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap;}
.badge .dot{width:7px; height:7px; border-radius:50%; background:currentColor;}
.req-item{padding:16px 18px; display:flex; flex-direction:column; gap:10px;}
.top-row{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; align-items:flex-start;}
.who{font-weight:700; font-size:15px;}
.meta{font-size:12.5px; color:var(--text-muted); margin-top:2px;}
.med-tags{display:flex; flex-wrap:wrap; gap:6px;}
.med-tag{background:var(--surface-2); border-radius:999px; padding:3px 10px; font-size:12px; color:var(--text-muted);}
.queue{display:flex; flex-direction:column; gap:12px;}
.empty-state{padding:28px; text-align:center; color:var(--text-muted); font-size:13.5px;}

.evid-grid{display:flex; flex-direction:column; gap:10px; border-top:1px dashed var(--border); padding-top:12px; margin-top:2px;}
.sign-box{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-start;}
canvas.sigpad{border:1px dashed var(--border); border-radius:var(--radius-s); background:var(--surface-2); touch-action:none;}
.sign-actions{display:flex; flex-direction:column; gap:8px;}

.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px;}
.kpi{padding:16px 18px;}
.kpi .label{font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.5px;}
.kpi .value{font-family:var(--font-head); font-size:28px; margin-top:4px;}
.kpi .sub{font-size:12px; color:var(--text-faint); margin-top:2px;}

.table-wrap{overflow-x:auto;}
table{border-collapse:collapse; width:100%; font-size:13px; min-width:760px;}
th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); padding:9px 12px; border-bottom:1px solid var(--border);}
td{padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top;}
tr:last-child td{border-bottom:none;}
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px;}
.filters select{border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-s); padding:7px 10px; font-size:13px;}

.login-wrap{max-width:380px; margin:60px auto;}
.footnote{color:var(--text-faint); font-size:12px; text-align:center; margin-top:30px;}

/* --- Fórmula médica: adjuntar archivo o capturar con la cámara --- */
.receta-box{display:flex; flex-direction:column; gap:12px; border:1px dashed var(--border); border-radius:var(--radius-m); padding:16px; background:var(--surface-2);}
.receta-sep{display:flex; align-items:center; gap:10px; color:var(--text-faint); font-size:12px; text-transform:uppercase; letter-spacing:.5px;}
.receta-sep::before, .receta-sep::after{content:""; flex:1; height:1px; background:var(--border);}
.receta-camara{display:flex; flex-direction:column; gap:10px;}
.receta-camara video{width:100%; max-width:420px; border-radius:var(--radius-s); background:#000; aspect-ratio:4/3; object-fit:cover;}
.receta-preview{display:flex; gap:12px; align-items:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-s); padding:10px 12px;}
.receta-preview img{width:72px; height:72px; object-fit:cover; border-radius:var(--radius-s); border:1px solid var(--border); flex:none;}
.receta-nombre{font-size:13px; font-weight:700; word-break:break-all;}

/* El atributo `hidden` debe ganarle a cualquier display de autor (.field,
   .receta-camara, etc. usan display:flex y anulaban el ocultamiento). */
[hidden]{display:none !important;}

/* --- Filtros de búsqueda (admin y PAF) --- */
.filtros{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; align-items:end;}
.filtros .filtros-ancho{grid-column:span 2; min-width:220px;}
.filtros-acciones{display:flex; gap:8px; align-items:end;}
.filtros-acciones .btn{white-space:nowrap;}

/* --- Gráficas del panel --- */
.grafica-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:18px;}
.barras{display:flex; flex-direction:column; gap:9px; margin-top:6px;}
.barra-fila{display:flex; align-items:center; gap:10px;}
.barra-etq{width:150px; font-size:12px; color:var(--text-muted); flex:none;}
.barra-pista{flex:1; background:var(--surface-2); border-radius:6px; height:14px; overflow:hidden;}
.barra-valor{height:100%; border-radius:6px; transition:width .3s ease;}
.barra-num{width:34px; text-align:right; font-size:12.5px; color:var(--text-faint);}
.barra-sub{font-size:11.5px; color:var(--text-faint); margin:-4px 0 4px 160px;}

.barra-apilada{display:flex; height:22px; border-radius:6px; overflow:hidden; background:var(--surface-2); margin:8px 0 12px;}
.barra-apilada .seg{height:100%; transition:width .3s ease;}
.seg-entregado{background:var(--st-entregada);}
.seg-ruta{background:var(--st-despachada);}
.leyenda{display:flex; flex-wrap:wrap; gap:16px; font-size:12.5px; color:var(--text-muted); align-items:center;}
.leyenda .pt{width:10px; height:10px; border-radius:3px; display:inline-block; margin-right:5px;}
.pt-entregado{background:var(--st-entregada);}
.pt-ruta{background:var(--st-despachada);}
.pt-pendiente{background:var(--surface-2); border:1px solid var(--border);}

.serie{display:flex; align-items:flex-end; gap:6px; height:170px; margin-top:10px;}
.serie-col{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:4px;}
.serie-n{font-size:11px; color:var(--text-faint); height:14px;}
.serie-barra{width:100%; min-height:2px; background:var(--brand-2); border-radius:4px 4px 0 0; transition:height .3s ease;}
.serie-fecha{font-size:10.5px; color:var(--text-faint); white-space:nowrap;}

.avance{width:66px; height:7px; background:var(--surface-2); border-radius:4px; overflow:hidden;}
.avance-valor{height:100%; background:var(--st-entregada);}

/* --- Despacho y entrega por cantidades --- */
.tabla-despacho{width:100%; border-collapse:collapse; font-size:13px; margin:8px 0;}
.tabla-despacho th{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); font-weight:700; padding:4px 8px 4px 0; border-bottom:1px solid var(--border);}
.tabla-despacho td{padding:7px 8px 7px 0; border-bottom:1px solid var(--border);}
.tabla-despacho th:not(:first-child), .tabla-despacho td:not(:first-child){text-align:center;}
.celda-num{width:82px; text-align:center; border:1px solid var(--border); border-radius:var(--radius-s); padding:6px 8px; font:inherit;}
.despacho{border-top:1px dashed var(--border); padding-top:10px; margin-top:4px;}

/* --- Logo corporativo en la cabecera --- */
/* La placa blanca es necesaria: la tipografía del logo es azul marino y
   sobre el degradado oscuro de la cabecera quedaría ilegible. */
.brand-logo{height:44px; width:auto; background:#fff; padding:7px 12px; border-radius:10px; flex:none; display:block;}
.brand-word{border-left:1px solid rgba(255,255,255,.26); padding-left:14px;}
@media (max-width:520px){
  .brand-logo{height:36px; padding:6px 9px;}
  .brand-word{border-left:none; padding-left:0;}
}

/* --- Entrega fallida: selección de la causa --- */
.bloque-fallida{border-top:1px dashed var(--border); padding-top:14px; margin-top:6px; display:flex; flex-direction:column; gap:10px;}
.motivos{display:flex; flex-direction:column; gap:7px; margin-top:4px;}
.motivo-opcion{display:flex; align-items:flex-start; gap:9px; font-size:13.5px; font-weight:normal; color:var(--text); padding:7px 10px; border:1px solid var(--border); border-radius:var(--radius-s); cursor:pointer; background:var(--surface);}
.motivo-opcion:hover{background:var(--surface-2);}
/* El bloque vive dentro de un .field, y `.field input` fuerza width:100% con
   borde y fondo: sin esto cada radio se estira a todo el ancho y desplaza su
   etiqueta fuera de la tarjeta. */
.field .motivo-opcion input[type="radio"]{width:auto; flex:none; margin:3px 0 0; padding:0; border:none; background:none; box-shadow:none;}
.motivo-opcion span{flex:1; min-width:0;}
.motivo-opcion input:checked + span{font-weight:700; color:var(--st-fallida);}
.aviso-obs{color:var(--st-fallida); font-weight:700;}

/* ============================================================
   Ajustes responsive (revisión del 25 de sept. de 2026)
   ============================================================ */

/* La serie de 14 días no cabe en un teléfono: 14 columnas con su fecha
   necesitan ~470px. Se deja desplazar dentro de su tarjeta, para que no
   sea la página entera la que se mueva de lado. */
.serie{overflow-x:auto; padding-bottom:6px;}
.serie-col{min-width:32px;}

/* Tablas de cantidades: dejan de ser tabla y cada medicamento pasa a ser una
   ficha. El corte va en 900px y no en 760 porque en modo tabla necesitan unos
   800px de ancho mínimo, así que en una tableta de 768 seguían desbordando.
   Es además la pantalla que el mensajero usa en la calle, donde conviene leer
   y tocar sin desplazar de lado. */
@media (max-width:900px){
  .tabla-despacho{display:block; min-width:0;}
  .tabla-despacho thead{display:none;}
  .tabla-despacho tbody, .tabla-despacho tr, .tabla-despacho td{display:block; width:100%;}
  .tabla-despacho tr{border:1px solid var(--border); border-radius:var(--radius-s); padding:10px 12px; margin-bottom:10px; background:var(--surface);}
  .tabla-despacho td{border:none; padding:5px 0; text-align:right; display:flex; align-items:center; justify-content:space-between; gap:12px;}
  .tabla-despacho td::before{content:attr(data-etq); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--text-faint); text-align:left;}
  .tabla-despacho td.celda-nombre{font-weight:700; font-size:14px; text-align:left; color:var(--text); border-bottom:1px solid var(--border); padding-bottom:8px; margin-bottom:4px; display:block;}
  .tabla-despacho td.celda-nombre::before{content:none;}
  .celda-num{width:110px;}
}

@media (max-width:760px){
  .app{padding:18px 16px 48px;}

  /* Gráficas de barras: la etiqueta fija de 150px deja la barra sin espacio. */
  .barra-etq{width:104px; font-size:11.5px;}
  .barra-sub{margin-left:114px;}

  /* Filtros: en un teléfono conviene una sola columna legible. */
  .filtros{grid-template-columns:1fr;}
  .filtros .filtros-ancho{grid-column:auto; min-width:0;}
  .filtros-acciones .btn{flex:1;}

  .section-title{flex-wrap:wrap;}
  .kpi .value{font-size:24px;}
  .leyenda{gap:10px; font-size:12px;}
}

@media (max-width:420px){
  /* El lienzo de firma debe caber completo: si se sale, el paciente firma
     sobre una zona que no se ve. */
  .sig-canvas{width:100%; max-width:100%;}
  .sign-box{flex-direction:column;}
  .btn{padding:10px 14px;}
  .btn-row{gap:8px;}
  .med-row{grid-template-columns:1fr 74px 34px;}
}