/* ICE · portal del empleado · tema claro (plan Fase 1, 17/10/2026)
 *
 * Antes: fondo oscuro con tarjetas blancas y una cabecera oscura en cada
 * pantalla (half-dark). Ahora: cabecera navy de Enertria arriba y lienzo
 * claro en todas las pantallas. La cabecera grande (hero) solo en Inicio.
 * Las cifras usan la tipografía normal, no la monoespaciada.
 *
 * Tokens y .ice-*: ice-tokens.css + ice-ui.css (copia de gestión).
 * Esta hoja no restylea la tarjeta de acceso, .lc, .lbtn ni MSAL.
 * Nunca se aplica la paleta dark al contenido del empleado.
 */

/* ── Lienzo ── */
body.app-active {
  background:
    radial-gradient(1100px 620px at 95% -10%, rgba(12, 178, 171, .07), transparent 60%),
    radial-gradient(900px 540px at -10% 30%, rgba(79, 174, 50, .05), transparent 55%),
    #eef3f8;
  color: #0e1a2b;
}

/* #app de ice-tokens es la grid de gestión (256px / 0 en móvil): se anula
 * para que la cabecera ocupe el ancho y no se superpongan sus botones. */
body.app-active #app {
  display: flex;
  flex-direction: column;
  height: auto;
  background: transparent;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-template-areas: none;
}

/* ── Secciones (escritorio) ── */
body.app-active .tabs {
  margin: 14px 18px 0;
  padding: 6px;
  gap: 4px;
  background: #fff;
  border: 1px solid #dde6ef;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 35, 51, .04);
  flex-wrap: nowrap;
}
body.app-active .tabs button,
body.app-active .tabbtn {
  flex: 1 1 0;
  justify-content: center;
  min-height: 44px;
  border-radius: 10px;
  font-size: 13.5px;
  color: #33475a;
}
body.app-active .tabs button:hover,
body.app-active .tabbtn:hover {
  color: #182540;
  background: #f2f6fa;
}
body.app-active .tabs button.active,
body.app-active .tabbtn.active {
  background: #182540;
  color: #fff;
}

/* ── Subpestañas de la sección ── */
.ess-subnav {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 18px 0;
  -webkit-overflow-scrolling: touch;
}
.ess-subnav::-webkit-scrollbar { display: none; }
.ess-subnav[hidden] { display: none; }
/* El acceso a ICE solo para administración o roles distintos de empleado: en
   móvil la regla de .logoutbtn ganaba al atributo hidden y se veía igual. */
#iceLinkBtn[hidden] { display: none !important; }
.ess-subtab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  border: 1px solid #dde6ef;
  background: #fff;
  color: #33475a;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  min-height: 40px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.ess-subtab .ess-ic { width: 16px; height: 16px; }
.ess-subtab:hover { border-color: #087d77; color: #182540; }
.ess-subtab.active { background: #e2f5f3; border-color: #087d77; color: #075e5a; }
.ess-subtab:focus-visible { outline: 3px solid #087d77; outline-offset: 2px; }

/* ── Barra inferior (móvil) ── */
body.app-active .bnav {
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid #dde6ef;
  box-shadow: 0 -6px 20px rgba(16, 35, 51, .06);
}
body.app-active .bnav button { color: #4b5f73; min-height: 52px; }
body.app-active .bnav button.active { color: #182540; background: #e2f5f3; }
body.app-active .bnav button.active .bi { color: #087d77; }
body.app-active .mobile-menu-btn { display: none !important; }

/* ── Contenido ── */
.ice-ess {
  margin-top: 4px;
  padding: var(--space-2, 6px) 0 var(--space-8, 22px);
  background: transparent;
  color: #0e1a2b;
  --ink: #0e1a2b;
  --ink2: #33475a;
  --muted: #5b6b7d;
  --card: #fff;
  --panel: #f2f6fa;
  --line: #dde6ef;
  --bg2: #f7f9fc;
}

/* Cabecera de cada pantalla: título sencillo. */
.ice-ess .ess-pagehead {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 6px 2px 4px;
  margin: 0 0 14px;
}
.ice-ess .ess-pagehead .eph {
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -.025em;
  color: #182540;
  margin: 0;
}
.ice-ess .ess-pagehead .eps {
  margin: 6px 0 0;
  color: #4b5f73;
  font-size: 13.5px;
  line-height: 1.5;
  max-width: 70ch;
}

/* Cabecera grande, solo en Inicio. */
.ice-ess .ess-home .ess-hero {
  background: linear-gradient(135deg, #182540, #1f3358 60%, #12352f);
  border: 1px solid rgba(12, 178, 171, .25);
  color: #fff;
  border-radius: 18px;
  padding: 22px 22px 18px;
  box-shadow: 0 12px 30px rgba(16, 35, 51, .18);
  margin-bottom: 16px;
  --ink: #fff;
  --ink2: #d6e2ee;
  --muted: #a9bccf;
}
.ice-ess .ess-home .ess-hero .ess-kicker { color: #5fd6cf; }
.ice-ess .ess-home .ess-hero h1 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.25rem); letter-spacing: -.035em; }
.ice-ess .ess-home .ess-hero .ess-sub { color: #d6e2ee; }
.ice-ess .ess-hero-actions .b2g {
  background: rgba(255, 255, 255, .1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .24);
}

/* Tarjetas */
.ice-ess .epc,
.ice-ess .ess-card,
.ice-ess .parte-card,
.ice-ess .ess-pend-item,
.ice-ess .labor-row,
.ice-ess .kpic {
  background: #fff;
  border: 1px solid #dde6ef;
  color: #0e1a2b;
  box-shadow: 0 1px 2px rgba(16, 35, 51, .04), 0 6px 18px rgba(16, 35, 51, .05);
}
.ice-ess .ess-sec h2,
.ice-ess .epc h3,
.ice-ess .li-nm,
.ice-ess .parte-card .ppry,
.ice-ess .ag-title,
.ice-ess .ess-pend-copy b,
.ice-ess .ess-tl-item b,
.ice-ess .profile-item b,
.ice-ess .ess-empty b {
  color: #182540;
}
.ice-ess .li-sub,
.ice-ess .ess-card-s,
.ice-ess .kpic .kl,
.ice-ess th {
  color: #5b6b7d;
}
.ice-ess .ess-card h3 { color: #5b6b7d; }

/* Cifras con la tipografía normal (antes, monoespaciada). */
.ice-ess .kn,
.ice-ess .ess-card .ess-card-n,
.ice-ess .ice-kpi-val {
  font-family: var(--font, 'Inter', system-ui, sans-serif);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  font-weight: 800;
  color: #182540;
}
.ice-ess .kpic .kn { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.ice-ess .ess-home .ess-card .ess-card-n { font-size: 1.45rem; }
.ice-ess .kpic .kl { opacity: 1; text-transform: uppercase; letter-spacing: .3px; }

/* Formularios y tablas */
.ice-ess .fld2 input,
.ice-ess .fld2 select,
.ice-ess .fld2 textarea {
  background: #fff;
  color: #0e1a2b;
  border-color: #c9d6e3;
}
.ice-ess .vac-cal .vd,
.ice-ess .cal-day {
  background: #fff;
  color: #0e1a2b;
  border-color: #dde6ef;
}
.ice-ess td { border-bottom-color: #edf2f6; }
.ice-ess th { border-bottom-color: #dde6ef; }
.ice-ess .lst2 li { border-bottom-color: #edf2f6; }
.ice-ess .note { background: #f2f6fa; color: #33475a; border-left-color: #087d77; }
.ice-ess .ess-empty-mark { background: #eef6f6; border-color: #dde6ef; }
.ice-ess .ess-pend-ic { background: #e2f5f3; color: #075e5a; }
.ice-ess .ess-pend-cta { color: #075e5a; }
.ice-ess .ess-pend-item:hover { border-color: #087d77; box-shadow: 0 8px 22px rgba(16, 35, 51, .08); }
.ice-ess .ess-pend-static:hover { border-color: #dde6ef; box-shadow: 0 1px 2px rgba(16, 35, 51, .04); }
.ice-ess .ess-tl-dot { box-shadow: 0 0 0 4px rgba(12, 178, 171, .16); }
.ice-ess .ess-tl-item::before { background: #e4eef4; }
.ice-ess .bar2 { background: #e4edf5; }

/* Botones */
.ice-ess .btn2.b2g,
.ice-ess .ice-btn--ghost {
  background: #f2f6fa;
  border: 1px solid #dde6ef;
  color: #182540;
}
.ice-ess .btn2.b2g:hover { background: #e7eef5; }
.ice-ess .btn2.b2p,
.ice-ess .ice-btn--primary {
  background: linear-gradient(135deg, #087d77, #07635f);
  color: #fff;
  box-shadow: 0 6px 16px rgba(8, 125, 119, .25);
}
.ice-ess .btn2.b2d { background: linear-gradient(135deg, var(--navy), var(--navy2)); color: #fff; }

/* Píldoras: texto oscuro sobre fondo claro, contraste AA (4.5:1). */
.ice-ess .chip2.c2-ok { background: #d8f3df; color: #146c2e; }
.ice-ess .chip2.c2-warn { background: #fde7c2; color: #6b3f00; }
.ice-ess .chip2.c2-red { background: #f8d4d4; color: #8d1d1d; }
.ice-ess .chip2.c2-mut { background: #e4edf5; color: #243447; }
.ice-ess .chip2.c2-info { background: #d7e6fb; color: #1d4e96; }
.ice-ess .chip2.c2-teal { background: #d2f3f1; color: #0c5c58; }
.ice-ess .profile-item b.is-pending { font-weight: 500; color: #5b6b7d; }

/* Tipos de ausencia */
.ice-ess .aus-tipo { background: #f2f6fa; border-color: #dde6ef; color: #182540; }
.ice-ess .aus-tipo.on { background: #d2f3f1; border-color: #0c5c58; color: #0c5c58; }
.ice-ess .aus-tipo:disabled,
.ice-ess .aus-tipo.off { opacity: 1; background: #e4edf5; color: #243447; border-color: #c5d4e2; }

/* Errores */
.ice-ess .home-fail { background: #fdeaea; border-color: #f0c4c4; color: #8d1d1d; }
.ice-ess .home-fail p { color: #6e2424; }

/* Hoja «todos los apartados» (móvil) */
@media (max-width: 760px) {
  .ess-subnav { padding: 10px 10px 0; }
  body.app-active .ep-more { background: #fff; color: #0e1a2b; }
  body.app-active .ep-more-head { color: #182540; }
  body.app-active .ep-more-grid button { background: #f2f6fa; border-color: #dde6ef; color: #33475a; }
}

/* La invitación a instalar solo tiene sentido en el móvil. */
@media (min-width: 761px) {
  body.app-active #installBar { display: none !important; }
}

/* Contraste, foco y tacto */
body.app-active .appbar { padding-top: max(12px, env(safe-area-inset-top)); }
.ice-ess .ess-card,
.ice-ess .epc { min-width: 0; }
.ice-ess .li-nm,
.ice-ess .profile-item b { overflow-wrap: anywhere; }
.ice-ess .btn2:focus-visible,
body.app-active .tabbtn:focus-visible,
body.app-active .bnav button:focus-visible { outline: 3px solid #087d77; outline-offset: 3px; }
#employeeConnectivity { margin: 12px 18px 0; padding: 12px 16px; background: #fff1d6; color: #663d00; border: 1px solid #d8ad64; border-radius: 12px; font-size: 13px; line-height: 1.5; }
#employeeConnectivity[hidden] { display: none; }
@media (max-width: 760px) {
  body.app-active .logoutbtn { min-height: 44px; }
  body.app-active .appbar { padding-top: max(9px, env(safe-area-inset-top)); }
  .ice-ess .ess-home .ess-hero { border-radius: 14px; padding: 18px 16px 16px; }
  #employeeConnectivity { margin: 10px 10px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ice-ess * { animation: none !important; transition: none !important; }
}

/* Mi resumen (19/10/2026): horas por mes y ausencias por tipo. */
.ess-bars{display:flex;align-items:flex-end;gap:10px;height:150px;margin:16px 0 4px}
.ess-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.ess-bar i{display:block;width:100%;max-width:46px;min-height:2px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#0cb2ab,#087e79)}
.ess-bar.cur i{background:linear-gradient(180deg,#182540,#22525b)}
.ess-bar b{font-size:11px;color:var(--ink,#182540);white-space:nowrap}
.ess-bar span{font-size:10.5px;color:var(--muted,#637487)}
.ess-hb{display:flex;align-items:center;gap:8px;margin:7px 0;font-size:13px;color:var(--ink,#182540)}
.ess-hb span{width:150px;flex:0 0 auto;font-weight:600}
.ess-hb em{flex:1;height:10px;border-radius:999px;background:var(--line,#e6ecf0);overflow:hidden;font-style:normal}
.ess-hb em i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#0cb2ab,#087e79)}
@media(max-width:600px){.ess-hb span{width:110px}.ess-bars{gap:6px}}

/* Inicio (20/10/2026): Entrada y Salida centradas, una al lado de la otra también en el móvil. */
.ice-ess .ess-card-fichar { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ice-ess .ess-card-fichar .ess-card-cta.row2 { justify-content: center; width: 100%; flex-wrap: nowrap; gap: 10px; margin-top: auto; padding-top: 12px; }
.ice-ess .ess-card-fichar .ess-card-cta.row2 > .btn2 { flex: 1 1 0; max-width: 200px; min-width: 0; justify-content: center; }

/* Solicitar ausencia: tres pasos, fechas en dos columnas y resumen en vivo. */
.ice-ess .aus-form h3 { margin-bottom: 14px; }
.ice-ess .aus-paso { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; font-size: 13px; font-weight: 800; color: #182540; }
.ice-ess .aus-form .aus-paso:first-of-type { margin-top: 0; }
.ice-ess .aus-paso span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #d2f3f1; color: #0c5c58; font-size: 12px; flex: 0 0 auto; }
.ice-ess .aus-form .aus-tipos { gap: 8px; margin-bottom: 8px; }
.ice-ess .aus-form .aus-tipo { padding: 10px 14px; font-size: 13px; min-height: 42px; transition: background .15s, border-color .15s; }
.ice-ess .aus-form .aus-tipo.on { box-shadow: 0 0 0 3px rgba(12, 178, 171, .16); }
.ice-ess .aus-form .aus-tipo.on::before { content: "✓ "; }
.ice-ess .aus-hint { font-size: 12.5px; line-height: 1.45; color: #33475a; margin: 0 0 4px; }
.ice-ess .aus-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ice-ess .aus-fechas .fld2 { margin-bottom: 0; }
.ice-ess .aus-resumen { margin: 10px 0 2px; padding: 11px 13px; border-radius: 10px; background: #f2f6fa; border: 1px dashed #c9d6e3; font-size: 13px; color: #5b6b7d; }
.ice-ess .aus-resumen.on { background: #e8f6f5; border: 1px solid #a8dcd8; color: #0c3f3c; }
.ice-ess .aus-resumen.warn { background: #fff4df; border-color: #e7c27c; color: #6b3f00; }
.ice-ess .aus-resumen-s { margin-top: 3px; font-size: 12.5px; }
.ice-ess .aus-form .aus-enviar { width: 100%; justify-content: center; min-height: 48px; font-size: 15px; margin-top: 6px; }

/* Calendario de Mis ausencias con años anteriores y siguientes. */
.ice-ess .aus-cal-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ice-ess .aus-cal-h h3 { margin: 0; }
.ice-ess .aus-cal-nav { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.ice-ess .aus-cal-nav .btn2 { min-height: 36px; }

@media (max-width: 480px) {
  .ice-ess .aus-fechas { grid-template-columns: 1fr; }
  .ice-ess .aus-form .aus-tipo { flex: 1 1 calc(50% - 8px); justify-content: center; text-align: center; }
  .ice-ess .ess-card-fichar .ess-card-cta.row2 > .btn2 { max-width: none; }
  .ice-ess .aus-cal-nav { width: 100%; }
  .ice-ess .aus-cal-nav .btn2 { flex: 1 1 0; justify-content: center; }
}

/* Mi registro de jornada en PDF (20/10/2026). */
.ice-ess .ess-registro { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; border: 1px solid #dde6ef; border-radius: 12px; background: #f7fafc; }
.ice-ess .ess-registro b { display: block; color: #182540; font-size: 13.5px; }
.ice-ess .ess-registro span { display: block; color: #5b6b7d; font-size: 12px; margin-top: 2px; }
.ice-ess .ess-registro select { min-height: 40px; padding: 6px 30px 6px 10px; border: 1px solid #c9d6e3; border-radius: 8px; font: inherit; text-transform: capitalize; width: auto; }
@media (max-width: 480px) { .ice-ess .ess-registro .row2 { width: 100%; } .ice-ess .ess-registro select { flex: 1 1 auto; } }

/* Salida olvidada (20/10/2026): avisar a RRHH desde el día y ver la corrección. */
.ice-ess .ess-corr { margin-top: 3px; font-size: 10.5px; font-weight: 700; color: #1d4e96; }
.ice-ess .ess-aviso-ok { margin-top: 5px; font-size: 11.5px; font-weight: 700; color: #0c5c58; }
.ice-ess td .btn2.b2sm { margin-top: 6px; }
.ice-ess .ess-aviso-form { display: grid; gap: 8px; margin-top: 8px; min-width: 200px; }
.ice-ess .ess-aviso-form label { display: grid; gap: 3px; font-size: 11.5px; font-weight: 700; color: #5b6b7d; }
.ice-ess .ess-aviso-form input { padding: 8px 10px; border: 1px solid #c9d6e3; border-radius: 8px; font: inherit; font-size: 14px; min-height: 40px; }

/* Novedades en Inicio (20/10/2026). */
.ice-ess .ess-nov-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ice-ess .ess-nov-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #087d77; color: #fff; font-size: 12px; margin-left: 6px; vertical-align: 2px; }
.ice-ess .ess-nov-item { border-left: 4px solid #087d77; align-items: center; }
.ice-ess .ess-nov-ok { border-left-color: #2f8f42; }
.ice-ess .ess-nov-red { border-left-color: #a8322b; }
.ice-ess .ess-nov-info { border-left-color: #2f6fd0; }
.ice-ess .ess-nov-acc { display: flex; gap: 6px; margin-left: auto; flex: 0 0 auto; }
@media (max-width: 480px) { .ice-ess .ess-nov-item { flex-wrap: wrap; } .ice-ess .ess-nov-acc { width: 100%; justify-content: flex-end; } }

/* Festivos oficiales en el calendario de ausencias (20/10/2026). La marca
   naranja de la izquierda se mantiene aunque el día tenga una ausencia. */
.vac-cal .vd.fest{background:#fff3e0;border-color:#f1c98a;box-shadow:inset 3px 0 0 #e8a13a}
.vac-cal .vd.fest b{color:#8a4b00}
.vac-cal .vd.fest.ok,.vac-cal .vd.fest.pend,.vac-cal .vd.fest.rej{box-shadow:inset 3px 0 0 #e8a13a}
.vd-fest-chip{background:#fff3e0;color:#8a4b00;border:1px solid #f1c98a}

/* Aviso de ubicación al fichar desde el móvil (21/10/2026). */
.ess-ubi-aviso{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:#eef6fb;color:#2b4a63;font-size:11.5px;line-height:1.45;text-align:left}
.ess-ubi{margin-left:4px;cursor:help}

/* Inicio sin esperas (26/10/2026): al repintar cuando llega un dato, sin volver a
   lanzar la animación de entrada (si no, la pantalla parpadea en cada llegada). */
.ess-home.ess-repinta .ice-rise,.ess-home.ess-repinta.ice-rise,.ess-home.ess-repinta .ice-stagger>*{animation:none!important}
.ess-card.ess-cargando .ess-card-n{opacity:.55}

/* Información sobre la ubicación al fichar (26/10/2026). */
.ess-ubi-mas{background:none;border:0;padding:0;margin-left:2px;color:#0b6e63;font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
.ess-ubi-info summary{cursor:pointer;list-style:none;display:flex;flex-direction:column;gap:4px}
.ess-ubi-info summary::-webkit-details-marker{display:none}
.ess-ubi-info-sub{font-size:13px;line-height:1.45;color:var(--muted)}
.ess-ubi-info-mas{font-size:13px;font-weight:600;color:#0b6e63}
.ess-ubi-info .abierto,.ess-ubi-info[open] .cerrado{display:none}
.ess-ubi-info[open] .abierto{display:inline}
.ess-ubi-info ul{margin:12px 0 0;padding-left:18px;display:grid;gap:8px;font-size:13px;line-height:1.5}