/* Layout: como el portal de Labtivity — barra azul arriba, banda diagonal con el título de la sección y tarjetas blancas
   sobre gris azulado. Un solo tema claro, igual que Labtivity. */
:root{
  --nav:#3984C6; --nav-2:#619DD2; --nav-dark:#2F72AE; --navy:#001E72; --navy-2:#001455;
  --on-nav:#FFFFFF; --on-nav-soft:#DCEAF7; --on-nav-line:#9CC2E6;
  --primary:#0D6EFD; --primary-press:#0B5ED7; --danger:#DC3545; --focus:#9EC5FE;
  --bg:#F2F5F6; --card:#FFFFFF; --head:#F8F9FA; --hover:#F6F9FB; --soft:#E3EAED;
  --line:#DEE2E6; --line-2:#C8D7DC; --input-line:#CED4DA;
  --text:#212529; --muted:#5F6B76; --title:#24628C; --req:#E00000;
  --tile-1:#F7F7F7; --tile-2:#E7E7E7; --tile-ico:#A7A7A7;
  --info-bg:#E7F1FB; --info-line:#B9D6F0; --info-fg:#0D3F66;
  --warn-bg:#FFF6DA; --warn-line:#F1D98A; --warn-fg:#6B4E00;
  --bad-bg:#FDECEC; --bad-line:#F3B9B9; --bad-fg:#8A1C1C;
  --ok-bg:#E6F4EC; --ok-line:#B7DFC8; --ok-fg:#14633D;
  --t-lila:#8E5FC2; --t-oro:#E0A800; --t-azul:#4FA3E0; --t-frasco:#C9B458; --t-heces:#8B5E3C; --t-hisopo:#6FA8B8; --t-gris:#8A8F98; --tubo-borde:rgba(0,0,0,.22);
  --sombra:rgba(20,40,70,.16); --toast:#1D2733;
  --f-title:"Montserrat","Segoe UI",system-ui,sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--f-body);-webkit-font-smoothing:antialiased}
.wrap{max-width:1180px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font-family:inherit}
h1,h2,h3{text-wrap:balance}

/* Encabezado azul de Labtivity */
.nav{background:var(--nav);color:var(--on-nav)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;padding-block:10px}
.marca{display:flex;align-items:center;gap:12px;min-width:0}
.logo{width:48px;height:48px;background:var(--card);border-radius:8px;display:grid;place-items:center;overflow:hidden;flex:none}
.logo img{width:44px;height:44px}
.marca-txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.marca-txt b{font-family:var(--f-title);font-weight:700;font-size:17px;letter-spacing:.03em;text-transform:uppercase}
.marca-txt small{font-size:12px;color:var(--on-nav-soft)}
.quien{display:flex;align-items:center;gap:8px;font-size:13px;flex-wrap:wrap}
.btn-salir{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid var(--on-nav-line);color:var(--on-nav);border-radius:5px;padding:4px 10px;font-size:12.5px;cursor:pointer}
.btn-salir:hover{background:var(--nav-dark)}
.menu{background:var(--nav-dark)}
.menu-in{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.menu-in::-webkit-scrollbar{display:none}
.menu button{flex:none;background:none;border:0;color:var(--on-nav-soft);font-weight:600;font-size:13px;padding:11px 14px 8px;cursor:pointer;border-bottom:3px solid transparent}
.menu button:hover{color:var(--on-nav)}
.menu button.on{color:var(--on-nav);border-bottom-color:var(--on-nav)}
.banda{background:linear-gradient(160deg,var(--nav) 49.999%,var(--nav-2) 50%);color:var(--on-nav)}
.banda-in{display:flex;align-items:baseline;justify-content:space-between;gap:4px 16px;flex-wrap:wrap;padding-block:16px}
.banda h1{margin:0;font-family:var(--f-title);font-weight:600;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(17px,2.6vw,22px)}
.banda-fecha{font-size:13px;color:var(--on-nav-soft)}

/* Contenido */
.contenido{padding-block:22px 48px;display:flex;flex-direction:column;gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:16px 18px}
.card.p0{padding:0;overflow:hidden}
.t-sec{font-family:var(--f-title);font-weight:600;font-size:15px;color:var(--title);margin:0 0 6px}
.eti{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)} .small{font-size:12.5px} .d-block{display:block} .mt{margin-top:10px}
.num{text-align:right;font-variant-numeric:tabular-nums} .der{text-align:right}
.barra{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap}
.barra p{margin:0;max-width:70ch}
.bienvenida{display:flex;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;align-items:center}
.bienvenida p{margin:0;max-width:62ch}
.datos-rec{display:flex;gap:10px 28px;flex-wrap:wrap;margin:0}
.datos-rec dt,.res-dl dt,.env-dl dt{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.datos-rec dd{margin:0;font-weight:600}

/* Menú de mosaicos de Labtivity */
.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 36px;padding-block:14px 4px}
.tile{display:flex;flex-direction:column;align-items:center;gap:12px;width:150px;background:none;border:0;padding:0;color:var(--text);cursor:pointer}
.cuadro{width:100px;height:100px;display:grid;place-items:center;background:linear-gradient(var(--tile-1),var(--tile-2));border:1px solid var(--line);color:var(--tile-ico);transition:transform .15s}
.tile:hover .cuadro{transform:translateY(-2px)}
.tile.navy .cuadro{background:linear-gradient(var(--navy-2),var(--navy));border-color:var(--navy);color:var(--on-nav)}
.tile .nombre{font-family:var(--f-title);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;text-align:center;color:var(--title)}
.tile .sub{font-size:12px;color:var(--muted);margin-top:-8px;text-align:center}
.tile:focus-visible{outline:none}
.tile:focus-visible .cuadro{outline:3px solid var(--focus);outline-offset:4px}

/* Avisos, chips y botones */
.alerta{border:1px solid;border-radius:6px;padding:10px 14px;font-size:13.5px}
.alerta.info{background:var(--info-bg);border-color:var(--info-line);color:var(--info-fg)}
.alerta.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-fg)}
.alerta.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-fg)}
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.st-reg{background:var(--info-bg);color:var(--info-fg);border-color:var(--info-line)}
.st-rec{background:var(--ok-bg);color:var(--ok-fg);border-color:var(--ok-line)}
.st-pro{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-line)}
.st-lis{background:var(--ok-fg);color:var(--on-nav);border-color:var(--ok-fg)}
.st-rech{background:var(--bad-bg);color:var(--bad-fg);border-color:var(--bad-line)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:7px 14px;border-radius:5px;border:1px solid transparent;font-weight:500;font-size:14px;line-height:1.3;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--primary);color:var(--on-nav);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-press)}
.btn-light{background:var(--card);color:var(--text);border-color:var(--input-line)}
.btn-light:hover{background:var(--head)}
.btn-danger{background:var(--danger);color:var(--on-nav);border-color:var(--danger)}
.btn-sm{padding:4px 10px;font-size:12.5px}
.btn-block{width:100%}
.btn:focus-visible,.seg button:focus-visible,.menu button:focus-visible,.filtro:focus-visible,.tabs button:focus-visible,.x:focus-visible,.btn-salir:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:1px}

/* Formularios */
.campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.campo label{font-size:13px;font-weight:600}
.req{color:var(--req);font-weight:700;margin-right:2px}
.opc{font-weight:400;color:var(--muted)}
input[type=text],input[type=search],input[type=date],input[type=datetime-local],input[type=number],input[type=email],input[type=password],select{width:100%;min-width:0;padding:7px 10px;border:1px solid var(--input-line);border-radius:5px;background:var(--card);color:var(--text);font:14px var(--f-body)}
input:disabled{background:var(--head);color:var(--muted)}
input.mal,select.mal{border-color:var(--danger);background:var(--bad-bg)}
.msg-mal{color:var(--bad-fg);font-size:12px}
.g-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.sufijo{display:flex;align-items:stretch;border:1px solid var(--input-line);border-radius:5px;background:var(--card);overflow:hidden}
.sufijo input{border:0;border-radius:0}
.sufijo span{padding:0 10px;color:var(--muted);background:var(--head);display:grid;place-items:center}
.sufijo:focus-within{outline:3px solid var(--focus)}
.sufijo input:focus-visible{outline:none}
.sufijo.pre{width:112px;margin-left:auto}
.sufijo.pre input{text-align:right;padding:5px 8px}
input.mini{width:72px}

/* Nuevo envío */
.envio-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}
.col-pac{display:flex;flex-direction:column;gap:16px;min-width:0}
.resumen{position:sticky;top:calc(12px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:14px}
.paciente{background:var(--card);border:1px solid var(--line);border-radius:6px}
.pac-head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 14px;background:var(--soft);border-bottom:1px solid var(--line-2);border-radius:6px 6px 0 0;font-family:var(--f-title);font-weight:600;font-size:13px;color:var(--title);text-transform:uppercase;letter-spacing:.03em}
.pac-body{padding:14px;display:flex;flex-direction:column;gap:14px}
.buscador{position:relative}
.buscar-box{display:flex;align-items:center;gap:8px;border:1px solid var(--input-line);border-radius:5px;background:var(--card);padding-left:10px;color:var(--muted)}
.buscar-box input{border:0;padding-left:0}
.buscar-box input:focus-visible{outline:none}
.buscar-box:focus-within{outline:3px solid var(--focus)}
.buscar-box.grande input{font-size:15px;padding-block:10px}
.sug{position:absolute;left:0;right:0;top:100%;margin-top:4px;background:var(--card);border:1px solid var(--line);border-radius:6px;box-shadow:0 10px 28px var(--sombra);max-height:310px;overflow:auto;z-index:20}
.sug-it{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;padding:9px 12px;background:none;border:0;border-bottom:1px solid var(--line);text-align:left;font-size:14px;color:var(--text);cursor:pointer}
.sug-it:hover:not([disabled]),.sug-it:focus-visible{background:var(--info-bg);outline:none}
.sug-it[disabled]{cursor:not-allowed;color:var(--muted)}
.sug-vacio{padding:12px;color:var(--muted)}
.en small{display:block;color:var(--muted);font-size:12px;line-height:1.4}
.cod{font:600 11.5px/1 var(--f-mono);background:var(--soft);color:var(--title);padding:4px 6px;border-radius:4px;white-space:nowrap}
.pr{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.est-sel{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:6px}
.est-sel li{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:9px 10px;border-top:1px solid var(--line)}
.est-sel li:first-child{border-top:0}
.est-sel li.vacio{display:block;color:var(--muted);text-align:center}
.x{background:none;border:0;color:var(--muted);cursor:pointer;padding:5px;border-radius:4px;display:grid}
.x:hover{color:var(--danger);background:var(--bad-bg)}
.pac-pie{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px;color:var(--muted)}
.tubo{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--tc);box-shadow:inset 0 0 0 1px var(--tubo-borde);flex:none;vertical-align:-1px}
.tubo.frasco{border-radius:3px;width:10px;height:12px}
.tubo-chip{display:inline-flex;align-items:center;gap:6px;background:var(--head);border:1px solid var(--line);border-radius:999px;padding:2px 9px;font-size:12.5px;white-space:nowrap}
.tubos-lista{display:flex;flex-wrap:wrap;gap:6px}
.agregar{align-self:flex-start}
.res-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.res-dl dd{margin:0;font:700 19px var(--f-title);color:var(--navy);font-variant-numeric:tabular-nums}
.res-bloque{display:flex;flex-direction:column;gap:5px;padding-top:12px;border-top:1px solid var(--line)}
.resumen p{margin:0}

/* Comprobante digital y etiquetas */
.hoja-acciones{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hoja{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:24px;box-shadow:0 2px 12px var(--sombra);max-width:920px;width:100%;margin-inline:auto}
.hoja-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding-bottom:16px;border-bottom:2px solid var(--nav);margin-bottom:12px}
.hoja-logo{width:76px;height:76px}
.hoja-tit h2{margin:2px 0 4px;font:700 25px var(--f-title);color:var(--navy);letter-spacing:.03em}
.hoja-tit p{margin:0;color:var(--muted);font-size:13px}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.qr-box small{font-size:11px;color:var(--muted);max-width:120px}
#qr img,#qr canvas{display:block;width:112px;height:112px}
.qr-alt{width:112px;height:112px;display:grid;place-items:center;border:1px dashed var(--line-2);font:600 12px var(--f-mono)}
.etiquetas{display:flex;flex-wrap:wrap;gap:12px}
.etq{width:232px;max-width:100%;border:1px dashed var(--line-2);background:var(--card);border-radius:4px;padding:8px 10px;display:flex;flex-direction:column;gap:3px;font-size:12px}
.etq-nac{font-weight:600}
.regla-etq{display:flex;flex-direction:column;gap:8px}
.regla-etq p{margin:0}
.pasos{list-style:none;margin:2px 0 16px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:520px}
.pasos li{position:relative;display:flex;flex-direction:column;gap:1px;padding-top:30px;font-size:12px;color:var(--muted)}
.pasos li::before{content:"";position:absolute;top:10px;left:0;right:0;height:2px;background:var(--line)}
.pasos li.hecho::before{background:var(--ok-fg)}
.pasos .punto{position:absolute;top:0;left:0;width:22px;height:22px;border-radius:50%;background:var(--card);border:2px solid var(--line);display:grid;place-items:center;color:var(--on-nav)}
.pasos li.hecho .punto,.pasos li.actual .punto{background:var(--ok-fg);border-color:var(--ok-fg)}
.pasos b{font-size:13px;color:var(--text)}
.pasos li.actual b{color:var(--ok-fg)}
.etq-nom{font-weight:700;text-transform:uppercase}
.etq-pie{color:var(--muted);font-size:11px}

/* Tablas */
.scroll{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:13.5px}
.tabla th{background:var(--head);text-align:left;font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:9px 12px;border-bottom:2px solid var(--line);white-space:nowrap}
.tabla td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}
.tabla tbody tr:hover td{background:var(--hover)}
.tabla tfoot td{background:var(--head);border-top:2px solid var(--line)}
.tabla .tubos-lista{flex-wrap:nowrap}
.tabla select{min-width:200px}
.fila-rech td{background:var(--bad-bg);color:var(--bad-fg);border-top:0;font-size:13px}
.fila-rech svg{vertical-align:-2px}
.fila-off td{color:var(--muted)}
.vacio{color:var(--muted);text-align:center;padding:20px}
.ultimo{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap}
.ultimo > div{flex:1 1 220px}

/* Catálogo */
.cat-filtros{display:flex;flex-direction:column;gap:10px}
.chips-area{display:flex;flex-wrap:wrap;gap:6px}
.filtro{background:var(--card);border:1px solid var(--input-line);border-radius:999px;padding:5px 12px;font-weight:500;font-size:13px;color:var(--text);cursor:pointer}
.filtro.on{background:var(--nav);border-color:var(--nav);color:var(--on-nav)}
.cat-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px}
.cat-it{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.cat-it.off{background:var(--head)}
.cat-it header{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}
.cat-it h3{margin:0;font-size:15px;font-weight:600;flex:1 1 180px}
.cat-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px}
.cat-meta span{display:inline-flex;align-items:center;gap:6px}
.cat-meta svg{color:var(--muted)}
.cat-ind{margin:0;font-size:13px;background:var(--head);border-radius:5px;padding:8px 10px}
.cat-ind.corta{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ver-mas{align-self:flex-start;background:none;border:0;padding:0;color:var(--primary);font-size:12.5px;font-weight:600;cursor:pointer}
.ver-mas:hover{text-decoration:underline}
.ver-mas:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.cat-meta .metodo{color:var(--muted)}
.en small.dos{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fuente{margin:0;font-size:12.5px;color:var(--muted)}
.filtro-tabla{max-width:360px}
.cat-it.off .cat-ind{background:var(--card)}
.cat-motivo{margin:0;color:var(--bad-fg);font-size:13px;font-weight:600}
.cat-it footer{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
.cat-precio{font:700 18px var(--f-title);color:var(--navy);font-variant-numeric:tabular-nums}
.cat-precio small{font:500 12px var(--f-body);color:var(--muted)}

/* Recepción, precios, laboratorios */
.grande{font:700 26px var(--f-title);color:var(--navy)}
.escaner{display:flex;flex-direction:column;gap:8px}
.escaner label{display:flex;align-items:center;gap:8px;font-weight:600}
.scan-fila{display:flex;gap:8px;flex-wrap:wrap}
.scan-fila input{flex:1 1 200px;width:auto}
.hoy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.envio{display:flex;flex-direction:column;gap:12px}
.envio header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 10px;flex-wrap:wrap}
.envio h3{margin:2px 0 0;font-size:15px}
.env-dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0}
.env-dl dd{margin:0;font-weight:700;font-size:17px;font-variant-numeric:tabular-nums}
.envio footer{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.rec-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.rec-head p{margin:0}
.rec-pie{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line-2);overflow-x:auto}
.tabs button{background:none;border:1px solid transparent;border-bottom:0;border-radius:6px 6px 0 0;padding:9px 16px;font-weight:600;font-size:13.5px;color:var(--muted);cursor:pointer;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{background:var(--card);border-color:var(--line-2);color:var(--title)}
.masivo-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;align-items:end;margin-top:8px}
.masivo p{margin:10px 0 0}
.sube{color:var(--ok-fg)} .baja{color:var(--bad-fg)}
.prog{color:var(--info-fg);font-size:12px}
.plab-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.lab-form{display:flex;flex-direction:column;gap:12px}
.lab-form p{margin:0}
.fila-btn{display:flex;gap:8px;flex-wrap:wrap}
.switch{position:relative;display:inline-block;width:38px;height:22px}
.switch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;background:var(--input-line);border-radius:999px;transition:background .15s}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px var(--sombra);transition:transform .15s}
.switch input:checked + span{background:var(--ok-fg)}
.switch input:checked + span::after{transform:translateX(16px)}
.switch input:focus-visible + span{outline:3px solid var(--focus)}

/* Entrada (igual que el portal de consulta) */
.login{background:var(--card)}
.login-top{height:10px;background:var(--nav)}
.login-in{display:flex;flex-direction:column;align-items:center;padding-block:26px 48px}
.login-logo{width:120px;height:120px}
.login-banda{width:min(560px,100%);background:linear-gradient(160deg,var(--nav) 49.999%,var(--nav-2) 50%);color:var(--on-nav);text-align:center;padding:22px 16px;margin-top:18px;box-shadow:0 6px 16px var(--sombra)}
.login-banda h1{margin:0;font:600 clamp(20px,4vw,26px) var(--f-title);text-transform:uppercase;letter-spacing:.04em}
.login-card{width:min(400px,100%);background:var(--card);border-radius:0 0 8px 8px;box-shadow:0 8px 24px var(--sombra);padding:22px 24px 18px;display:flex;flex-direction:column;gap:12px}
.login-card h2{margin:0 0 4px;text-align:center;font:700 22px var(--f-title);text-transform:uppercase}
.login-card p{margin:0}
.input-grupo{display:flex;border:1px solid var(--input-line);border-radius:5px;overflow:hidden}
.input-grupo span{display:grid;place-items:center;padding:0 10px;background:var(--head);border-right:1px solid var(--input-line)}
.input-grupo input{border:0;border-radius:0}
.input-grupo input:focus-visible{outline:none}
.input-grupo:focus-within{outline:3px solid var(--focus)}

.pie{border-top:1px solid var(--line);background:var(--card);color:var(--muted);font-size:12px}
.pie .wrap{padding-block:14px}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));width:max-content;max-width:min(560px,calc(100% - 32px));background:var(--toast);color:var(--on-nav);padding:11px 16px;border-radius:8px;box-shadow:0 10px 30px var(--sombra);font-size:13.5px;z-index:50}

@media (max-width:920px){.envio-grid{grid-template-columns:minmax(0,1fr)}.resumen{position:static}}
@media (max-width:640px){
  .marca-txt small{display:none}
  .tiles{gap:22px 12px}.tile{width:120px}.cuadro{width:84px;height:84px}.cuadro svg{width:38px;height:38px}
  .hoja{padding:16px}.hoja-head{grid-template-columns:minmax(0,1fr) auto}.hoja-logo{display:none}
  .est-sel li{grid-template-columns:auto minmax(0,1fr) auto auto}.est-sel li .cod{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Agregados de la página real */
.tile[disabled]{cursor:default;opacity:.55}
.tile[disabled]:hover .cuadro{transform:none}
.pendiente{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.temporal{font:700 22px var(--f-mono);letter-spacing:.06em;color:var(--navy);background:var(--head);border:1px dashed var(--line-2);border-radius:6px;padding:10px 14px;display:inline-block;user-select:all}
.aviso-texto{white-space:pre-wrap;font-family:var(--f-body);line-height:1.55;max-height:55vh;overflow:auto;background:var(--head);border:1px solid var(--line);border-radius:6px;padding:14px 16px;font-size:13.5px;margin:0}
.lista-acc{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.chip.st-can{background:var(--head);color:var(--muted);border-color:var(--line)}
.chip.st-off{background:var(--head);color:var(--muted);border-color:var(--line)}
.chip.st-tarde{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-line)}
.form-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end}
.cargando{padding:40px;text-align:center;color:var(--muted)}
.sub-sec{margin:6px 0 0;font:600 13px var(--f-title);color:var(--title);text-transform:uppercase;letter-spacing:.04em}
textarea{width:100%;min-width:0;padding:7px 10px;border:1px solid var(--input-line);border-radius:5px;background:var(--card);color:var(--text);font:14px var(--f-body);resize:vertical}
td .btn-sm{margin:1px 0}
@media print{.nav,.banda,.hoja-acciones,.pie,.regla-etq,#toast{display:none!important}.contenido{padding:0}.hoja{box-shadow:none;border:0}}

.login{min-height:100vh}

/* En el celular, las tablas de pacientes se leen hacia abajo: un paciente por bloque */
@media (max-width:640px){
  .tabla.apilable thead{display:none}
  .tabla.apilable,.tabla.apilable tbody,.tabla.apilable tfoot,.tabla.apilable tr,.tabla.apilable td{display:block;width:100%}
  .tabla.apilable tr{border-top:1px solid var(--line);padding:8px 0}
  .tabla.apilable tbody tr:first-child{border-top:0}
  .tabla.apilable td{border:0;padding:3px 12px}
  .tabla.apilable td.num,.tabla.apilable td.der{text-align:left}
  .tabla.apilable td.solo-ancho{display:none}
  .tabla.apilable td[data-et]::before{content:attr(data-et);display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
  .tabla.apilable tbody tr:hover td{background:none}
  .tabla.apilable .tubos-lista{flex-wrap:wrap}
}