/* People by Holvex — misma familia visual que Radar: lateral oscuro, verde Holvex, ámbar para lo pendiente. */
:root {
  --fondo: #f3f6f4; --superficie: #fff; --hundido: #e8eeeb; --tinta: #14211c; --tenue: #5a6b64; --linea: #d6dfdb;
  --verde: #0f6b4f; --verde-suave: #dcefe6; --oscuro: #11201a; --oscuro-2: #1b2f27;
  --ok: #1d7a4c; --ok-suave: #ddf1e5; --ojo: #965600; --ojo-suave: #fbebd2; --mal: #b42318; --mal-suave: #fbe1de;
  --radio: 12px; --sombra: 0 1px 2px rgba(16, 32, 26, .06);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--fondo); color: var(--tinta); font-size: 15px; line-height: 1.5; }
a { color: var(--verde); }
h1 { font-size: 1.5rem; margin: 0; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.tenue { color: var(--tenue); } .chico { font-size: .85rem; } .mono { font-family: Consolas, "SF Mono", Menlo, monospace; font-variant-numeric: tabular-nums; }
.grande { font-size: 1.3rem; } .bloque { display: block; } .txt-ojo { color: var(--ojo); } .txt-mal { color: var(--mal); }
.saltar { position: absolute; left: -999px; } .saltar:focus { left: 8px; top: 8px; background: #fff; padding: 6px 10px; z-index: 9; }

/* ---------- estructura del panel */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.lateral { background: var(--oscuro); color: #dfe9e4; display: flex; flex-direction: column; padding: 18px 12px; position: sticky; top: 0; height: 100vh; }
.marca { display: flex; gap: 10px; align-items: center; color: #fff; text-decoration: none; padding: 0 8px 6px; }
.marca-texto { font-weight: 700; font-size: 1.25rem; line-height: 1; }
.marca-texto small { display: block; font-weight: 400; font-size: .72rem; color: #9fb5ab; margin-top: 3px; }
.lateral-empresa { font-size: .78rem; color: #9fb5ab; padding: 0 8px; margin: 8px 0 14px; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.lateral nav a { color: #dfe9e4; text-decoration: none; padding: 9px 12px; border-radius: 8px; }
.lateral nav a:hover { background: var(--oscuro-2); }
.lateral nav a.activo { background: var(--verde); color: #fff; font-weight: 600; }
.sesion { display: flex; align-items: center; gap: 8px; border-top: 1px solid #2a4037; padding: 12px 6px 0; font-size: .85rem; }
.sesion-datos { flex: 1; min-width: 0; } .sesion-datos a { color: #fff; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sesion-datos small { color: #9fb5ab; } .salir { color: #9fb5ab; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--verde); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.avatar.grande { width: 56px; height: 56px; font-size: 1.4rem; }
.columna { min-width: 0; display: flex; flex-direction: column; }
main { padding: 24px 28px 40px; max-width: 1180px; width: 100%; }
.pie { color: var(--tenue); font-size: .78rem; padding: 0 28px 24px; }
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; height: auto; }
  .lateral nav { flex-direction: row; flex-wrap: wrap; }
  main { padding: 18px 16px 32px; }
}

/* ---------- app del trabajador */
body.trabajador { padding-bottom: 84px; }
.barra-sup { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 12px 16px; background: var(--superficie); border-bottom: 1px solid var(--linea); font-size: .85rem; }
.marca-chica { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: 1rem; }
main.angosto { max-width: 640px; margin: 0 auto; padding: 16px; }
.barra-inf { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--superficie); border-top: 1px solid var(--linea); padding-bottom: env(safe-area-inset-bottom, 0); z-index: 5; }
.barra-inf a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 0 8px; color: var(--tenue); text-decoration: none; font-size: .78rem; }
.barra-inf .ic { font-size: 1.25rem; line-height: 1; }
.barra-inf a.activo { color: var(--verde); font-weight: 700; }

/* ---------- ingreso */
main.acceso { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto; max-width: 100%; }
.acceso-caja { width: min(400px, 100%); } .acceso-caja.ancha { width: min(520px, 100%); }
.acceso-marca { text-align: center; margin-bottom: 18px; }
.acceso-nombre { font-size: 1.6rem; font-weight: 700; margin: 6px 0 0; } .acceso-nombre small { font-weight: 400; color: var(--tenue); font-size: .9rem; }
.acceso-lema { color: var(--tenue); margin: 4px 0 0; }

/* ---------- componentes */
.cabecera { margin-bottom: 18px; } .cabecera p { margin: 4px 0 0; }
.fila-entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tarjeta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px 20px; margin-bottom: 16px; box-shadow: var(--sombra); }
.tarjeta.vacio { text-align: center; padding: 32px; }
.form-angosto { max-width: 440px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; color: var(--tenue); margin-bottom: 12px; }
input, select, textarea { background: var(--superficie); border: 1px solid var(--linea); border-radius: 8px; padding: 9px 11px; color: var(--tinta); max-width: 100%; }
input[readonly] { background: var(--hundido); }
textarea { min-height: 70px; resize: vertical; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 0 14px; align-items: end; }
.rejilla .doble { grid-column: span 2; } @media (max-width: 560px) { .rejilla .doble { grid-column: auto; } }
.corto { max-width: 220px; } .crece { flex: 1; min-width: 220px; }
.ayuda { color: var(--tenue); font-size: .78rem; }
.nota { font-size: .85rem; color: var(--tenue); }
.boton, button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--linea); background: var(--superficie); border-radius: 8px; padding: 9px 15px; cursor: pointer; font-weight: 600; text-decoration: none; color: var(--tinta); }
.boton:hover, button:hover { border-color: var(--tenue); }
.primario, .boton.primario { background: var(--verde); border-color: var(--verde); color: #fff; }
.peligro { color: var(--mal); border-color: var(--mal-suave); }
.chico.boton, .boton.chico { padding: 5px 10px; font-size: .85rem; }
.ancho { width: 100%; margin-top: 6px; }
button:disabled { opacity: .5; cursor: wait; }
.aviso { border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; background: var(--ok-suave); color: var(--ok); border-left: 4px solid var(--ok); }
.aviso.error { background: var(--mal-suave); color: var(--mal); border-left-color: var(--mal); }
.aviso.ojo { background: var(--ojo-suave); color: var(--ojo); border-left-color: var(--ojo); }
.clave-una-vez { border: 2px dashed var(--ojo); background: var(--ojo-suave); border-radius: var(--radio); padding: 14px 18px; margin-bottom: 16px; }
.clave-una-vez p { margin: 6px 0 0; }
.pildora { display: inline-block; font-size: .78rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; background: var(--hundido); color: var(--tenue); white-space: nowrap; }
.pildora.e-completo { background: var(--ok-suave); color: var(--ok); }
.pildora.e-en_jornada, .pildora.e-en_refrigerio { background: var(--verde-suave); color: var(--verde); }
.pildora.e-pendiente { background: var(--ojo-suave); color: var(--ojo); }
.pildora.e-falta, .pildora.e-sin_salida, .pildora.e-incompleto { background: var(--mal-suave); color: var(--mal); }
.chip { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; border: 1px solid var(--linea); border-radius: 4px; padding: 0 5px; color: var(--tenue); }

/* marcar */
.hero { background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; padding: 18px 20px; margin-bottom: 16px; }
.hero p { margin: 4px 0; }
.reloj { font-family: Consolas, "SF Mono", Menlo, monospace; font-size: clamp(2.6rem, 11vw, 3.8rem); font-weight: 500; line-height: 1.05; margin: 6px 0 !important; font-variant-numeric: tabular-nums; }
.reloj-chico { font-size: 1.5rem; }
.check { flex-direction: row; gap: 10px; align-items: flex-start; background: var(--hundido); border-radius: 10px; padding: 12px; color: var(--tinta); cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--verde); flex: none; }
.botones-marca { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.boton-marca { flex: 1 1 180px; background: var(--verde); color: #fff; border: 0; border-radius: 12px; padding: 18px; font-size: 1.1rem; }
.boton-marca.alterno { background: var(--verde-suave); color: var(--verde); }
.constancia { border: 1px dashed var(--verde); background: var(--verde-suave); border-radius: var(--radio); padding: 14px 16px; margin-bottom: 16px; }
.constancia p { margin: 4px 0 0; } .constancia.grande { font-size: 1.3rem; text-align: center; }
.linea-tiempo { list-style: none; padding: 0; margin: 0 0 12px; }
.linea-tiempo li { padding: 7px 0; border-bottom: 1px dashed var(--linea); } .linea-tiempo .mono { display: inline-block; width: 4em; font-weight: 600; }
.mini-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; }
.mini-kpis div { background: var(--hundido); border-radius: 10px; padding: 10px; }
.mini-kpis b { display: block; font-size: 1.15rem; } .mini-kpis span { font-size: .78rem; color: var(--tenue); }
.tarjeta.mini-kpis div { background: var(--hundido); }

/* calendario */
.cal-cab, .cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-cab span { text-align: center; font-size: .75rem; color: var(--tenue); font-weight: 600; }
.cal-cab { margin-bottom: 6px; }
.dia { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--hundido); color: var(--tinta); text-decoration: none; font-variant-numeric: tabular-nums; }
.dia.e-completo, .leyenda .e-completo::before { background: var(--ok-suave); color: var(--ok); }
.dia.tarde, .leyenda .tarde::before { background: var(--ojo-suave); color: var(--ojo); }
.dia.e-falta, .dia.e-sin_salida, .dia.e-incompleto, .leyenda .e-falta::before { background: var(--mal-suave); color: var(--mal); }
.leyenda .e-sin_salida::before { background: var(--mal-suave); }
.dia.e-descanso, .leyenda .e-descanso::before { background: transparent; color: var(--tenue); border: 1px solid var(--linea); }
.dia.e-antes { background: transparent; color: var(--linea); }
.dia.e-futuro { background: transparent; color: var(--linea); }
.leyenda { display: flex; flex-wrap: wrap; gap: 12px; font-size: .78rem; color: var(--tenue); margin: 12px 0 0; }
.leyenda span::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--hundido); }
.lista-dias { list-style: none; margin: 0; padding: 0; } .lista-dias li { padding: 9px 0; border-bottom: 1px solid var(--linea); }
.perfil { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.datos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; margin: 0; }
.datos dt { font-size: .75rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; } .datos dd { margin: 0; }

/* panel */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px 16px; }
.kpi b { display: block; font-size: 2rem; line-height: 1.1; font-variant-numeric: tabular-nums; } .kpi span { font-size: .82rem; color: var(--tenue); }
.kpi.ojo { border-color: var(--ojo); } .kpi.ojo b { color: var(--ojo); }
.dos-col { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .dos-col { grid-template-columns: minmax(0, 1fr); } }
.alertas { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow: auto; }
.alertas li { border-left: 4px solid var(--ojo); background: var(--hundido); border-radius: 6px; padding: 8px 12px; font-size: .9rem; }
.alertas li.mal { border-left-color: var(--mal); } .alertas small { display: block; color: var(--tenue); }
.barra { height: 10px; background: var(--hundido); border-radius: 6px; overflow: hidden; min-width: 90px; }
.relleno { display: block; height: 100%; width: 0; background: var(--verde); } .relleno.exceso { background: var(--mal); }

/* tablas */
.tabla-caja { overflow-x: auto; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); margin-bottom: 16px; }
table { border-collapse: collapse; width: 100%; }
.tabla-caja table { min-width: 680px; }
th { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tenue); text-align: left; font-weight: 600; padding: 10px 12px; background: var(--hundido); border-bottom: 1px solid var(--linea); }
td { padding: 10px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; }
.quien a { font-weight: 600; text-decoration: none; color: var(--tinta); display: block; } .quien span { font-size: .8rem; color: var(--tenue); }
tr.inactivo td { color: var(--tenue); }
tr.anulada td { text-decoration: line-through; color: var(--tenue); }
tr.anulada td .mantener, tr.anulada td details { text-decoration: none; display: inline-block; }
tr.es-anulacion td { background: var(--mal-suave); }
.huella { font-family: Consolas, monospace; font-size: .72rem; color: var(--tenue); display: block; }
.corta { max-width: 260px; overflow-wrap: anywhere; }
.filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filtros label { margin: 0; }
details.corregir summary { cursor: pointer; color: var(--verde); font-weight: 600; font-size: .85rem; }
details.corregir form { margin-top: 8px; min-width: 220px; }
details.tarjeta summary { cursor: pointer; } details.tarjeta[open] summary { margin-bottom: 12px; }
.horario { margin-bottom: 12px; } .horario td, .horario th { padding: 6px 8px; } .horario input[type=number] { width: 6rem; }
.historial { list-style: none; padding: 0; margin: 0; } .historial li { padding: 6px 0; border-bottom: 1px dashed var(--linea); font-size: .9rem; overflow-wrap: anywhere; }

/* kiosko */
.kiosko { width: min(460px, 100%); text-align: center; }
.kiosko .tarjeta { text-align: left; }
.dni { font-family: Consolas, monospace; font-size: 1.8rem; letter-spacing: .25em; text-align: center; }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.teclado button { font-size: 1.4rem; padding: 14px 0; }

/* ---------- Lote 1: menú agrupado, reportes, solicitudes */
.nav-grupo { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #7f978d; margin: 12px 12px 4px; }
.nav-grupo:first-child { margin-top: 0; }
.lateral nav { overflow-y: auto; }
.insignia { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: #f2a93b; color: #2b1a00; font-size: .75rem; font-weight: 700; text-align: center; margin-left: 4px; }
.kpi.mal { border-color: var(--mal); } .kpi.mal b { color: var(--mal); }
.segmento { display: inline-flex; background: var(--hundido); border-radius: 10px; padding: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.segmento a { padding: 7px 14px; border-radius: 7px; text-decoration: none; color: var(--tenue); font-weight: 600; }
.segmento a.activo { background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); }
.marca-chip { display: inline-block; font-family: Consolas, monospace; background: var(--hundido); border-radius: 5px; padding: 1px 6px; margin: 0 4px 3px 0; }
.marca-chip.manual { background: var(--ojo-suave); color: var(--ojo); }
.pildora.e-feriado, .pildora.e-descanso { background: var(--hundido); color: var(--tenue); }
.pildora.e-vacaciones, .pildora.e-descanso_medico, .pildora.e-permiso, .pildora.e-campo, .pildora.e-licencia_goce,
.pildora.e-licencia_sin_goce, .pildora.e-compensacion, .pildora.e-comision, .pildora.e-otro { background: #e3ecfa; color: #2f5596; }
.pildora.s-pendiente { background: var(--ojo-suave); color: var(--ojo); } .pildora.s-aprobada { background: var(--ok-suave); color: var(--ok); }
.pildora.s-rechazada { background: var(--mal-suave); color: var(--mal); } .pildora.s-retirada { background: var(--hundido); color: var(--tenue); }
.dia.e-justificado, .leyenda .e-justificado::before { background: #e3ecfa; color: #2f5596; }
.dia.e-feriado, .leyenda .e-feriado::before { background: var(--hundido); color: var(--tenue); border: 1px dashed var(--tenue); }
.dia.e-antes { background: transparent; color: var(--linea); }
/* calendario */
.cal-tabla { min-width: 900px; font-size: .82rem; }
.cal-tabla th.c, .cal-tabla td.c { text-align: center; padding: 6px 2px; width: 28px; }
.cal-tabla th.c span { display: block; font-size: .62rem; }
.cal-tabla th.finde { background: #dfe6e3; }
.cal-tabla .fijo { position: sticky; left: 0; background: var(--superficie); z-index: 1; min-width: 210px; }
.cal-tabla th.fijo { background: var(--hundido); }
.k-A { background: var(--ok-suave); color: var(--ok); font-weight: 700; }
.k-T { background: var(--ojo-suave); color: var(--ojo); font-weight: 700; }
.k-F, .k-I { background: var(--mal-suave); color: var(--mal); font-weight: 700; }
.k-V, .k-DM, .k-P, .k-C, .k-L, .k-LS, .k-CO, .k-CS, .k-J { background: #e3ecfa; color: #2f5596; font-weight: 700; }
.k-FE { background: var(--hundido); color: var(--tenue); }
.k-D { color: var(--tenue); }
.leyenda-codigos { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: .82rem; color: var(--tenue); }
.leyenda-codigos b { display: inline-block; min-width: 26px; text-align: center; border-radius: 4px; padding: 1px 4px; margin-right: 4px; }
/* incidencias */
.lista-incidencias { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-incidencias li { background: var(--superficie); border: 1px solid var(--linea); border-left: 4px solid var(--ojo); border-radius: 8px; padding: 10px 14px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.lista-incidencias li.mal { border-left-color: var(--mal); }
.lista-incidencias .acciones { display: flex; gap: 6px; flex-wrap: wrap; }
/* solicitudes */
.sol-titulo { font-size: 1.2rem; margin: 6px 0; color: var(--verde); }
.cita { background: var(--hundido); border-radius: 8px; padding: 10px 14px; margin: 8px 0; white-space: pre-wrap; }
.solicitud p { margin: 2px 0; }
.resolver { margin-top: 12px; border-top: 1px dashed var(--linea); padding-top: 12px; }
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
[hidden] { display: none !important; }
.tachado { text-decoration: line-through; color: var(--tenue); }
tr.pasado td { color: var(--tenue); }
.pasos { padding-left: 20px; } .pasos li { margin-bottom: 6px; }
.claves { width: 100%; margin: 10px 0; } .claves td, .claves th { background: transparent; }
/* hojas imprimibles */
body.formato { background: #e8eeeb; }
.hoja { background: #fff; max-width: 800px; margin: 20px auto; padding: 32px 40px; border-radius: 6px; box-shadow: var(--sombra); }
.hoja-cab { display: flex; justify-content: space-between; gap: 12px; border-bottom: 2px solid var(--verde); padding-bottom: 12px; margin-bottom: 18px; }
.hoja h1 { font-size: 1.3rem; margin-bottom: 14px; } .hoja h2 { margin-top: 18px; }
.hoja-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; margin: 0; }
.hoja-datos dt { font-size: .75rem; color: var(--tenue); text-transform: uppercase; } .hoja-datos dd { margin: 0; font-weight: 600; }
.firmas { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin: 70px 0 20px; text-align: center; font-size: .9rem; }
.firmas span { display: block; border-top: 1px solid var(--tinta); margin-bottom: 6px; }
.tarjetas-claves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.tarjeta-clave { border: 1px dashed #999; padding: 14px 16px; break-inside: avoid; font-size: .9rem; }
.tarjeta-clave p { margin: 4px 0; }
@media print {
  .no-imprimir, .lateral, .barra-inf, .pie, .aviso { display: none !important; }
  body.formato { background: #fff; } .hoja { box-shadow: none; margin: 0; padding: 0; max-width: none; }
  .app { display: block; }
}
@media (max-width: 560px) { .dos, .hoja-datos, .tarjetas-claves { grid-template-columns: 1fr; } .hoja { padding: 20px; } }

/* ================================================================ v0.2.1 · ajustes de diseño
   Contraste de campos (WCAG 1.4.11), alturas parejas, menú que entra en laptops, tablas largas y app del trabajador. */
:root { --borde-campo: #7d8f88; --info: #2f5596; --info-suave: #e3ecfa; accent-color: var(--verde); }

/* campos y botones: borde visible y misma altura para que las etiquetas se alineen */
input, select, textarea { border-color: var(--borde-campo); }
input:not([type=checkbox]):not([type=radio]), select { min-height: 44px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--verde); }
.boton, button { min-height: 44px; }
.chico.boton, .boton.chico { min-height: 36px; }
.boton.chico.activo { background: var(--verde-suave); border-color: var(--verde); color: var(--verde); }
button:disabled[data-bloqueado] { cursor: not-allowed; }
.boton:hover, button:hover { border-color: var(--borde-campo); }
.primario:hover, .boton.primario:hover { background: #0b5a42; border-color: #0b5a42; }
@media (max-width: 860px) { .chico.boton, .boton.chico { min-height: 44px; min-width: 44px; } }
@media (max-width: 560px) { input, select, textarea { font-size: 16px; } }

/* menú lateral: más compacto; la sesión siempre visible abajo */
.lateral { padding: 16px 12px 14px; }
.lateral-empresa { margin: 4px 0 8px; }
.lateral nav { min-height: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2f463c transparent; }
.lateral nav a { padding: 7px 12px; }
.nav-grupo { margin: 8px 12px 2px; }
.sesion { flex: none; background: var(--oscuro); margin-top: 6px; }
@media (max-height: 820px) and (min-width: 861px) {
  .marca-texto small, .lateral-empresa { display: none; }
  .lateral nav a { padding: 6px 12px; }
  .nav-grupo { margin-top: 6px; }
}
/* tablet y celular (panel de RR.HH.): cabecera compacta y menú en una sola tira deslizable */
@media (max-width: 860px) {
  .lateral { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 12px; padding: 10px 12px 8px; position: sticky; top: 0; z-index: 6; }
  .lateral-empresa, .nav-grupo { display: none; }
  .marca { padding: 0; }
  .sesion { grid-column: 2; grid-row: 1; border: 0; padding: 0; margin: 0; }
  .sesion-datos { display: none; }
  .lateral nav { grid-column: 1 / -1; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .lateral nav a { white-space: nowrap; padding: 8px 12px; }
  .pie { padding: 0 16px 20px; }
}

/* tablas: nombre fijo al desplazar en horizontal, cabecera fija en tablas largas */
/* solo cuando el nombre es la primera columna (en Asistencia diaria va después de la fecha) */
.tabla-caja td.quien:first-child, .tabla-caja table:has(td.quien:first-child) th:first-child { position: sticky; left: 0; background: var(--superficie); z-index: 1; }
.tabla-caja table:has(td.quien:first-child) th:first-child { background: var(--hundido); }
.tabla-caja td.quien { min-width: 200px; }
.quien a, .quien b { white-space: nowrap; }
td.num { white-space: nowrap; }
th { vertical-align: bottom; }
tbody tr:hover td { background: #f7faf8; }
tbody tr:hover td.quien { background: #f7faf8; }
tr.es-anulacion:hover td { background: var(--mal-suave); }
.tabla-caja.larga { max-height: calc(100vh - 220px); overflow: auto; }
.tabla-caja.larga thead th { position: sticky; top: 0; z-index: 2; }
.tabla-caja.larga table:has(td.quien:first-child) thead th:first-child { z-index: 3; }
@media (max-width: 860px) { .tabla-caja.larga { max-height: none; } }

/* calendario: ancho mínimo real y separación de los totales */
.tabla-caja .cal-tabla { min-width: 900px; }
.cal-tabla .tot { border-left: 2px solid var(--linea); }
.cal-tabla th.tot { border-left-color: var(--borde-campo); }

/* cabeceras con varias acciones */
.acciones-cab { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.enlace-tec { color: var(--tenue); }
.atajos { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; align-self: center; }
@media (max-width: 560px) { .atajos { margin-left: 0; } }

/* turnos: horario semanal */
.horario-caja { border: 0; box-shadow: none; }
.horario-caja .horario { min-width: 560px; }
.horario td { vertical-align: middle; }
.horario td:last-child, .horario th:last-child { text-align: center; }
.horario input[type=time] { width: 8.5rem; }
.horario tr:has(input[name^=libre_]:checked) input:not([type=checkbox]) { opacity: .4; pointer-events: none; }
.horario tr:has(input[name^=libre_]:checked) td:first-child { color: var(--tenue); }

/* panel: alertas más livianas y enlazadas */
.alertas { gap: 0; }
.alertas li { background: transparent; border-left-width: 3px; border-radius: 0; padding: 0; border-bottom: 1px solid var(--linea); }
.alertas li:last-child { border-bottom: 0; }
.alertas li a { display: block; padding: 8px 12px; color: var(--tinta); text-decoration: none; }
.alertas li a:hover { background: var(--hundido); }
.alertas small { margin-bottom: 1px; }
.mas { margin: 10px 0 0; font-size: .9rem; } .mas a { font-weight: 600; text-decoration: none; }

/* estados vacíos */
.tarjeta.vacio { padding: 24px; color: var(--tenue); }
.kpi.cero b { color: var(--tenue); }

/* avisos informativos (no son éxito ni error) */
.aviso.info { background: var(--info-suave); color: var(--info); border-left-color: var(--info); }

/* trabajadores: barra de asignación masiva */
.barra-asignar { align-items: flex-end; }
.barra-asignar-titulo { flex-basis: 100%; margin: 0 0 2px; }
.barra-asignar.lista { border-color: var(--verde); }

/* "Corregir" / "Anular": sin el triángulo nativo */
details.corregir summary { list-style: none; display: inline-flex; align-items: center; min-height: 36px; }
details.corregir summary::-webkit-details-marker { display: none; }
details.corregir summary::after { content: " ▾"; font-size: .75em; margin-left: 3px; }
details.corregir[open] summary::after { content: " ▴"; }

/* app del trabajador */
.mini-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mini-kpis:has(> div:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 480px) { .mini-kpis:has(> div:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dia.hoy { outline: 2px solid var(--verde); outline-offset: -2px; font-weight: 700; }
.dia.e-futuro, .dia.e-antes { color: #a3b2ac; }
@media (max-width: 400px) { .cal-cab, .cal { gap: 4px; } }
.dia-detalle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; }
.dd-cab { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.dd-horas { font-variant-numeric: tabular-nums; }
.dd-marcas { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 2px; align-items: center; }
.barra-inf a { min-height: 56px; justify-content: center; }
.barra-inf svg.ic { display: block; }
.barra-inf a.activo svg.ic { stroke-width: 2.4; }

/* kiosko en tablet */
.kiosko { width: min(560px, 100%); }
.teclado button { min-height: 64px; font-size: 1.6rem; }

@media print { .atajos, .acciones-cab { display: none !important; } }
/* v0.2.1: en pantallas angostas la cabecera no debe estirarse cuando la página es corta; 5 indicadores en una fila en tablet */
@media (max-width: 860px) { .app { grid-template-rows: auto 1fr; align-content: start; } }
.kpis { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.kpi b { font-size: 1.75rem; }

/* ================================================================ v0.3 · teletrabajo */
.ventana-trabajo h2 { margin: 0; }
.vt-cab { margin-bottom: 10px; }
.vt-curso { background: var(--verde-suave); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.vt-curso p { margin: 2px 0; }
.vt-cliente { font-size: 1.2rem; font-weight: 700; color: var(--verde); margin-top: 6px !important; line-height: 1.25; }
.vt-tarea { color: var(--tinta); }
.vt-reloj { font-size: 2.2rem; font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums; margin: 6px 0 0 !important; }
.vt-acciones label { margin-bottom: 8px; }
.dos-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.vt-inicio { display: grid; gap: 0; }
.vt-inicio .boton-marca { width: 100%; }
.vt-cambiar, .vt-manual { margin-top: 12px; border-top: 1px dashed var(--linea); padding-top: 10px; }
.vt-cambiar summary, .vt-manual summary { cursor: pointer; color: var(--verde); font-weight: 600; min-height: 36px; display: flex; align-items: center; }
.vt-pausa { display: block; }
.vt-pausa .mono { font-size: 1.6rem; color: var(--ojo); }
.vt-dia { margin-top: 14px; border-top: 1px solid var(--linea); padding-top: 10px; }
.vt-dia > p { margin: 0 0 6px; }
.vt-totales { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.vt-totales li { background: var(--hundido); border-radius: 999px; padding: 3px 10px; font-size: .82rem; display: flex; gap: 8px; }
.vt-bloques { list-style: none; padding: 0; margin: 0; }
.vt-bloques li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--linea); font-size: .88rem; align-items: start; }
.vt-bloques li:last-child { border-bottom: 0; }
.vt-bloques li.abierto { color: var(--verde); }
.vt-b-texto { overflow-wrap: anywhere; }
/* ventana flotante */
body.flotante { background: var(--fondo); }
body.flotante main { padding: 10px; }
body.flotante .barra-sup { padding: 8px 12px; }
body.flotante .tarjeta { padding: 14px; margin-bottom: 10px; }
body.flotante .vt-reloj { font-size: 1.9rem; }
.centro { text-align: center; }
/* marcar: elegir lugar */
.lugares-marca { margin-bottom: 10px; }
.lugares-marca legend { font-size: .88rem; color: var(--tenue); margin-bottom: 6px; }
.opcion { flex-direction: row; align-items: center; gap: 8px; color: var(--tinta); margin: 0 0 6px; cursor: pointer; }
.lugares-marca .opcion { background: var(--hundido); border-radius: 10px; padding: 10px 12px; min-height: 44px; }
.desconexion { border-left: 4px solid var(--info); }
/* mi teletrabajo */
.politica h3 { font-size: .95rem; margin: 14px 0 6px; }
.politica ul { margin: 0; padding-left: 20px; } .politica li { margin-bottom: 4px; }
.dos-listas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 8px 20px; }
.dos-listas ul { padding-left: 20px; margin: 0; }
.ok-t { color: var(--ok); } .mal-t { color: var(--mal); }
.lista-lugares { list-style: none; padding: 0; margin: 0 0 12px; }
.lista-lugares li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.tarjeta-interna { border: 1px solid var(--linea); border-radius: 10px; padding: 10px 14px; }
.tarjeta-interna summary { cursor: pointer; min-height: 36px; display: flex; align-items: center; }
.tarjeta-interna[open] summary { margin-bottom: 10px; }
.sst fieldset { margin: 14px 0 6px; }
.sst legend { font-weight: 700; margin-bottom: 4px; }
.pregunta { padding: 8px 0; border-bottom: 1px dashed var(--linea); }
.pregunta p { margin: 0 0 6px; }
.respuestas { display: flex; gap: 6px; flex-wrap: wrap; }
.respuestas .opcion { background: var(--hundido); border-radius: 8px; padding: 6px 12px; margin: 0; min-height: 40px; }
/* RR.HH. */
.barras-clientes { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.barras-clientes .fila-entre { margin-bottom: 4px; font-size: .9rem; }
.titulo-seccion { margin: 18px 0 10px; }
th.corto-th { max-width: 110px; }
td.ahora { min-width: 150px; }
.sst-revisar { border-bottom: 1px solid var(--linea); padding: 10px 0; }
.sst-revisar:last-child { border-bottom: 0; }
.sst-revisar ul { margin: 4px 0; padding-left: 18px; }
.compensacion { margin-top: 12px; border-top: 1px dashed var(--linea); padding-top: 12px; display: block; }

/* ================================================================ v0.4 · actividades y pausa automática */
.chip-ok { color: var(--ok); border-color: var(--ok); }
.txt-ok { color: var(--ok); }
.pestanas-horas { margin-bottom: 18px; }
.detector { background: var(--hundido); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.detector p { margin: 0; color: var(--tenue); flex: 1 1 200px; }
.detector.activo { background: var(--verde-suave); }
.detector.activo p { color: var(--verde); }
.pregunta-inactividad { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(420px, calc(100% - 32px));
  background: var(--superficie); border: 2px solid var(--ojo); border-radius: 16px; padding: 20px; z-index: 50;
  box-shadow: 0 20px 60px rgba(16, 32, 26, .35); text-align: center; }
.pregunta-inactividad p { margin: 0 0 10px; }
.pregunta-inactividad .boton-marca { width: 100%; }
.lista-actividades { list-style: none; padding: 0; margin: 0; }
.lista-actividades li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea); font-size: .9rem; }
.lista-actividades li:last-child { border-bottom: 0; }
.lista-actividades .num { text-align: right; white-space: nowrap; }

/* ================================================================ v0.5 · selector de empresa */
.sr-solo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.selector-empresa { padding: 0 8px; margin: 6px 0 10px; }
.selector-empresa .lateral-empresa { padding: 0; margin: 0 0 2px; }
.selector-empresa select { width: 100%; min-height: 38px; background: var(--oscuro-2); color: #fff; border: 1px solid #36504a;
  border-radius: 8px; padding: 6px 8px; font-size: .82rem; font-weight: 600; }
.selector-empresa select:focus-visible { outline-color: #9fd9bf; }
.agregar-empresa { display: inline-block; font-size: .74rem; color: #9fb5ab; text-decoration: none; margin-top: 4px; }
.agregar-empresa:hover { color: #fff; text-decoration: underline; }
@media (max-height: 820px) and (min-width: 861px) { .selector-empresa { margin: 4px 0 6px; } }
@media (max-width: 860px) {
  .selector-empresa { grid-column: 1 / -1; padding: 0; margin: 0; }
  .selector-empresa .lateral-empresa { display: block; color: #9fb5ab; }
  .agregar-empresa { display: none; }
}
/* v0.5.1: el nombre de la empresa siempre visible en el menú; ayuda del RUC */
.selector-empresa .lateral-empresa { display: block !important; }
.ruc-info { margin: -6px 0 10px; min-height: 1.2em; color: var(--tenue); }
/* v0.6 legajo */
.lista-docs { list-style: none; padding: 0; margin: 0 0 12px; }
.lista-docs li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.lista-docs a { text-decoration: none; }
.subir-doc { border-top: 1px dashed var(--linea); padding-top: 12px; margin-top: 4px; }