/* Quantum Calibraciones — Manual de Marca: naranja #EE7D00, gris #868888, negro #231F20, Montserrat. */
:root{
  --bg:#f6f6f7;--card:#fff;--ink:#231f20;--mut:#6b6d6d;--line:#e4e4e5;
  --pri:#ee7d00;--pri-hover:#d87000;--on-pri:#231f20;--link:#b85f00;
  --ok:#17794a;--warn:#b85f00;--err:#c62828;
  --grad:linear-gradient(110deg,#fd5800,#ef7d03);
  --nav:#231f20;--nav-ink:#d9d9d9;
  --radius:10px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#171415;--card:#231f20;--ink:#f2f2f2;--mut:#a3a5a5;--line:#3a3536;
  --link:#ff9a2e;--ok:#4cc38a;--warn:#ff9a2e;--err:#ff7b72;--nav:#1a1718;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 'Montserrat','Avenir Next',Avenir,'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:var(--link);font-weight:600}
a:hover{text-decoration:none}

/* Cabecera */
.top{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 20px;background:var(--nav);border-bottom:3px solid var(--pri)}
.top .marca{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.top .logo{height:34px;width:auto;display:block}
.top nav a{color:var(--nav-ink);text-decoration:none;font-weight:600;font-size:14px;margin-right:18px;padding:6px 0;border-bottom:2px solid transparent}
.top nav a:hover,.top nav a.on{color:#fff;border-bottom-color:var(--pri)}
.top .usuario{display:flex;align-items:center;gap:12px;color:var(--nav-ink);font-size:13px}
.top .usuario form{margin:0}
.top .btn.sec{color:#fff;border-color:#8a8a8a;padding:5px 12px;font-size:13px}
.top .btn.sec:hover{border-color:var(--pri);color:var(--pri)}

main{max-width:1040px;margin:0 auto;padding:24px 16px 40px}
footer.pie{max-width:1040px;margin:0 auto;padding:0 16px 28px;color:var(--mut);font-size:12px;text-align:center}

h1{font-size:22px;font-weight:800;margin:0 0 18px;letter-spacing:-.01em}
h1::after{content:"";display:block;width:44px;height:4px;border-radius:2px;background:var(--pri);margin-top:8px}
h2{font-size:15px;font-weight:700;margin:0 0 12px}
.mut{color:var(--mut)}.err{color:var(--err);font-size:13px}

/* Tarjetas y tablas */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px}
.tabla{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--mut);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
tbody tr:hover td,table tr:hover td{background:color-mix(in srgb,var(--pri) 6%,transparent)}
th:hover{background:none}

/* Formularios */
label{display:block;font-size:12px;font-weight:600;color:var(--mut);margin:12px 0 4px}
input,select,textarea{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:var(--bg);color:var(--ink);font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--pri);outline-offset:0;border-color:var(--pri)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 16px}
.eq{border:1px dashed var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;background:color-mix(in srgb,var(--pri) 3%,transparent)}

/* Botones */
.btn{display:inline-block;padding:9px 18px;border:2px solid var(--pri);border-radius:7px;background:var(--pri);color:var(--on-pri);font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--pri-hover);border-color:var(--pri-hover)}
.btn.sec{background:transparent;color:var(--link);border-color:var(--link)}
.btn.sec:hover{background:color-mix(in srgb,var(--pri) 12%,transparent)}

/* Estados */
.badge{display:inline-block;padding:2px 10px;border-radius:99px;background:var(--line);color:var(--ink);font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
.badge[data-estado=registrada]{background:#8688881f;color:var(--mut);box-shadow:inset 0 0 0 1px var(--line)}
.badge[data-estado=aprobada]{background:#ee7d001f;color:var(--warn)}
.badge[data-estado=en_calibracion]{background:var(--pri);color:var(--on-pri)}
.badge[data-estado=certificada]{background:#17794a22;color:var(--ok)}
.badge[data-estado=facturada]{background:#17794a;color:#fff}
.badge[data-estado=entregada]{background:var(--ink);color:var(--card)}

.chips a{display:inline-block;margin:0 6px 8px 0;padding:5px 13px;border:1px solid var(--line);border-radius:99px;background:var(--card);color:var(--ink);text-decoration:none;font-size:12px;font-weight:600}
.chips a:hover{border-color:var(--pri)}
.chips a.on{background:var(--pri);color:var(--on-pri);border-color:var(--pri)}

.ok{background:#17794a1f;border:1px solid var(--ok);color:var(--ok);padding:10px 14px;border-radius:8px;margin-bottom:16px;font-weight:600}

/* Ingreso */
body.login{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:24px 16px;background:var(--grad)}
body.login main{padding:0;width:100%;max-width:400px}
body.login .logo-grande{width:min(340px,80vw);height:auto;display:block}
body.login .card{border:0;box-shadow:0 14px 40px #0003;padding:26px}
body.login h1::after{margin-top:6px}
body.login footer.pie{color:#fff;opacity:.9}
body.login .btn{width:100%;padding:11px}

.tabla td:first-child a{white-space:nowrap}
/* Fichas: etiqueta pequeña sobre el dato */
.grid>div>.mut:first-child{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.grid>div>.mut:first-child+br{display:none}
.grid{row-gap:8px}
.aviso-error{background:color-mix(in srgb,var(--err) 12%,transparent);border:1px solid var(--err);color:var(--err);padding:9px 12px;border-radius:7px;font-size:13px;font-weight:600}

/* Paginación */
.paginacion{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:4px 0 8px;font-size:13px}
.paginacion .info{color:var(--mut)}
.paginacion ul{display:flex;gap:4px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.paginacion a,.paginacion span{display:inline-block;min-width:34px;text-align:center;padding:6px 10px;border:1px solid var(--line);border-radius:7px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:600}
.paginacion a:hover{border-color:var(--pri)}
.paginacion span.on{background:var(--pri);border-color:var(--pri);color:var(--on-pri)}
.paginacion span.off{color:var(--mut);background:transparent;border-color:transparent;font-weight:500}
.paginacion span.info{border:0;background:none;padding:0;min-width:0;font-weight:500;text-align:left}

/* Verificación pública del certificado */
body.publico{background:var(--bg)}
body.publico main{max-width:620px}
.logo-publico{display:block;width:min(300px,80%);height:auto;margin:8px auto 20px}
@media (prefers-color-scheme:dark){.logo-publico{content:url('/img/logo-fondo-oscuro.svg')}}
input[type=file]{padding:6px;font-size:12px;margin:6px 0}

/* Firmas */
.informe{list-style:none;margin:0;padding:0}
.informe li{padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.informe .si{color:var(--ok)}.informe .no{color:var(--err)}
.pasos{margin:0 0 12px;padding-left:20px;color:var(--mut);font-size:13px}

/* Móvil y tablet: cabecera compacta, menú deslizable, tablas apiladas en tarjetas */
@media (max-width:760px){
  body{font-size:16px}
  .top{padding:10px 14px;gap:8px}
  .top .marca{width:100%;gap:10px;flex-wrap:wrap}
  .top .logo{height:28px}
  .top nav{order:3;width:100%;display:flex;gap:4px;overflow-x:auto;white-space:nowrap;margin:0 -14px;padding:0 14px;scrollbar-width:none}
  .top nav::-webkit-scrollbar{display:none}
  .top nav a{margin:0 14px 0 0;padding:10px 0;font-size:15px}
  .top .usuario{position:absolute;top:10px;right:14px;gap:8px}
  .top{position:relative}
  .top .usuario a{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  main{padding:16px 12px 32px}
  h1{font-size:20px}
  .card{padding:14px}
  input,select,textarea{font-size:16px;padding:11px 10px}
  .btn{padding:12px 18px;min-height:44px}
  .grid{grid-template-columns:1fr 1fr;gap:0 12px}
  .chips{display:flex;gap:6px;overflow-x:auto;white-space:nowrap;margin:0 -12px 8px;padding:0 12px 4px}
  .chips a{margin:0;flex:none}
  .paginacion{justify-content:center}

  .tabla{overflow:visible;background:none;border:0;padding:0}
  .tabla table,.tabla tbody,.tabla tr,.tabla td{display:block;width:100%}
  .tabla tr:has(th){display:none}
  .tabla tr{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:8px 14px;margin-bottom:10px}
  .tabla td{border:0;padding:6px 0;display:block;text-align:left;overflow-wrap:anywhere;min-width:0}
  .tabla td>*{max-width:100%}
  .tabla td::before{content:attr(data-label);display:block;color:var(--mut);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
  .tabla td:not([data-label])::before{content:none}
  .tabla td:first-child{font-weight:700}
  .tabla td form{margin-top:8px}
  .tabla td input[type=file]{width:100%}
  .tabla td .btn{width:100%;text-align:center}
  .tabla tr:hover td{background:none}
  .tabla td form{text-align:left}
  .tabla td input[type=file]{max-width:100%}
}
/* Portal del cliente */
.portal-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.portal-cab form{margin:0}
body.portal main{max-width:760px}
.portal-fila{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.avance{list-style:none;display:flex;gap:6px;margin:0 0 12px;padding:0}
.avance li{flex:1;text-align:center;font-size:11px;font-weight:700;padding:7px 4px;border-radius:6px;background:var(--line);color:var(--mut)}
.avance li.hecho{background:var(--pri);color:var(--on-pri)}
@media print{.top,footer.pie,.btn,h1~.card:not(#hoja-acceso){display:none!important}}
@media (max-width:420px){.grid{grid-template-columns:1fr}.top .usuario a{max-width:80px}}

.combo input{margin-top:6px}
.combo input[hidden]{display:none}

/* Equipos de la orden: cabecera con copiar y quitar */
.eq-cab{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.eq-acc{display:flex;gap:6px;align-items:center}
.eq-acc .btn{padding:5px 12px;font-size:13px;min-height:0}
.eq-acc .eq-cant{width:64px;padding:5px 8px}

/* Tablero de inicio */
.dash-exp{display:flex;gap:8px}
.dash-exp .btn{padding:6px 16px}
.dash-filtro{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.dash-filtro label{margin-top:0}
.dash-filtro .btn{margin-bottom:1px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-decoration:none;color:var(--ink);display:block;font-weight:400}
.kpi b{display:block;font-size:28px;font-weight:800;line-height:1.1}
.kpi span{display:block;margin-top:4px;color:var(--mut);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
a.kpi:hover{border-color:var(--pri)}
.kpi.alerta b{color:var(--err)}
.dash-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.dash-2{grid-template-columns:1fr}.kpis{grid-template-columns:1fr 1fr}}
.barras-leyenda{font-size:12px;color:var(--mut);margin-bottom:8px}
.barras-leyenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin:0 4px 0 10px;vertical-align:middle}
.barras-leyenda i:first-child{margin-left:0}
.barras{display:flex;gap:8px;align-items:flex-end;height:170px;overflow-x:auto;padding-top:14px}
.barra-mes{flex:1;min-width:46px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;text-align:center;font-size:11px;color:var(--mut)}
.barra-mes .par{flex:1;display:flex;gap:3px;align-items:flex-end;justify-content:center}
.barra-mes .b{width:40%;max-width:22px;min-height:2px;position:relative}
.barra-mes .b em{position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-style:normal;font-size:10px;color:var(--ink)}
.reg{background:var(--pri)}.ter{background:var(--ok)}
.hbar{margin-bottom:10px;font-size:13px}
.hbar .rel{position:relative;background:var(--line);border-radius:4px;height:18px}
.hbar .rel i{display:block;height:100%;background:var(--pri);border-radius:4px}
.hbar .rel b{position:absolute;right:6px;top:0;font-size:12px;line-height:18px}

/* Estado indicativo del equipo en el laboratorio y órdenes anuladas */
.badge[data-estado=pendiente]{background:#8688881f;color:var(--mut);box-shadow:inset 0 0 0 1px var(--line)}
.badge[data-estado=apto]{background:#17794a;color:#fff}
.badge[data-estado=no_apto]{background:var(--err);color:#fff}
.badge[data-estado=anulada]{background:color-mix(in srgb,var(--err) 16%,transparent);color:var(--err)}
.lab-estado{margin-top:8px}
.lab-estado .res-extra{margin:6px 0}
.lab-estado .btn{padding:5px 12px;font-size:13px;min-height:0}

/* Sistema de gestión */
.top nav a{margin-right:14px;font-size:13px}
.badge[data-estado=abierto],.badge[data-estado=pendiente]{background:#ee7d001f;color:var(--warn)}
.badge[data-estado=en_tratamiento]{background:var(--pri);color:var(--on-pri)}
.badge[data-estado=cerrado],.badge[data-estado=completa],.badge[data-estado=cumple]{background:#17794a22;color:var(--ok)}
.badge[data-estado=no_cumple],.badge[data-estado=vencido]{background:color-mix(in srgb,var(--err) 16%,transparent);color:var(--err)}
.badge[data-estado=en_curso]{background:#8688881f;color:var(--mut)}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.kpi a{display:block;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;border-top:3px solid var(--pri)}
.kpi b{display:block;font-size:28px;font-weight:800;line-height:1.1}
.kpi span{font-size:12px;color:var(--mut);font-weight:600}
.checks label{display:inline-block;color:inherit;font-size:14px;margin:4px 16px 4px 0}
.checks input,input[type=checkbox],input[type=radio]{width:auto}
.hist{border-left:3px solid var(--line);padding-left:12px;margin:0 0 12px}
.nota{display:inline-flex;gap:10px;flex-wrap:wrap}
.nota label{display:inline-flex;align-items:center;gap:4px;margin:0;font-size:14px;color:var(--ink)}