/* =============================================================================
   Nuevo Aire — estilos de la aplicación.
   Tema claro por defecto; oscuro si la persona lo elige (data-theme="oscuro").
   Colores del logo de Nuevo Aire (gris y rojo), con ajustes de contraste.
   ============================================================================= */

/* Colores del logo: gris #68716B y rojo #EE333B. El gris oscuro es el de los botones y
   encabezados; el rojo, el acento (selección sobre fondo oscuro, la acción principal del líder,
   foco). Los de estado (verde, ámbar, rojo de error) no cambian: nunca se usa el rojo de marca
   para decir "bien" ni el verde para la marca. */
:root {
  --bg: #F4F5F4;
  --surface: #FFFFFF;
  --surface-2: #ECEEED;
  --ink: #1A1D1C;
  --muted: #5A615D;
  --line: #D9DDDB;
  --brand: #2E3431;          /* relleno de botones y selección sobre fondo claro, texto blanco */
  --on-brand: #FFFFFF;
  --brand-ink: #A8232A;      /* rojo de marca legible como texto (vínculos) */
  --accent: #D42A32;         /* rojo de marca para rellenos, siempre con texto blanco */
  --on-accent: #FFFFFF;
  --deep: #1E2321;
  --on-deep: #F1F3F2;
  --red: #B42318;
  --red-bg: #FDECEB;
  --amber: #8A5200;
  --amber-bg: #FFF1D1;
  --ok: #1F7A3E;
  --ok-bg: #E2F4E7;
  --done: #1F7A3E;           /* tildado / ya cargado */
  --done-bg: #E2F4E7;
  --shadow: 0 1px 2px rgba(20, 24, 22, .06), 0 4px 14px rgba(20, 24, 22, .07);
  --radius: 12px;
  --f-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* paleta categórica de los gráficos (validada para daltonismo; orden fijo) */
  --s1: #2A78D6; --s2: #EB6834; --s3: #1BAF7A; --s4: #EDA100; --s5: #E87BA4; --s6: #008300; --s7: #4A3AA7; --s8: #E34948;
  --s-otros: #A3A29C; --g-grilla: #E1E0D9; --g-eje: #C3C2B7; --g-marca: #6F6D68;
  /* estados (reservados: nunca para una serie) y escala de calor de una sola tinta */
  --e-ok: #0CA30C; --e-aviso: #FAB219; --e-serio: #EC835A; --e-critico: #D03B3B;
  --k1: #CDE2FB; --k2: #9EC5F4; --k3: #6DA7EC; --k4: #3987E5; --k5: #256ABF; --k6: #184F95; --k7: #0D366B; --k0: #F4F6F6;
  color-scheme: light;
}
:root[data-theme="oscuro"] {
  --bg: #121514; --surface: #1A1E1C; --surface-2: #232826; --ink: #EDF0EE; --muted: #A3ABA6;
  --line: #303734; --brand: #E4E8E6; --on-brand: #121514; --brand-ink: #FF8A8F; --accent: #D93A41;
  --on-accent: #FFFFFF; --deep: #0B0D0C; --on-deep: #EDF0EE;
  --red: #FF7B80; --red-bg: #3B1C1F; --amber: #F2BA55; --amber-bg: #372B12;
  --ok: #7EDC9C; --ok-bg: #163324; --done: #7EDC9C; --done-bg: #163324; --shadow: 0 1px 2px rgba(0, 0, 0, .3);
  --s1: #3987E5; --s2: #D95926; --s3: #199E70; --s4: #C98500; --s5: #D55181; --s6: #008300; --s7: #9085E9; --s8: #E66767;
  --s-otros: #77766F; --g-grilla: #2E3431; --g-eje: #444B48; --g-marca: #A3ABA6;
  --k1: #0D366B; --k2: #104281; --k3: #184F95; --k4: #256ABF; --k5: #3987E5; --k6: #6DA7EC; --k7: #9EC5F4; --k0: #232826;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
a { color: var(--brand-ink); }
h1, h2, h3 { font-family: var(--f-display); margin: 0; line-height: 1.2; text-wrap: balance; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.chico { font-size: 13px; }

/* ---------- controles ---------- */
.btn {
  min-height: 40px; padding: 8px 16px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--surface); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; justify-content: center;
}
.btn:hover:not(:disabled) { border-color: var(--brand); }
.btn.prim { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.btn.peligro { color: var(--red); }
.btn.peligro-lleno { background: var(--red); border-color: var(--red); color: var(--surface); }
.btn.chico { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.btn.link { border: 0; background: none; color: var(--brand-ink); padding: 4px 6px; min-height: 0; }
.campo { display: grid; gap: 4px; }
.campo label { font-weight: 600; font-size: 14px; }
.campo .ayuda { font-size: 13px; color: var(--muted); }
input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="date"], input[type="month"], input[type="time"], input:not([type]), select, textarea {
  min-height: 40px; border-radius: 9px; border: 1.5px solid var(--line); background: var(--surface); padding: 6px 10px; width: 100%;
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus { border-color: var(--brand); outline: none; }
input:not([type="checkbox"]):not([type="radio"]):focus-visible, select:focus-visible, textarea:focus-visible { box-shadow: 0 0 0 3px var(--brand); }
input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--brand); }
.fila-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.fila-form > .campo { flex: 1 1 160px; min-width: 0; }

.aviso { padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.aviso.error { background: var(--red-bg); color: var(--red); font-weight: 600; }
.aviso.ok { background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.aviso.ambar { background: var(--amber-bg); color: var(--amber); }
.aviso.info { background: var(--surface-2); color: var(--muted); }

.pill { display: inline-block; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--ok-bg); color: var(--ok); }
.pill.rojo { background: var(--red-bg); color: var(--red); }
.pill.ambar { background: var(--amber-bg); color: var(--amber); }
.pill.marca { background: var(--surface-2); color: var(--brand-ink); }

/* ---------- ingreso ---------- */
.ingreso { min-height: 100%; display: flex; flex-direction: column; background: var(--deep); color: var(--on-deep); }
.ingreso-top { padding: 48px 24px 28px; width: 100%; max-width: 480px; margin: 0 auto; display: grid; gap: 8px; }
.wordmark { font-family: var(--f-display); letter-spacing: .12em; font-size: 28px; display: flex; align-items: center; }
.wordmark .marca { height: 1.35em; width: auto; margin-right: .35em; flex: 0 0 auto; }
.wordmark span { font-weight: 300; }
.wordmark b { font-weight: 800; margin-left: .35em; }
.ingreso-card { flex: 1; background: var(--bg); color: var(--ink); border-radius: 22px 22px 0 0; padding: 24px 16px 32px; }
.ingreso-form { max-width: 448px; margin: 0 auto; display: grid; gap: 14px; }
.ingreso-form input { min-height: 52px; font-size: 18px; }
.ingreso-form .btn { min-height: 52px; font-size: 17px; }
.reglas { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; }
.reglas li.cumple { color: var(--ok); }

/* ---------- panel ---------- */
.panel { display: grid; grid-template-columns: 240px 1fr; min-height: 100%; }
.lateral { background: var(--deep); color: var(--on-deep); padding: 18px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.lateral .wordmark { font-size: 18px; padding: 4px 10px 16px; }
.lateral a {
  color: var(--on-deep); text-decoration: none; padding: 10px 12px; border-radius: 9px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
}
.lateral a:hover { background: rgba(255, 255, 255, .07); }
.lateral a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.lateral .contador { background: var(--amber-bg); color: var(--amber); border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; }
.lateral .pie-lateral { margin-top: auto; display: grid; gap: 6px; padding: 12px 6px 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 13px; }
.lateral .pie-lateral button { background: none; border: 1px solid rgba(255, 255, 255, .22); color: var(--on-deep); border-radius: 8px; padding: 6px 10px; text-align: left; }
.contenido { padding: 24px 28px 48px; min-width: 0; display: grid; gap: 18px; align-content: start; }
.seccion { display: grid; gap: 18px; align-content: start; min-width: 0; }
.encabezado { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; }
.encabezado h1 { font-size: 26px; }
.miga { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.miga a { text-decoration: none; }

.tarjeta { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: grid; gap: 12px; min-width: 0; }
.tarjeta h2 { font-size: 18px; }
.tarjeta-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }

.solapas { display: flex; gap: 4px; border-bottom: 1.5px solid var(--line); flex-wrap: wrap; }
.solapas button { border: 0; background: none; padding: 10px 14px; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1.5px; }
.solapas button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }

.tabla-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
tr:last-child td { border-bottom: 0; }
td.acciones { text-align: right; white-space: nowrap; }
td.acciones .btn + .btn { margin-left: 6px; }
.vacio { padding: 20px; text-align: center; color: var(--muted); }

.lista-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cifra { font-family: var(--f-display); font-size: 28px; font-weight: 800; }

/* ---------- modal ---------- */
dialog { border: 0; border-radius: 16px; padding: 0; width: min(560px, calc(100% - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
dialog::backdrop { background: rgba(8, 20, 18, .55); }
.modal { padding: 20px; display: grid; gap: 14px; max-height: 85vh; overflow-y: auto; }
.modal h2 { font-size: 21px; }
.form-modal { display: grid; gap: 14px; }
.modal-acciones { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.clave-grande { font-family: var(--f-display); font-size: 30px; font-weight: 800; text-align: center; padding: 12px; border-radius: 12px; background: var(--surface-2); letter-spacing: .02em; user-select: all; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100;
  background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 12px; font-weight: 600; max-width: calc(100% - 32px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .25);
}
.toast.error { background: var(--red); color: #fff; }

/* ficha del empleado en el panel */
.dato-ficha { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.dato-ficha:last-child { border-bottom: 0; }
.dato-ficha b { text-align: right; overflow-wrap: anywhere; }
.docs { display: flex; gap: 12px; flex-wrap: wrap; }
.doc { margin: 0; display: grid; gap: 4px; justify-items: center; font-size: 13px; color: var(--muted); }
.doc-img { width: 220px; height: 150px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); display: grid; place-items: center; }
.seleccionable { user-select: all; font-size: 18px; }
a.btn { text-decoration: none; color: inherit; }
a.btn.prim { color: var(--on-brand); }

/* aviso de versión nueva (todas las pantallas) */
.version-nueva {
  position: fixed; left: 12px; right: 12px; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 120;
  margin: 0 auto; width: fit-content; max-width: 540px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 14px; border-radius: 12px;
  background: var(--amber-bg); color: var(--amber); font-weight: 600; box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
}
.version-nueva button { flex: 0 0 auto; border: 0; border-radius: 9px; padding: 8px 12px; background: var(--amber); color: var(--surface); font-weight: 700; min-height: 36px; }

/* ---------- horarios ---------- */
.horarios { display: grid; grid-template-columns: 90px 70px 1fr 1fr; gap: 8px 10px; align-items: center; }
.horarios .dia { font-weight: 600; }

/* ---------- importación ---------- */
.zona-archivo { border: 2px dashed var(--line); border-radius: 14px; padding: 22px; text-align: center; display: grid; gap: 8px; justify-items: center; background: var(--surface); }
.zona-archivo.encima { border-color: var(--brand); background: var(--surface-2); }
.resumen-imp { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.resumen-imp .dato { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.resumen-imp .dato b { display: block; font-family: var(--f-display); font-size: 24px; }

/* =============================================================================
   App del líder (celular): una columna de hasta 560px, barra superior fija con el
   contexto del turno, servicios arriba, lista de coches y pie fijo con Guardar.
   ============================================================================= */
.lider { max-width: 560px; margin: 0 auto; min-height: 100%; display: flex; flex-direction: column; background: var(--bg); font-size: 16px; -webkit-tap-highlight-color: transparent; }
.lider main { flex: 1; }
.lider .top { position: sticky; top: 0; z-index: 20; background: var(--deep); color: var(--on-deep); padding: calc(8px + env(safe-area-inset-top, 0px)) 16px 10px; display: grid; gap: 8px; }
.lider .top-row { display: flex; align-items: center; gap: 10px; }
.lider .wordmark { font-size: 17px; margin-right: auto; white-space: nowrap; }
.lider .pill-btn {
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: var(--on-deep);
  border-radius: 999px; padding: 6px 12px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; white-space: nowrap;
}
.lider .pill-btn .dot { width: 9px; height: 9px; border-radius: 50%; background: #5BD68A; flex: 0 0 auto; }
.lider .pill-btn.off .dot { background: #F2BA55; }
.lider .yo { border: 0; background: none; padding: 0; min-height: 40px; display: grid; place-items: center; }
.lider .avatar, .hoja .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 14px; }
.lider .avatar.grande, .hoja .avatar.grande { width: 52px; height: 52px; font-size: 20px; }
.lider .ctx { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.lider .ctx > div { display: grid; }
.lider .ctx h1 { font-weight: 700; font-size: 22px; line-height: 1.1; }
.lider .ctx .sub { font-size: 15px; opacity: .85; }
.lider .jornada { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; border-radius: 10px; border: 0; padding: 6px 12px; background: var(--on-deep); color: var(--deep); font-weight: 700; }
.lider .jornada.diferida { background: var(--amber-bg); color: var(--amber); }
.lider .jornada small { font-weight: 500; font-size: 14px; }
.lider .sel-turno { min-height: 40px; background: rgba(255, 255, 255, .08); color: var(--on-deep); border-color: rgba(255, 255, 255, .22); }
.lider .sel-turno option { color: var(--ink); background: var(--surface); }

.lider .avisos { display: grid; gap: 6px; padding: 10px 16px 0; }
.lider .avisos:empty { display: none; }
.lider .aviso-fila { text-align: left; border: 0; border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.35; width: 100%; }
.lider .aviso-fila.error { background: var(--red-bg); color: var(--red); font-weight: 600; }
.lider .aviso-fila.ambar { background: var(--amber-bg); color: var(--amber); }
.lider .aviso-fila.info { background: var(--surface-2); color: var(--muted); }
.lider .aviso-fila b { text-decoration: underline; }

.lider .servicios { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px 4px; scrollbar-width: none; }
.lider .servicios::-webkit-scrollbar { display: none; }
.lider .srv { flex: 0 0 auto; min-width: 100px; max-width: 170px; min-height: 58px; text-align: left; border-radius: 12px; padding: 8px 12px; background: var(--surface); border: 2px solid var(--line); display: grid; gap: 2px; box-shadow: var(--shadow); }
.lider .srv .n { font-family: var(--f-display); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lider .srv .m { font-size: 13px; color: var(--muted); display: flex; gap: 8px; }
.lider .srv .m .p { color: var(--red); font-weight: 700; }
.lider .srv .m .k { color: var(--done); font-weight: 700; }
.lider .srv[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.lider .srv[aria-pressed="true"] .m, .lider .srv[aria-pressed="true"] .m .p, .lider .srv[aria-pressed="true"] .m .k { color: var(--on-brand); }
.lider .resumen { padding: 8px 16px 0; font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.lider .resumen b { color: var(--ink); }

.lider .filtros { padding: 8px 16px 4px; display: grid; gap: 8px; }
.lider .buscar { min-height: 48px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); padding: 8px 14px; font-size: 18px; }
.lider .chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.lider .chips::-webkit-scrollbar { display: none; }
.lider .chip { flex: 0 0 auto; min-height: 38px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 600; font-size: 14px; }
.lider .chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.lider .chip .c { opacity: .7; font-weight: 500; margin-left: 4px; }
.lider .chips-sep { flex: 0 0 1px; background: var(--line); margin: 4px 2px; }

.lider .lista { list-style: none; margin: 0; padding: 4px 16px 16px; display: grid; gap: 8px; }
.lider .grupo { font-family: var(--f-display); font-weight: 700; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 2px 0; }
.lider .fila { display: grid; grid-template-columns: 6px 1fr auto auto; align-items: stretch; min-height: 68px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 2px solid transparent; }
.lider .fila.marcada { border-color: var(--done); background: var(--done-bg); }
.lider .estado-barra { background: var(--line); }
.lider .s-atrasado .estado-barra, .lider .s-sin_registro .estado-barra { background: var(--red); }
.lider .s-vence_hoy .estado-barra { background: var(--amber); }
.lider .s-al_dia .estado-barra { background: var(--ok); }
.lider .fila-main { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 0; background: none; text-align: left; min-width: 0; overflow: hidden; }
.lider .interno { font-family: var(--f-display); font-weight: 800; font-size: 28px; line-height: 1; min-width: 72px; }
.lider .detalle { display: grid; gap: 4px; min-width: 0; }
.lider .detalle .ult { font-size: 15px; }
.lider .etiquetas { display: flex; flex-wrap: wrap; gap: 4px; }
.lider .tag, .hoja .tag { justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: .03em; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.lider .s-atrasado .tag.est, .lider .s-sin_registro .tag.est, .hoja .s-atrasado .tag.est, .hoja .s-sin_registro .tag.est { background: var(--red-bg); color: var(--red); }
.lider .s-vence_hoy .tag.est, .hoja .s-vence_hoy .tag.est { background: var(--amber-bg); color: var(--amber); }
.lider .s-al_dia .tag.est, .hoja .s-al_dia .tag.est { background: var(--ok-bg); color: var(--ok); }
.lider .tag.hecho { background: var(--done-bg); color: var(--done); }
.lider .tick { width: 64px; border: 0; border-left: 1px solid var(--line); background: none; display: grid; place-items: center; }
.lider .tick:disabled { opacity: 1; cursor: default; }
.lider .tick .box { width: 34px; height: 34px; border-radius: 9px; border: 2.5px solid var(--muted); display: grid; place-items: center; }
.lider .fila.marcada .tick .box, .lider .fila.bloqueada .tick .box { background: var(--done); border-color: var(--done); }
.lider .tick svg { width: 22px; height: 22px; stroke: var(--surface); stroke-width: 3.2; fill: none; opacity: 0; }
.lider .fila.marcada .tick svg, .lider .fila.bloqueada .tick svg { opacity: 1; }
.lider .ficha-btn { width: 44px; border: 0; background: none; color: var(--muted); display: grid; place-items: center; }
.lider .ficha-btn svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.2; fill: none; }
.lider .a-mano { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 16px; background: var(--surface); border-radius: var(--radius); border: 2px dashed var(--line); }
.lider .a-mano p { margin: 0; }

.lider .pie { position: sticky; bottom: 0; z-index: 20; background: var(--bg); border-top: 1px solid var(--line); padding: 10px 16px calc(8px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; }
.lider .guardar { min-height: 56px; border-radius: 14px; border: 0; background: var(--accent); color: var(--on-accent); font-family: var(--f-display); font-size: 19px; font-weight: 700; }
.lider .guardar:disabled { background: var(--surface-2); color: var(--muted); opacity: 1; }
.lider .nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lider .nav button { min-height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; }
.lider .nav button[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.lider .vista { padding: 12px 16px 16px; display: grid; gap: 12px; }
.lider .consulta { display: grid; gap: 12px; }
.lider .seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lider .seg button { min-height: 44px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; font-size: 14px; }
.lider .seg button[aria-pressed="true"] { background: var(--brand); color: var(--on-brand); border-color: var(--brand); }
.lider .card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; display: grid; gap: 10px; min-width: 0; }
.lider .card h3 { font-size: 18px; }
.lider .meta, .lider .nota, .hoja .nota { font-size: 14px; color: var(--muted); margin: 0; }
.lider .barra { height: 12px; border-radius: 999px; background: var(--surface-2); display: flex; overflow: hidden; }
.lider .barra i { display: block; height: 100%; }
.lider .barra .b-ok { background: var(--ok); }
.lider .barra .b-vence { background: var(--amber); }
.lider .barra .b-atr { background: var(--red); }
.lider .leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--muted); }
.lider .leyenda b { color: var(--ink); }
.lider .mini-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.lider .mini-lista button { border: 0; border-radius: 8px; padding: 6px 10px; background: var(--red-bg); color: var(--red); font-weight: 700; min-height: 36px; }
.lider .mini-lista.neutra button { background: var(--surface-2); color: var(--ink); }
.lider .link-btn { justify-self: start; border: 0; background: none; color: var(--brand-ink); font-weight: 700; padding: 6px 0; min-height: 36px; text-align: left; }
.lider td.r, .lider th.r, .hoja td.r { text-align: right; }

/* el aviso flotante, por encima del pie (Guardar y navegación) */
body:has(.lider) .toast { bottom: calc(140px + env(safe-area-inset-bottom, 0px)); }

/* Hojas: ventanas que suben desde abajo en el celular */
dialog.hoja { width: min(560px, 100%); max-width: 100%; margin: auto auto 0; border-radius: 18px 18px 0 0; }
dialog.hoja .modal { padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px)); gap: 12px; max-height: 88vh; }
.hoja .cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hoja .srv-ficha { display: grid; gap: 8px; }
.hoja .srv-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 2px solid transparent; }
.hoja .srv-row.marcada { border-color: var(--done); background: var(--done-bg); }
.hoja .srv-row .t { font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.hoja .srv-row .d { font-size: 14px; color: var(--muted); }
.hoja .srv-row button { min-height: 44px; min-width: 96px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; }
.hoja .srv-row button.deshacer { color: var(--red); border-color: var(--red); }
.hoja .srv-row button[aria-pressed="true"] { background: var(--done); border-color: var(--done); color: var(--surface); }
.hoja .opcion { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 52px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); text-align: left; font-size: 16px; }
.hoja .opcion[aria-pressed="true"] { border-color: var(--brand); background: var(--surface-2); }
.hoja .opcion.peligro { color: var(--red); }
.hoja .acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hoja .acciones button { min-height: 48px; padding: 8px 16px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; flex: 1 1 auto; }
.hoja .acciones button.prim { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.hoja .form-hoja { display: grid; gap: 12px; }
.hoja .form-hoja input, .hoja .form-hoja select { min-height: 48px; font-size: 17px; }
.hoja .lista-simple { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.hoja .rechazos { color: var(--ink); }
.hoja h3 { font-size: 17px; }

/* =============================================================================
   Onboarding y Mis datos (celular)
   ============================================================================= */
.pantalla { min-height: 100%; display: flex; flex-direction: column; background: var(--bg); font-size: 16px; }
.pantalla-top {
  position: sticky; top: 0; z-index: 20; background: var(--deep); color: var(--on-deep);
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 12px; display: grid; gap: 8px;
}
.pantalla-top > * { width: 100%; max-width: 528px; margin: 0 auto; }
.pantalla-top .fila-top { display: flex; align-items: center; gap: 10px; }
.pantalla-top h1 { font-size: 22px; }
.pantalla-top .quien { display: grid; line-height: 1.2; min-width: 0; }
.pantalla-top .quien span { font-size: 13px; opacity: .8; }
.pantalla .avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; flex: 0 0 auto; object-fit: cover; }
.volver { border: 0; background: rgba(255, 255, 255, .1); color: var(--on-deep); border-radius: 10px; min-height: 40px; padding: 6px 12px; font-weight: 700; }
.paso-txt { font-size: 14px; opacity: .85; margin-left: auto; }
.progreso { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.progreso i { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .2); }
.progreso i.hecho { background: var(--accent); }
.cuerpo { width: 100%; max-width: 560px; margin: 0 auto; padding: 16px 16px 24px; display: grid; gap: 14px; align-content: start; }
.cuerpo h2 { font-size: 22px; }
.cuerpo .nota { font-size: 14px; color: var(--muted); margin: 0; }
.cuerpo .campo input, .cuerpo .campo select { min-height: 52px; font-size: 17px; border-radius: 12px; }
.campo .ayuda { font-size: 14px; }
.campo .mal { font-size: 14px; color: var(--red); font-weight: 600; }
.campo.con-error input, .campo.con-error select { border-color: var(--red); }
.campo .opc { font-weight: 500; color: var(--muted); }
.fotos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.foto {
  position: relative; display: grid; place-items: center; gap: 6px; text-align: center; min-height: 150px; padding: 12px;
  border-radius: 14px; border: 2px dashed var(--line); background: var(--surface); cursor: pointer; font-weight: 700; overflow: hidden;
}
.foto input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.foto img { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; }
.foto.lista { border-style: solid; border-color: var(--done); }
.foto small { font-weight: 500; color: var(--muted); }
.botones-paso { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; position: sticky; bottom: 0; padding: 10px 0 calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--bg); }
.botones-paso .btn, .btn.grande { min-height: 56px; border-radius: 14px; font-size: 17px; }
.bloque { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; display: grid; gap: 2px; }
.bloque-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bloque h3 { font-size: 17px; }
.bloque .fila-dato { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.bloque .fila-dato:last-child { border-bottom: 0; }
.bloque .fila-dato span:first-child { color: var(--muted); flex: 0 0 auto; }
.bloque .fila-dato span:last-child { font-weight: 700; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.bloque .pedido { padding: 6px 0; border-bottom: 1px solid var(--line); }
.bloque .pedido:last-child { border-bottom: 0; }
.bloque .pedido .fila-dato { border-bottom: 0; padding: 2px 0; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; }
.check input { width: 26px; height: 26px; flex: 0 0 auto; margin: 0; }
.pasos-final { margin: 0; padding-left: 22px; display: grid; gap: 8px; }
.acciones-col { display: grid; gap: 8px; }
.acciones-col .btn { min-height: 52px; border-radius: 12px; font-size: 17px; }
.ingreso-form .btn.nuevo { background: transparent; border: 2px solid var(--brand-ink); color: var(--brand-ink); }
/* campo trampa para robots: fuera de la pantalla, no oculto con display (algunos robots lo detectan) */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }

/* ---------- reportes y gráficos ---------- */
.filtros-rep { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.filtros-rep .campo { flex: 0 1 190px; min-width: 140px; }
.atajos { display: flex; gap: 6px; flex-wrap: wrap; }
.grafico { position: relative; margin: 0; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .grilla { stroke: var(--g-grilla); stroke-width: 1; }
.grafico .eje { stroke: var(--g-eje); stroke-width: 1.2; }
.grafico .guia { stroke: var(--g-eje); stroke-width: 1; stroke-dasharray: 3 3; }
.grafico .marca { fill: var(--g-marca); font-size: 11px; font-family: var(--f-body); font-variant-numeric: tabular-nums; }
.grafico .rotulo { fill: var(--ink); font-size: 12px; font-weight: 700; font-family: var(--f-body); }
.grafico .centro { fill: var(--ink); font-size: 24px; font-weight: 800; font-family: var(--f-display); }
.grafico .zona { fill: transparent; }
.grafico .tajada { stroke: var(--surface); stroke-width: 2; }
.grafico .vacio-anillo { fill: none; stroke: var(--g-grilla); }
.grafico .linea { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.grafico .punto { stroke: var(--surface); stroke-width: 2; }
.s1 { fill: var(--s1); stroke: var(--s1); } .s2 { fill: var(--s2); stroke: var(--s2); } .s3 { fill: var(--s3); stroke: var(--s3); }
.s4 { fill: var(--s4); stroke: var(--s4); } .s5 { fill: var(--s5); stroke: var(--s5); } .s6 { fill: var(--s6); stroke: var(--s6); }
.s7 { fill: var(--s7); stroke: var(--s7); } .s8 { fill: var(--s8); stroke: var(--s8); } .sotros { fill: var(--s-otros); stroke: var(--s-otros); }
.grafico path.s1, .grafico path.s2, .grafico path.s3, .grafico path.s4, .grafico path.s5, .grafico path.s6, .grafico path.s7, .grafico path.s8 { stroke-width: 0; }
.grafico path.tajada { stroke: var(--surface); stroke-width: 2; }
.grafico .linea.s1, .grafico .linea.s2, .grafico .linea.s3, .grafico .linea.s4 { fill: none; }
.globo { position: absolute; transform: translate(-50%, -100%); background: var(--deep); color: var(--on-deep); padding: 6px 10px; border-radius: 8px;
  font-size: 13px; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow); z-index: 2; }
.distribucion { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; }
.distribucion .grafico { flex: 0 0 190px; }
.distribucion .referencia { flex: 1 1 260px; }
.referencia { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.referencia li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto 64px; gap: 8px; align-items: center; }
.referencia .muestra { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
span.muestra.s1, span.muestra.s2, span.muestra.s3, span.muestra.s4, span.muestra.s5, span.muestra.s6, span.muestra.s7, span.muestra.s8, span.muestra.sotros { background: currentColor; }
.muestra.s1 { color: var(--s1); } .muestra.s2 { color: var(--s2); } .muestra.s3 { color: var(--s3); } .muestra.s4 { color: var(--s4); }
.muestra.s5 { color: var(--s5); } .muestra.s6 { color: var(--s6); } .muestra.s7 { color: var(--s7); } .muestra.s8 { color: var(--s8); } .muestra.sotros { color: var(--s-otros); }
.referencia .num { text-align: right; }
.referencia.en-linea { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.referencia.en-linea li { display: flex; gap: 6px; }
.dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; }
td.num, th.num { text-align: right; }
.cierre-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 12px; }
.cierre-form .ancho { grid-column: 1 / -1; }
.cierre-form textarea { width: 100%; min-height: 80px; }
.propuesta { font-size: 12px; color: var(--muted); }
.propuesta button { border: 0; background: none; color: var(--brand-ink); font-weight: 700; padding: 0 2px; text-decoration: underline; cursor: pointer; font-size: 12px; }
.detalle-tabla summary { cursor: pointer; color: var(--brand-ink); font-weight: 700; font-size: 14px; }

/* ---------- tablero y alertas ---------- */
.e-ok { fill: var(--e-ok); color: var(--e-ok); } .e-aviso { fill: var(--e-aviso); color: var(--e-aviso); }
.e-serio { fill: var(--e-serio); color: var(--e-serio); } .e-critico { fill: var(--e-critico); color: var(--e-critico); }
span.muestra.e-ok, span.muestra.e-aviso, span.muestra.e-serio, span.muestra.e-critico { background: currentColor; }
.grafico .vacio-barra { fill: var(--g-grilla); }
.calor.c0 { fill: var(--k0); } .calor.c1 { fill: var(--k1); } .calor.c2 { fill: var(--k2); } .calor.c3 { fill: var(--k3); }
.calor.c4 { fill: var(--k4); } .calor.c5 { fill: var(--k5); } .calor.c6 { fill: var(--k6); } .calor.c7 { fill: var(--k7); }
.escala-calor { display: flex; align-items: center; gap: 3px; margin-top: 6px; }
.calor-muestra { width: 18px; height: 12px; border-radius: 2px; display: inline-block; }
.calor-muestra.c1 { background: var(--k1); } .calor-muestra.c2 { background: var(--k2); } .calor-muestra.c3 { background: var(--k3); }
.calor-muestra.c4 { background: var(--k4); } .calor-muestra.c5 { background: var(--k5); } .calor-muestra.c6 { background: var(--k6); } .calor-muestra.c7 { background: var(--k7); }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.kpi { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; display: grid; gap: 2px; }
.kpi .valor { font-family: var(--f-display); font-size: 30px; font-weight: 800; line-height: 1.1; }
.kpi .etq { color: var(--muted); font-size: 13px; }
.kpi .delta { font-size: 13px; font-weight: 700; }
.delta.sube { color: var(--ok); } .delta.baja { color: var(--red); } .delta.igual { color: var(--muted); }
.alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.alerta { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 10px; border-left: 5px solid; background: var(--surface-2); }
.alerta.critica { border-color: var(--e-critico); } .alerta.alta { border-color: var(--e-serio); }
.alerta.media { border-color: var(--e-aviso); } .alerta.info { border-color: var(--g-eje); }
.alerta .icono { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 14px; color: #fff; }
.alerta.critica .icono { background: var(--e-critico); } .alerta.alta .icono { background: var(--e-serio); color: #1a1a19; }
.alerta.media .icono { background: var(--e-aviso); color: #1a1a19; } .alerta.info .icono { background: var(--g-eje); color: var(--ink); }
.alerta b { display: block; }
.alerta .nivel { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.lateral .contador.rojo { background: var(--e-critico); color: #fff; }
.lateral a[aria-current="page"] .contador.rojo { background: #fff; color: var(--accent); }
dialog.ancho { width: min(860px, calc(100% - 32px)); }
dialog.ancho .modal, dialog.ancho > * { overflow-wrap: anywhere; }

/* Ayuda: los manuales dentro de la app */
.ayuda { display: grid; gap: 14px; max-width: 1100px; }
.ayuda h1 { margin: 0; }
.ay-buscar { width: 100%; max-width: 480px; }
.ay-grilla { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 24px; align-items: start; }
.ay-indice-caja { position: sticky; top: 16px; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; max-height: calc(100vh - 32px); overflow: auto; }
.ay-indice-caja summary { font-weight: 700; cursor: pointer; }
.ay-indice ol { margin: 8px 0 0; padding-left: 0; list-style: none; display: grid; gap: 2px; }
.ay-indice .link-btn { border: 0; background: none; color: var(--brand-ink); font-weight: 600; text-align: left; padding: 5px 0; min-height: 32px; font-size: 14px; line-height: 1.3; cursor: pointer; }
.ay-cuerpo { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 24px; line-height: 1.55; min-width: 0; }
.ay-cuerpo > p:first-child { margin-top: 0; }
.ay-cap + .ay-cap { border-top: 1px solid var(--line); margin-top: 24px; }
.ay-cap h2 { font-family: var(--f-display); font-size: 22px; margin: 22px 0 8px; scroll-margin-top: 12px; }
.ay-cuerpo h3 { font-size: 17px; margin: 18px 0 6px; scroll-margin-top: 12px; }
.ay-cuerpo ol, .ay-cuerpo ul { padding-left: 22px; display: grid; gap: 4px; }
.ay-cuerpo li > ol, .ay-cuerpo li > ul { margin-top: 4px; }
.ay-cuerpo .tabla-wrap { margin: 10px 0; }
.ay-cuerpo td, .ay-cuerpo th { vertical-align: top; }
.ay-nota { background: var(--surface-2); border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 14px; margin: 12px 0; }
.ay-img { margin: 14px 0; display: grid; gap: 6px; justify-items: center; }
.ay-img img { max-width: 100%; max-height: 640px; height: auto; border-radius: 10px; border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--surface-2); }
.ay-img figcaption { font-size: 13px; color: var(--muted); text-align: center; }
.ay-img.sin-imagen a { display: none; }
.ay-img.sin-imagen figcaption::before { content: "Imagen: "; }
.ayuda-capa { position: fixed; inset: 0; z-index: 50; background: var(--bg); overflow: auto; padding: 16px 16px 40px; outline: none; }
body.con-capa { overflow: hidden; }
@media (max-width: 899px) {
  .ay-grilla { grid-template-columns: 1fr; gap: 12px; }
  .ay-indice-caja { position: static; max-height: none; }
  .ay-cuerpo { padding: 14px 16px; }
  .ay-img img { max-height: 520px; }
}

@media (max-width: 860px) {
  .panel { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; padding: 10px; }
  .lateral .wordmark { width: 100%; padding-bottom: 6px; }
  .lateral .pie-lateral { width: 100%; margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; }
  .contenido { padding: 16px; }
  .horarios { grid-template-columns: 70px 50px 1fr 1fr; }
  .distribucion .grafico { margin: 0 auto; }
  .alerta { grid-template-columns: 26px 1fr; }
  .alerta .btn { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: no-preference) {
  .toast { animation: sube .2s ease-out; }
  @keyframes sube { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
}