/* ATV Asistencia — sistema de diseño */
:root{
  --azul-900:#0a1f33; --azul-800:#0f2b46; --azul-700:#163a5c; --azul-600:#1e4a73;
  --azul-100:#dce7f5; --azul-50:#eef4fb;
  --acento:#0e9f6e; --acento-osc:#0b7d57; --ambar:#b45309; --rojo:#c0392b;
  --tinta:#16232f; --tinta-2:#44566b; --tinta-3:#7b8a9c;
  --borde:#d8e4e4; --fondo:#f5f8f7; --blanco:#ffffff;
  --radio:12px; --radio-s:8px;
  --sombra:0 1px 2px rgba(15,43,70,.05),0 14px 32px -25px rgba(15,43,70,.24);
  --fuente:'Avenir Next',Avenir,'Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--fuente);background:var(--fondo);color:var(--tinta);font-size:15px;line-height:1.5}
::selection{background:var(--azul-100);color:var(--azul-900)}
button{font-family:inherit}
.svg-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
a{color:var(--azul-600)}

/* ---------- shell ---------- */
#app{min-height:100vh;display:flex;flex-direction:column}
.shell{display:flex;min-height:100vh}
.lateral{width:258px;background:#102b3e;color:#d3e1e8;display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;z-index:40;transition:transform .25s ease}
.lateral .marca{padding:23px 20px 17px;border-bottom:1px solid rgba(255,255,255,.1)}
.marca-fila{display:flex;align-items:center;gap:9px}.atv-logo{width:26px;height:26px;object-fit:contain}
.marca .logo{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.3px}
.marca .logo span{color:#69d5a7}.marca small{display:block;color:#91b6c5;font-size:11px;margin-top:4px}
.lateral nav{flex:1;overflow-y:auto;padding:13px 0}
.lateral .grupo{font-size:10px;text-transform:uppercase;letter-spacing:1.25px;color:#8ca9b7;padding:17px 20px 7px}
.lateral a.item{display:flex;align-items:center;gap:10px;margin:1px 10px;padding:9px 10px;color:#d3e1e8;text-decoration:none;font-size:13px;border-radius:7px;border-left:0}
.lateral a.item:hover{background:rgba(255,255,255,.07)}
.lateral a.item.activo{background:rgba(105,213,167,.16);color:#fff;font-weight:700}
.lateral a.item .nav-ic{width:17px;height:17px;flex:0 0 17px}
.lateral .pie{padding:12px 18px;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:#7fa6c8}
.contenido{flex:1;margin-left:258px;display:flex;flex-direction:column;min-width:0}

.cabecera{background:rgba(255,255,255,.94);border-bottom:1px solid var(--borde);padding:0 28px;height:64px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:30}
.cabecera .titulo{font-size:16.5px;font-weight:700}
.cabecera .relleno{flex:1}
.btn-dt{background:#fff;border:1.5px solid var(--azul-800);color:var(--azul-800);font-weight:700;
  padding:7px 14px;border-radius:999px;font-size:12.5px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn-dt:hover{background:var(--azul-50)}
.usuario-chip{display:flex;align-items:center;gap:9px;cursor:pointer;padding:5px 10px;border-radius:10px}
.usuario-chip:hover{background:var(--azul-50)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--azul-100);color:var(--azul-800);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.usuario-chip .datos{line-height:1.15;font-size:12.5px}
.usuario-chip .datos b{display:block;font-size:13px}
.usuario-chip .datos span{color:var(--tinta-3)}

main.panel{padding:31px 30px;max-width:1320px;width:100%;margin:0 auto}
.pie-app{padding:14px 22px;color:var(--tinta-3);font-size:11.5px;text-align:center}

/* hamburguesa + móvil */
.btn-menu{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--tinta)}
.nav-movil{display:none}
@media (max-width:920px){
  .lateral{transform:translateX(-100%)}
  .lateral.abierta{transform:translateX(0);box-shadow:0 0 0 100vmax rgba(10,31,51,.45)}
  .contenido{margin-left:0}
  .btn-menu{display:block}
  main.panel{padding:14px;padding-bottom:84px}
  .cabecera{padding:0 14px}
  .cabecera .titulo{font-size:14.5px}
  .usuario-chip .datos{display:none}
  .nav-movil{display:flex;position:fixed;bottom:0;left:0;right:0;background:var(--blanco);
    border-top:1px solid var(--borde);z-index:35;padding:4px 2px calc(4px + env(safe-area-inset-bottom))}
  .nav-movil a{flex:1;text-align:center;text-decoration:none;color:var(--tinta-3);font-size:10.5px;
    padding:6px 2px;border-radius:10px}
  .nav-movil a .ic{display:block;line-height:1.2;height:22px}.nav-movil a .ic svg{width:20px;height:20px}
  .nav-movil a.activo{color:var(--azul-800);font-weight:700;background:var(--azul-50)}
}

/* ---------- componentes ---------- */
.tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);box-shadow:var(--sombra);padding:21px;margin-bottom:18px;transition:transform .22s ease,box-shadow .22s ease}
.tarjeta:hover{box-shadow:0 5px 14px rgba(15,43,70,.07),0 20px 35px -25px rgba(15,43,70,.25)}
.tarjeta h2{font-size:16px;margin-bottom:4px}
.tarjeta h3{font-size:14px;margin:14px 0 8px}
.btn-marca .ic .svg-icon{width:24px;height:24px;stroke-width:2.2}
.btn-marca .icono-invertido{display:inline-flex;transform:rotate(180deg)}
.tarjeta .sub{color:var(--tinta-3);font-size:12.5px;margin-bottom:14px}

.rejilla{display:grid;gap:14px}
.rejilla.c2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.rejilla.c3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rejilla.c4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}

.kpi{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--radio);padding:18px;box-shadow:none}
.kpi .valor{font-size:30px;font-weight:800;color:var(--azul-800);line-height:1.1;letter-spacing:-.04em}
.kpi .nombre{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-3);margin-top:6px;font-weight:700}
.kpi.verde .valor{color:var(--acento-osc)}
.kpi.ambar .valor{color:var(--ambar)}
.kpi.rojo .valor{color:var(--rojo)}

.btn{display:inline-flex;align-items:center;gap:7px;background:var(--azul-800);color:#fff;border:none;
  padding:9px 16px;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .16s ease,background .16s ease,box-shadow .16s ease}
.btn:hover{background:var(--azul-700);transform:translateY(-1px);box-shadow:0 7px 14px -9px rgba(10,31,51,.65)}
.btn.sec{background:var(--blanco);color:var(--azul-800);border:1.5px solid var(--borde)}
.btn.sec:hover{border-color:var(--azul-600);background:var(--azul-50)}
.btn.verde{background:var(--acento)} .btn.verde:hover{background:var(--acento-osc)}
.btn.rojo{background:var(--rojo)}
.btn.mini{padding:5px 10px;font-size:12px;border-radius:8px}
.btn:disabled{opacity:.5;cursor:not-allowed}

.insignia{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.insignia.verde{background:#d9f2e5;color:#0b6b4b}
.insignia.ambar{background:#fdeeda;color:#92510a}
.insignia.rojo{background:#fde3df;color:#a02c20}
.insignia.azul{background:var(--azul-100);color:var(--azul-700)}
.insignia.gris{background:#e8edf3;color:#55677c}
.insignia.morado{background:#e9e2f7;color:#5b3d99}

.campo{margin-bottom:13px}
.campo label{display:block;font-size:12.5px;font-weight:600;color:var(--tinta-2);margin-bottom:5px}
.campo input,.campo select,.campo textarea{width:100%;padding:9px 12px;border:1.5px solid var(--borde);
  border-radius:10px;font-size:14px;font-family:inherit;background:#fff;color:var(--tinta)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul-600);
  box-shadow:0 0 0 3px rgba(30,74,115,.12)}
.campo .ayuda{font-size:11.5px;color:var(--tinta-3);margin-top:4px}
.fila-campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 14px}
.check{display:flex;align-items:flex-start;gap:9px;font-size:13px;margin-bottom:10px;cursor:pointer}
.check input{width:17px;height:17px;margin-top:2px;accent-color:var(--azul-700)}

.tabla-contenedor{overflow-x:auto;border:1px solid var(--borde);border-radius:var(--radio-s)}
table.tabla{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.tabla th{background:var(--azul-800);color:#fff;text-align:left;padding:9px 12px;font-size:12px;
  white-space:nowrap;position:sticky;top:0}
.tabla td{padding:8px 12px;border-top:1px solid var(--borde);vertical-align:top}
.tabla tr:hover td{background:var(--azul-50)}
.tabla tr.total td{background:var(--azul-100);font-weight:700}
.tabla tr.leyenda td{background:#fdf6e3;font-style:italic}
.tabla .num{text-align:right;font-variant-numeric:tabular-nums}

.modal-fondo{position:fixed;inset:0;background:rgba(10,31,51,.55);z-index:60;display:flex;
  align-items:center;justify-content:center;padding:16px;animation:fondo .18s ease-out}
.modal{background:#fff;border-radius:16px;max-width:640px;width:100%;max-height:92vh;overflow-y:auto;
  padding:24px;box-shadow:0 24px 64px rgba(0,0,0,.28);animation:modalEntra .22s cubic-bezier(.2,.85,.35,1.1)}
.modal h2{font-size:17px;margin-bottom:14px}
.modal .acciones{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

#avisos{position:fixed;top:16px;right:16px;z-index:100;display:flex;flex-direction:column;gap:9px;max-width:380px}
.aviso{background:var(--azul-900);color:#fff;padding:12px 16px;border-radius:12px;font-size:13.5px;
  box-shadow:var(--sombra);animation:aparecer .18s ease-out}
.aviso.exito{background:var(--acento-osc)} .aviso.error{background:var(--rojo)}
@keyframes aparecer{from{opacity:0;transform:translateY(-6px)}to{opacity:1}}
@keyframes fondo{from{opacity:0}to{opacity:1}} @keyframes modalEntra{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
#vista>*{animation:vistaEntra .26s ease-out both}@keyframes vistaEntra{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.vacio{text-align:center;color:var(--tinta-3);padding:34px 10px;font-size:13.5px}
.migas{font-size:12px;color:var(--tinta-3);margin-bottom:12px}
.acciones-fila{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.simbolo{font-weight:900;color:var(--ambar)}
hr.sep{border:none;border-top:1px solid var(--borde);margin:16px 0}

/* ---------- login ---------- */
.login-fondo{min-height:100vh;display:flex;flex-direction:column;background:
  radial-gradient(circle at 85% 15%,rgba(95,211,165,.18),transparent 28%),linear-gradient(160deg,var(--azul-900) 0%,var(--azul-800) 55%,#123a5e 100%);background-size:130% 130%;animation:gradiente 12s ease-in-out infinite alternate}
@keyframes gradiente{to{background-position:100% 100%}}
.login-barra{display:flex;justify-content:space-between;align-items:center;padding:18px 26px}
.login-barra .logo{color:#fff;font-weight:800;font-size:19px;text-decoration:none}
.marca-login{display:flex;align-items:center;gap:8px}.marca-login img{width:30px;height:30px;object-fit:contain}
.login-barra .logo span{color:#5fd3a5}
.login-centro{flex:1;display:flex;align-items:center;justify-content:center;padding:22px}
.login-caja{background:#fff;border-radius:20px;padding:34px 32px;width:100%;max-width:410px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);animation:modalEntra .38s cubic-bezier(.2,.85,.35,1.1)}
.login-caja h1{font-size:20px;margin-bottom:4px}
.login-caja .sub{color:var(--tinta-3);font-size:13px;margin-bottom:20px}
.login-pie{color:#7fa6c8;text-align:center;padding:16px;font-size:11.5px}

/* ---------- marcaje ---------- */
.marcar-reloj{text-align:center;padding:8px 0 2px}
.marcar-reloj .hora{font-size:52px;font-weight:800;color:var(--azul-800);font-variant-numeric:tabular-nums;line-height:1.05}
.marcar-reloj .fecha{color:var(--tinta-2);font-size:14px;text-transform:capitalize}
.botones-marca{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.btn-marca{border:none;border-radius:16px;padding:22px 10px;font-size:15.5px;font-weight:800;cursor:pointer;
  color:#fff;display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform .08s}
.btn-marca:active{transform:scale(.97)}
.btn-marca .ic{font-size:26px}
.btn-marca small{font-weight:500;font-size:11px;opacity:.85}
.btn-marca.entrada{background:linear-gradient(135deg,#0e9f6e,#0b7d57)}
.btn-marca.salida{background:linear-gradient(135deg,#c0392b,#96281c)}
.btn-marca.colacion{background:linear-gradient(135deg,#b45309,#92510a)}
.btn-marca.colacion2{background:linear-gradient(135deg,#1e4a73,#16324b)}
.geo-linea{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--tinta-2);
  font-size:12.5px;margin-top:14px;flex-wrap:wrap}
.punto{width:9px;height:9px;border-radius:50%;display:inline-block}
.punto.ok{background:var(--acento)} .punto.mal{background:var(--rojo)} .punto.esperando{background:var(--ambar)}

.comprobante-caja{border:1.5px dashed var(--acento);background:#f2fbf7;border-radius:14px;padding:16px;margin-top:16px}
.comprobante-caja h3{margin:0 0 8px;color:var(--acento-osc);font-size:14px}
.comprobante-caja table{width:100%;font-size:12.5px;border-collapse:collapse}
.comprobante-caja td{padding:3px 6px;vertical-align:top}
.comprobante-caja td:first-child{font-weight:700;color:var(--tinta-2);width:42%}
.hash-mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:10.5px;word-break:break-all;color:var(--tinta-2)}

/* cumplimiento */
.cumpl-item{border:1px solid var(--borde);border-radius:var(--radio-s);padding:12px 14px;margin-bottom:9px;
  display:grid;grid-template-columns:74px 1fr auto;gap:12px;align-items:start;background:#fff}
.cumpl-item .codigo{font-weight:800;color:var(--azul-700);font-size:12.5px}
.cumpl-item .titulo{font-weight:700;font-size:13.5px}
.cumpl-item .detalle{font-size:12.5px;color:var(--tinta-2);margin-top:3px}
@media(max-width:700px){.cumpl-item{grid-template-columns:1fr;gap:6px}}

.progreso{height:10px;background:var(--azul-50);border-radius:999px;overflow:hidden;display:flex}
.progreso div{height:100%}

/* ---------- jerarquía de producto ---------- */
.operacion-intro{display:grid;grid-template-columns:1fr 252px;gap:24px;align-items:end;margin:2px 0 27px}
.operacion-saludo{font-size:11px;text-transform:uppercase;letter-spacing:.105em;color:var(--acento-osc);font-weight:800;margin-bottom:7px}
.operacion-intro h1,.marcaje-contexto h1{font-size:clamp(25px,3vw,36px);letter-spacing:-.045em;line-height:1.03;color:var(--azul-900)}
.operacion-intro h1 em{font-style:normal;color:var(--acento-osc);font-weight:650}
.operacion-atencion{background:#e8f4ee;border-left:3px solid var(--acento);padding:15px 16px;min-height:112px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:start}
.operacion-atencion span{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#3c6354}
.operacion-atencion b{font-size:28px;line-height:.9;color:var(--acento-osc);letter-spacing:-.05em}
.operacion-atencion small{grid-column:1/-1;color:#456255;font-size:11.5px;line-height:1.35}
.operacion-atencion a{grid-column:1/-1;display:flex;align-items:center;gap:6px;color:var(--acento-osc);font-weight:800;font-size:11.5px;margin-top:3px}.operacion-atencion a svg{width:14px;height:14px}
.section-label{font-size:10.5px;font-weight:800;letter-spacing:.105em;text-transform:uppercase;color:var(--tinta-3);margin:0 0 8px}
.panel-kpis{gap:11px}.panel-kpis .kpi{border-top:3px solid transparent}.panel-kpis .kpi.verde{border-top-color:var(--acento)}.panel-kpis .kpi.ambar{border-top-color:#d58a24}.panel-kpis .kpi.rojo{border-top-color:#d45545}
.marcaje-contexto{max-width:520px;margin:4px auto 14px;text-align:center}.marcaje-contexto p{font-size:10.5px;color:var(--acento-osc);text-transform:uppercase;letter-spacing:.1em;font-weight:800}.marcaje-contexto h1{font-size:30px;margin:5px 0}.marcaje-contexto span{font-size:12px;color:var(--tinta-2)}.tarjeta-marcaje{border-top:3px solid var(--acento)}

/* Tablas, formularios y estados de alta frecuencia. */
.tabla th{background:#183b55;padding:10px 12px;font-size:11px;letter-spacing:.025em}.tabla td{padding:10px 12px}.tabla tr:hover td{background:#f2f8f6}.campo input,.campo select,.campo textarea{border-radius:8px;padding:10px 12px}.btn{border-radius:8px}.insignia{font-size:10.5px;letter-spacing:.01em}.pie-app span{color:var(--acento);padding:0 4px}.migas{font-size:11.5px}

@media print{
  .lateral,.cabecera,.nav-movil,.acciones-fila,.pie-app,#avisos{display:none!important}
  .contenido{margin-left:0}
  main.panel{padding:0;max-width:none}
  .tarjeta{box-shadow:none;border:none;padding:0}
  body{background:#fff;font-size:10pt;font-family:Arial,Helvetica,sans-serif}
  .tabla th{background:#eee!important;color:#000!important;position:static}
  .tabla-contenedor{overflow:visible;border:none}
}
@media(max-width:700px){.operacion-intro{grid-template-columns:1fr;gap:16px;margin-bottom:22px}.operacion-atencion{max-width:none}.operacion-intro h1{font-size:29px}.cabecera{height:60px}.btn-dt{display:none}.tarjeta{padding:16px}.kpi{padding:15px}.marcaje-contexto h1{font-size:27px}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* El panel se comporta como una bandeja de jornada: primero pulso y actividad, luego detalle. */
.marca-fila .atv-logo{width:30px;height:30px;padding:4px;border-radius:7px;background:#fff}.marca .logo{display:flex;align-items:center;gap:7px}.marca .logo b{font-size:18px;font-weight:400;color:#8fb2c1}.marca-login b{font-size:20px;font-weight:400;color:#8fb2c1}.marca-login img{padding:4px;border-radius:7px;background:#fff}
.pulso-operacion{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 24px;border:1px solid var(--borde);background:var(--blanco);box-shadow:var(--sombra)}.pulso-operacion>div{padding:17px 20px;border-right:1px solid var(--borde)}.pulso-operacion>div:last-child{border-right:0}.pulso-operacion span{display:block;color:var(--tinta-3);font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:800}.pulso-operacion b{display:block;font-size:30px;line-height:1;margin:7px 0 5px;letter-spacing:-.05em;color:var(--azul-800)}.pulso-operacion small{font-size:11.5px;color:var(--tinta-2)}
.actividad-hoy{background:var(--blanco);border:1px solid var(--borde);box-shadow:var(--sombra);margin:0 0 14px}.actividad-head{display:flex;align-items:end;justify-content:space-between;gap:20px;padding:19px 20px 14px}.actividad-head .section-label{margin-bottom:4px}.actividad-head h2{font-size:18px;letter-spacing:-.025em}.actividad-head a{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:var(--acento-osc);white-space:nowrap}.actividad-head a svg{width:15px;height:15px}.flujo-actividad{padding:0 20px}.evento{display:grid;grid-template-columns:58px 1fr;gap:13px;padding:14px 0;border-top:1px solid #e8eeec;position:relative}.evento:before{content:"";position:absolute;left:69px;top:0;bottom:-1px;width:1px;background:#e1ece7}.evento:last-child:before{display:none}.evento time{font-size:11px;color:var(--tinta-3);font-variant-numeric:tabular-nums;padding-top:2px}.evento div{position:relative;padding-left:14px}.evento div:before{content:"";position:absolute;left:-4px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--acento);box-shadow:0 0 0 4px #e7f6ef}.evento.salida div:before{background:#7991a1;box-shadow:0 0 0 4px #edf1f3}.evento.colacion_inicio div:before{background:#d58a24;box-shadow:0 0 0 4px #fff3e2}.evento b{font-size:13px}.evento p{display:inline;margin:0 0 0 4px;color:var(--tinta-2);font-size:12.5px}.evento small{display:block;margin-top:2px;color:var(--tinta-3);font-size:11px}.resumen-desplegable{background:#edf5f1;border:1px solid #d6e7de;margin-bottom:19px}.resumen-desplegable summary{padding:12px 15px;cursor:pointer;color:#31584a;font-size:12.5px;font-weight:750}.resumen-desplegable>div{padding:0 13px 13px}.detalle-jornada{margin-top:4px}
@media(max-width:700px){.pulso-operacion{grid-template-columns:1fr}.pulso-operacion>div{border-right:0;border-bottom:1px solid var(--borde)}.pulso-operacion>div:last-child{border-bottom:0}.actividad-head{padding:16px}.flujo-actividad{padding:0 16px}.evento{grid-template-columns:52px 1fr}.evento:before{left:62px}}