:root{
  --bg:#f4f6fb; --panel:#ffffff; --ink:#1a2233; --muted:#6b7688;
  --line:#e4e8f0; --brand:#1f6feb; --brand-dk:#1857c4;
  --ok:#1a9d5a; --ok-bg:#e6f6ec; --danger:#d1434b; --danger-bg:#fdecec;
  --warn:#c47f16; --shadow:0 1px 3px rgba(20,30,60,.08),0 6px 20px rgba(20,30,60,.05);
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 .4em}

/* Topbar */
.topbar{display:flex;align-items:center;gap:20px;background:var(--panel);
  border-bottom:1px solid var(--line);padding:10px 22px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px}
.brand strong{display:block;font-size:15px;line-height:1.1}
.brand small{color:var(--muted);font-size:12px}
.brand-logo{width:40px;height:40px;object-fit:contain;border-radius:8px}
.logo{font-size:24px}.logo.big{font-size:44px}
.login-logo{width:80px;height:80px;object-fit:contain;margin-bottom:6px}
.mainnav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.mainnav a{padding:7px 12px;border-radius:8px;color:var(--ink);font-weight:500;font-size:14px}
.mainnav a:hover{background:var(--bg);text-decoration:none}
.mainnav a.active{background:var(--brand);color:#fff}
/* Menú agrupado (desplegables en escritorio) */
.navgroup{position:relative}
.navgroup-btn{display:block;padding:7px 12px;border-radius:8px;color:var(--ink);
  font-weight:500;font-size:14px;cursor:default;white-space:nowrap;user-select:none}
.navgroup:hover .navgroup-btn{background:var(--bg)}
.navgroup-btn.active{background:var(--brand);color:#fff}
.navgroup-menu{position:absolute;top:100%;left:0;min-width:215px;background:var(--panel);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:6px;
  display:none;flex-direction:column;gap:2px;z-index:40}
.navgroup:hover .navgroup-menu{display:flex}
.navgroup-menu a{padding:9px 12px;border-radius:7px;color:var(--ink);font-weight:500;
  font-size:14px;white-space:nowrap}
.navgroup-menu a:hover{background:var(--bg);text-decoration:none}
/* Fila de sub-ubicación */
.subrow{padding-left:22px}
.userbox{display:flex;align-items:center;gap:10px;font-size:14px}
.uname{font-weight:600}
.logout{color:var(--muted)}
/* Orden de los elementos del encabezado (escritorio) */
.brand{order:1}
.mainnav{order:2}
.bell{order:3}
.userbox{order:4}
.navtoggle{order:5;display:none;background:transparent;border:1px solid var(--line);
  border-radius:9px;font-size:20px;line-height:1;padding:4px 11px;cursor:pointer;color:var(--ink)}
.navtoggle:hover{background:var(--bg)}
/* Menú hamburguesa en móvil/tablet */
@media(max-width:900px){
  .topbar{gap:10px 12px}
  .brand{flex:1;min-width:0}
  .brand strong{font-size:14px}
  .bell{order:2}
  .navtoggle{order:3;display:block}
  .mainnav{order:4;flex:0 0 100%;width:100%;flex-direction:column;gap:2px;display:none}
  .userbox{order:5;flex:0 0 100%;width:100%;display:none;justify-content:flex-start;
    border-top:1px solid var(--line);padding-top:10px;margin-top:2px}
  .topbar.nav-open .mainnav,.topbar.nav-open .userbox{display:flex}
  .mainnav a{padding:12px 10px;font-size:15px}
  /* Grupos como secciones en móvil (siempre expandidos dentro del menú) */
  .navgroup{width:100%}
  .navgroup-btn{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em;padding:12px 10px 4px}
  .navgroup-btn.active{background:transparent;color:var(--brand)}
  .carat{display:none}
  .navgroup-menu{position:static;display:flex;box-shadow:none;border:none;padding:0;min-width:0}
  .navgroup-menu a{padding:11px 18px;font-size:15px}
}
.bell{position:relative;font-size:20px;text-decoration:none;line-height:1;padding:2px}
.bell:hover{text-decoration:none}
.bell.active{filter:none}
.bell-badge{position:absolute;top:-6px;right:-8px;background:var(--danger);color:#fff;
  font-size:10px;font-weight:800;min-width:16px;height:16px;line-height:16px;text-align:center;
  border-radius:9px;padding:0 4px}

/* Notificaciones */
.notif-list{list-style:none;padding:0;margin:0}
.notif-list li{display:flex;gap:10px;align-items:flex-start;padding:11px 6px;border-bottom:1px solid var(--line)}
.notif-list li:last-child{border:none}
.notif-list li.unread{background:#f2f7ff}
.notif-dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex-shrink:0;background:var(--muted)}
.notif-dot.tipo-reserva{background:#5b3fd6}
.notif-dot.tipo-reposicion{background:var(--brand)}
.notif-dot.tipo-descarte{background:var(--danger)}
.notif-body{flex:1}
.notif-live{list-style:none;padding:0;margin:0}
.notif-live li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid var(--line)}
.notif-live li:last-child{border:none}
.rolechip{font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:20px;font-weight:700}
.rolechip.admin{background:#eae4ff;color:#5b3fd6}
.rolechip.maestro{background:#e2eefb;color:#1857c4}

.container{max-width:1180px;margin:0 auto;padding:24px 22px 60px}
.page-title{font-size:24px}
.page-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.row-actions{display:flex;gap:8px;align-items:center}

/* Flash */
.flash{padding:11px 15px;border-radius:10px;margin-bottom:14px;font-weight:500}
.flash.ok{background:var(--ok-bg);color:var(--ok)}
.flash.error{background:var(--danger-bg);color:var(--danger)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;
  border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;transition:.12s}
.btn:hover{border-color:#c9d2e2;text-decoration:none}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-dk)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger);border-color:#f0c3c5}
.btn.danger:hover{background:var(--danger-bg)}
.btn.small{padding:5px 10px;font-size:13px}
.btn.block{width:100%}
form.inline{display:inline-flex;gap:6px;align-items:center;margin:0}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-bottom:22px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.card.stat{display:flex;flex-direction:column;gap:2px;text-align:left}
.card.stat .num{font-size:32px;font-weight:800;line-height:1}
.card.stat .lbl{color:var(--muted);font-weight:600;font-size:13px}
.card.stat.warn .num{color:var(--danger)}
.card.stat:hover{text-decoration:none;transform:translateY(-2px);transition:.15s}

.cards.labs .lab-head{display:flex;justify-content:space-between;align-items:start}
.lab-stats{margin-top:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lab-stats .num{font-size:20px;font-weight:800}

.cards.exp{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.exp-card{display:flex;flex-direction:column;gap:8px}
.exp-card:hover{text-decoration:none;transform:translateY(-2px);transition:.15s}
.exp-top{display:flex;justify-content:space-between;align-items:center}
.exp-card .link{color:var(--brand);font-weight:600;font-size:14px;margin-top:auto}

/* Panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:20px;box-shadow:var(--shadow)}
.panel h2{font-size:17px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.grid-2{grid-template-columns:1fr}}

/* Tables */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase;
  letter-spacing:.03em;padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap}
.tbl td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:hover td{background:#fafbfe}
.tbl tr.low td{background:#fff8f8}
.tbl tr.low:hover td{background:#fff1f1}
.actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* Badges */
.badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:12px;font-weight:700;background:#eef1f6;color:var(--ink)}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.danger{background:var(--danger-bg);color:var(--danger)}
.badge.cat{text-transform:capitalize}
.badge.cat.sensor{background:#e2eefb;color:#1857c4}
.badge.cat.aparato{background:#eae4ff;color:#5b3fd6}
.badge.cat.insumo{background:#e6f6ec;color:#1a9d5a}
.badge.cat.kit{background:#fdf0e0;color:#b5701a}
.badge.cat.reactivo{background:#fde8f0;color:#c23a72}
.badge.area.biologia{background:#e6f6ec;color:#1a9d5a}
.badge.area.quimica{background:#fde8f0;color:#c23a72}
.badge.area.fisica{background:#e2eefb;color:#1857c4}
.badge.estado{text-transform:capitalize}
.badge.estado.solicitada{background:#fdf0e0;color:#b5701a}
.badge.estado.ordenada{background:#e2eefb;color:#1857c4}
.badge.estado.recibida,.badge.estado.entrada,.badge.estado.conteo{background:var(--ok-bg);color:var(--ok)}
.badge.estado.cancelada,.badge.estado.salida{background:#eef1f6;color:var(--muted)}
.prov{font-weight:600}
.prov.Vernier{color:#1857c4}
.prov.Carolina{color:#1a9d5a}
/* Consumible / nivel / estado equipo */
.badge.consumible{background:#eef4ff;color:#1857c4}
.badge.nivel.lleno{background:var(--ok-bg);color:var(--ok)}
.badge.nivel.medio{background:#fdf0e0;color:#b5701a}
.badge.nivel.bajo{background:var(--danger-bg);color:var(--danger)}
.badge.estadoeq.operativo{background:var(--ok-bg);color:var(--ok)}
.badge.estadoeq.mantenimiento{background:#fdf0e0;color:#b5701a}
.badge.estadoeq.dañado{background:var(--danger-bg);color:var(--danger)}
.badge.estadoeq.fuera_servicio{background:#eef1f6;color:var(--muted)}
.badge.motivo.vencimiento{background:#fdf0e0;color:#b5701a}
.badge.motivo.mal_funcionamiento{background:var(--danger-bg);color:var(--danger)}
.badge.estado.descarte{background:var(--danger-bg);color:var(--danger)}
.cad{font-size:12px;color:var(--muted);margin-top:2px}
.cad.vencido{color:var(--danger);font-weight:700}
.alert-cad{border-color:#f3d7a6;background:#fffdf7}

/* Forms */
label{display:block;font-weight:600;font-size:13px;color:#3a4658;margin-bottom:2px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;
  font-size:14px;font-family:inherit;background:#fff;margin-top:4px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(31,111,235,.12)}
.form-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-grid .col-2{grid-column:1/-1}
@media(max-width:640px){.form-grid{grid-template-columns:1fr}.form-grid .col-2{grid-column:auto}}
.form-actions{display:flex;gap:10px;margin-top:18px}
.sub{margin-top:22px;font-size:16px}
.req-row{display:grid;grid-template-columns:1fr 110px 44px;gap:10px;margin-bottom:10px;align-items:center}
.filters{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.filters input[type=search]{flex:1;min-width:200px}
.filters select{width:auto}
.conteo-cell{min-width:180px;display:flex;flex-direction:column;gap:5px}

/* Login */
.login-wrap{min-height:80vh;display:flex;align-items:center;justify-content:center}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:34px;width:100%;max-width:400px;box-shadow:var(--shadow)}
.login-head{text-align:center;margin-bottom:22px}
.login-head h1{font-size:20px;margin-top:8px}
.login-head p{color:var(--muted);margin:0}
.login-card form label{margin-bottom:14px}
.login-hint{margin-top:18px;padding:12px;background:var(--bg);border-radius:10px;
  font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:3px}

/* Misc */
.muted{color:var(--muted)}
.small{font-size:13px}
.center{text-align:center}
.tags{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.suggest{list-style:none;padding:0;margin:0}
.suggest li{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.suggest li:last-child{border:none}
.labbars{display:flex;flex-direction:column;gap:10px}
.labbar{display:grid;grid-template-columns:180px 1fr auto;gap:12px;align-items:center}
.labbar-name{font-weight:600;font-size:14px}
.labbar-track{background:var(--bg);border-radius:20px;height:12px;overflow:hidden}
.labbar-fill{background:var(--brand);height:100%;border-radius:20px}
.labbar-num{font-weight:700;text-align:right;font-size:13px;white-space:nowrap}
@media(max-width:640px){.labbar{grid-template-columns:110px 1fr auto}}

/* Numeric cells / informe */
.num-cell{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.right{text-align:right}
.hint{display:block;color:var(--muted);font-size:12px;margin-top:4px;font-weight:500}
.tbl tfoot td{border-top:2px solid var(--line);background:#fafbfe}
.total-final{display:flex;justify-content:space-between;align-items:center;
  font-size:18px;background:#eef4ff;border-color:#cddffb}
.total-final strong{font-size:24px;color:var(--brand-dk)}

/* Permisos / usuarios */
.perm-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 16px;margin:8px 0}
@media(max-width:640px){.perm-grid{grid-template-columns:1fr}}
.check{display:flex;align-items:center;gap:8px;font-weight:500;font-size:13px;margin:0}
.check input{width:auto;margin:0}
.user-card .user-top{display:flex;justify-content:space-between;align-items:start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.perm-form{border-top:1px solid var(--line);padding-top:12px}
.inline-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px}
.inline-label select{width:auto;margin:0}

/* Fotos y miniaturas */
.item-name{display:flex;align-items:center;gap:10px}
.thumb{width:40px;height:40px;object-fit:cover;border-radius:8px;border:1px solid var(--line);flex-shrink:0}
.fotos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px}
@media(max-width:560px){.fotos-grid{grid-template-columns:1fr}}
.foto-slot{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;background:#fafbfe}
.foto-slot img{width:100%;height:120px;object-fit:cover;border-radius:8px}
.foto-empty{height:120px;display:flex;align-items:center;justify-content:center;color:var(--muted);
  background:#eef1f6;border-radius:8px;font-size:13px}
.check.small{font-size:12px}

/* Galería */
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.foto-card{position:relative;margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.foto-card img{width:100%;height:150px;object-fit:cover;display:block}
.foto-card figcaption{padding:7px 10px;font-size:13px;color:var(--ink)}
.foto-card .foto-del{position:absolute;top:6px;right:6px;padding:2px 8px;background:rgba(255,255,255,.9)}

/* Logos de laboratorio */
.lab-title{display:flex;align-items:center;gap:14px;margin-bottom:2px}
.lab-logo{width:56px;height:56px;object-fit:contain;border-radius:12px;background:#eef1f6;padding:4px}
.lab-logo.emoji{display:flex;align-items:center;justify-content:center;font-size:30px}
.lab-logo.sm{width:38px;height:38px;font-size:22px;border-radius:9px}
.lab-head{display:flex;align-items:center;gap:10px}

/* Video */
.video-embed{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;background:#000}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-file{width:100%;max-height:460px;border-radius:12px;background:#000}

/* Logo config */
.logo-preview{display:flex;flex-direction:column;align-items:center;gap:6px;margin:12px 0}
.logo-preview img{width:110px;height:110px;object-fit:contain;border:1px solid var(--line);border-radius:14px;padding:8px;background:#fff}

/* Ficha de artículo / QR */
.ficha{display:grid;grid-template-columns:1fr 260px;gap:22px;align-items:start}
@media(max-width:760px){.ficha{grid-template-columns:1fr}}
.ficha-tbl{max-width:520px;margin-top:14px}
.ficha-tbl th{text-transform:none;font-size:13px;color:var(--muted);width:150px;border-bottom:1px solid var(--line)}
.ficha-qr{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;
  text-align:center;box-shadow:var(--shadow);position:sticky;top:80px}
.ficha-qr img{width:100%;max-width:220px;height:auto}
.etiqueta{display:none}

/* Galería como enlace (prácticas destacadas) */
a.foto-card{display:block;color:inherit}
a.foto-card:hover{text-decoration:none;transform:translateY(-2px);transition:.15s}
.foto-card figcaption strong{display:block;font-size:13px;line-height:1.2;margin-bottom:2px}

/* Impresión del informe y etiquetas */
.only-print{display:none}
@media print{
  .topbar,.no-print,.btn{display:none !important}
  .only-print{display:block}
  body{background:#fff;font-size:12px}
  .container{max-width:none;padding:0}
  .panel{box-shadow:none;border:1px solid #ccc;break-inside:avoid;margin-bottom:12px}
  .print-head h1{font-size:18px;margin-bottom:4px}
  /* Etiqueta QR: solo el código + datos, centrado */
  .ficha{display:block}
  .ficha-main{display:none}
  .ficha-qr{border:1px dashed #999;box-shadow:none;max-width:280px;margin:0 auto}
  .etiqueta{display:flex;flex-direction:column;gap:2px;margin-top:8px;text-align:center}
  .etiqueta strong{font-size:14px}
  .etiqueta span{font-size:11px;color:#333}
}