/* ICE · componentes v2 (S1.5 agresivo)
 * ── navy / green / teal · Stripe + Linear ──
 *
 * Paquete de empleado.enertria.es. Tokens: /ice-tokens.css de este
 * mismo directorio. Se publica con publicar-shell-empleado.yml.
 * Clases opt-in `.ice-*`. No restylean #app, aside, header.top ni #login.
 * Viven en @layer ice-ui: el CSS sin capa del shell (login, MSAL,
 * formularios BC y su tema oscuro histórico) sigue ganando.
 *
 * Uso: añadir las clases al piloto. Para cromo half-dark, marcar el
 * raíz con data-ice-theme="half-dark" y usar .ice-shell-*.
 */

@layer ice-tokens, ice-ui;

@layer ice-ui {

/* ===== MOTION ===== */
@keyframes iceRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes iceBarGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.ice-rise {
  animation: iceRise var(--dur-rise) var(--ease) both;
}
.ice-stagger > * {
  animation: iceRise var(--dur-rise) var(--ease) both;
}
.ice-stagger > *:nth-child(1) { animation-delay: 0ms; }
.ice-stagger > *:nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.ice-stagger > *:nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.ice-stagger > *:nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.ice-stagger > *:nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.ice-stagger > *:nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
.ice-stagger > *:nth-child(7) { animation-delay: calc(var(--stagger) * 6); }
.ice-stagger > *:nth-child(8) { animation-delay: calc(var(--stagger) * 7); }

.ice-bar-grow {
  transform-origin: left center;
  animation: iceBarGrow var(--dur-rise) var(--ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .ice-rise,
  .ice-stagger > *,
  .ice-bar-grow { animation: none; }
}

/* ===== SHELL (stubs opt-in; no sustituyen #app) ===== */
.ice-shell {
  display: grid;
  grid-template-columns: 256px 1fr;
  grid-template-rows: 62px 1fr;
  grid-template-areas: "side top" "side main";
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
}
.ice-shell-sidebar {
  grid-area: side;
  background: linear-gradient(180deg, var(--ice-chrome-bg) 0%, var(--ice-chrome-deep) 100%);
  color: var(--ice-chrome-ink);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  position: relative;
}
.ice-shell-sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(440px 260px at 0% 0%, rgba(12, 178, 171, .13), transparent 60%),
    radial-gradient(440px 320px at 100% 100%, rgba(79, 174, 50, .10), transparent 60%);
}
.ice-shell-top {
  grid-area: top;
  background: var(--ice-chrome-bg);
  color: var(--ice-chrome-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 0 var(--space-7);
}
.ice-shell-main {
  grid-area: main;
  overflow: auto;
  padding: var(--space-8) var(--space-9) var(--space-10);
}
@media (max-width: 900px) {
  .ice-shell { grid-template-columns: 0 1fr; }
  .ice-shell-sidebar { position: fixed; z-index: 60; width: 262px; height: 100%; }
}

/* ===== KPI STRIP ===== */
.ice-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-6);
}
@media (max-width: 1100px) { .ice-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .ice-kpi-strip { grid-template-columns: 1fr; } }

.ice-kpi {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-7) var(--space-7) var(--space-8);
  box-shadow: var(--shadow);
  transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur);
}
.ice-kpi:hover {
  transform: translateY(-3px);
  border-color: rgba(12, 178, 171, .4);
}
.ice-kpi-lbl {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: var(--fw-700);
  letter-spacing: .3px;
  text-transform: uppercase;
}
.ice-kpi-val,
.ice-kpi .val {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-kpi);
  font-weight: var(--fw-800);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--ink);
  margin-top: var(--space-3);
  font-variant-numeric: tabular-nums;
}
.ice-kpi-delta {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 650;
  margin-top: var(--space-2);
  color: var(--muted);
}
.ice-kpi-delta.is-up { color: var(--green-d); }
.ice-kpi-delta.is-down { color: var(--red); }

/* ===== HERO METRIC ===== */
.ice-hero-metric {
  font-family: var(--font-mono);
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ice-hero {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-9) var(--space-8);
  box-shadow: var(--shadow);
}
.ice-hero-lbl {
  font-size: var(--fs-xs);
  font-weight: var(--fw-800);
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: var(--space-3);
}

/* ===== DISPLAY TYPE ===== */
.ice-display {
  font-family: var(--font);
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--navy);
}

/* ===== BOTONES ===== */
.ice-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 8px 14px;
  min-height: 36px;
  font-size: 12.5px;
  font-weight: var(--fw-700);
  font-family: inherit;
  line-height: var(--lh-tight);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink2);
  background: var(--panel);
  transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.ice-btn:hover { transform: translateY(-1px); }
.ice-btn:active { transform: none; }
.ice-btn:disabled,
.ice-btn[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.ice-btn--primary {
  background: linear-gradient(135deg, var(--ice-cta-from), var(--teal) 48%, var(--ice-cta-to));
  color: #fff;
  box-shadow: 0 6px 18px rgba(12, 178, 171, .32);
}
.ice-btn--primary:hover { box-shadow: 0 10px 24px rgba(12, 178, 171, .42); }
.ice-btn--green,
.ice-btn.b-green {
  background: linear-gradient(135deg, var(--green), #3f9a28);
  color: #fff;
  box-shadow: 0 3px 10px rgba(79, 174, 50, .25);
}
.ice-btn--green:hover,
.ice-btn.b-green:hover { box-shadow: 0 6px 16px rgba(79, 174, 50, .35); }
.ice-btn--navy,
.ice-btn.b-navy {
  background: linear-gradient(135deg, var(--navy), var(--navy2));
  color: #fff;
}
.ice-btn--navy:hover,
.ice-btn.b-navy:hover { box-shadow: 0 6px 16px rgba(24, 37, 64, .3); }
.ice-btn--ghost,
.ice-btn.b-ghost {
  background: var(--panel);
  color: var(--ink2);
  border-color: var(--line);
}
.ice-btn--ghost:hover,
.ice-btn.b-ghost:hover { border-color: #c0cedd; }
.ice-btn--danger {
  background: #fff5f4;
  color: #a53631;
  border-color: #f3d3d3;
}
.ice-btn--danger:hover { background: #ffeceb; }

/* ===== CHIPS ===== */
.ice-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: var(--fw-700);
  padding: 3.5px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1.3;
}
.ice-chip--ok,
.ice-chip.c-ok { background: #e7f6ea; color: #2f8f42; border-color: #d2ecd8; }
.ice-chip--info,
.ice-chip.c-info { background: #e7f0fb; color: #2f6fd0; border-color: #d5e4f7; }
.ice-chip--warn,
.ice-chip.c-warn { background: #fbf1e0; color: #b7791f; border-color: #f3e3c4; }
.ice-chip--red,
.ice-chip.c-red { background: #fbe7e7; color: #c0392b; border-color: #f3d3d3; }
.ice-chip--mut,
.ice-chip.c-mut { background: #eef2f6; color: #67788a; border-color: #e2e9f0; }
.ice-chip--teal,
.ice-chip.c-teal { background: #e2f5f3; color: #1f8e86; border-color: #cdebe8; }

/* ===== STATUS DOTS ===== */
.ice-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs);
  font-weight: var(--fw-700);
  color: var(--ink2);
  line-height: 1.2;
}
.ice-status::before,
.ice-status-dot {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}
.ice-status--ok::before,
.ice-status--ok .ice-status-dot {
  background: var(--green);
  box-shadow: 0 0 8px rgba(79, 174, 50, .75);
}
.ice-status--warn::before,
.ice-status--warn .ice-status-dot { background: var(--amber); }
.ice-status--danger::before,
.ice-status--danger .ice-status-dot { background: var(--red); }
.ice-status--info::before,
.ice-status--info .ice-status-dot { background: var(--teal); }

/* ===== CARDS ===== */
.ice-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: box-shadow var(--dur), border-color var(--dur);
}
.ice-card:hover { border-color: #cfdbe8; box-shadow: 0 2px 4px rgba(16, 35, 51, .04), 0 12px 28px rgba(16, 35, 51, .08); }
.ice-card h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-700);
  color: var(--navy);
  margin-bottom: var(--space-4);
}

/* ===== TABLAS ===== */
.ice-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--card);
}
.ice-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs);
}
.ice-table th {
  text-align: left;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  font-weight: var(--fw-800);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.ice-table td {
  padding: 11px 10px;
  border-bottom: 1px solid #f0f4f7;
  vertical-align: middle;
}
.ice-table tr:last-child td { border-bottom: none; }
.ice-table .trow,
.ice-table tbody tr { transition: background 120ms; }
.ice-table .trow:hover,
.ice-table tbody tr:hover { background: #f4f8fb; }

/* ===== BARRA ===== */
.ice-bar {
  height: 8px;
  background: rgba(16, 35, 51, .08);
  border-radius: 6px;
  overflow: hidden;
}
.ice-bar > i,
.ice-bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--green), var(--teal));
  border-radius: 6px;
  transform-origin: left center;
}

/* ===== VACÍO / NOTA ===== */
.ice-empty {
  border: 1px dashed var(--line);
  background: var(--panel);
  border-radius: 12px;
  padding: 14px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: var(--lh);
}
.ice-empty--note,
.ice-note {
  background: var(--panel);
  border: 0;
  border-left: 3px solid var(--teal);
  border-radius: 10px;
  padding: 11px 13px;
  font-size: 12.5px;
  color: var(--ink2);
}
.ice-empty--ok,
.ice-note.g { border-left-color: var(--green); }
.ice-empty--warn,
.ice-note.w { border-left-color: var(--amber); }
.ice-empty--danger {
  border-style: solid;
  border-color: #e3b8b2;
  background: #fff3f1;
  color: #9b3a31;
}

/* ===== DARK: ajustes de superficies hardcodeadas ===== */
[data-ice-theme="dark"] .ice-chip--ok,
.ice-theme-dark .ice-chip--ok,
[data-ice-theme="dark"] .ice-chip.c-ok,
.ice-theme-dark .ice-chip.c-ok {
  background: rgba(79, 174, 50, .16); color: #8fd67a; border-color: rgba(79, 174, 50, .28);
}
[data-ice-theme="dark"] .ice-chip--info,
.ice-theme-dark .ice-chip--info {
  background: rgba(59, 130, 246, .16); color: #9ec0ff; border-color: rgba(59, 130, 246, .28);
}
[data-ice-theme="dark"] .ice-chip--warn,
.ice-theme-dark .ice-chip--warn {
  background: rgba(232, 161, 58, .16); color: #f0c27a; border-color: rgba(232, 161, 58, .28);
}
[data-ice-theme="dark"] .ice-chip--red,
.ice-theme-dark .ice-chip--red {
  background: rgba(224, 90, 90, .16); color: #f2a0a0; border-color: rgba(224, 90, 90, .28);
}
[data-ice-theme="dark"] .ice-chip--mut,
.ice-theme-dark .ice-chip--mut {
  background: rgba(255, 255, 255, .06); color: #9aafc0; border-color: rgba(255, 255, 255, .1);
}
[data-ice-theme="dark"] .ice-chip--teal,
.ice-theme-dark .ice-chip--teal {
  background: rgba(12, 178, 171, .16); color: #7ee0da; border-color: rgba(12, 178, 171, .28);
}
[data-ice-theme="dark"] .ice-table td,
.ice-theme-dark .ice-table td { border-bottom-color: rgba(219, 230, 239, .08); }
[data-ice-theme="dark"] .ice-table .trow:hover,
[data-ice-theme="dark"] .ice-table tbody tr:hover,
.ice-theme-dark .ice-table .trow:hover,
.ice-theme-dark .ice-table tbody tr:hover { background: rgba(255, 255, 255, .04); }
[data-ice-theme="dark"] .ice-btn--danger,
.ice-theme-dark .ice-btn--danger {
  background: rgba(224, 90, 90, .12); color: #f2a0a0; border-color: rgba(224, 90, 90, .28);
}
[data-ice-theme="dark"] .ice-display,
.ice-theme-dark .ice-display { color: var(--ink); }
[data-ice-theme="dark"] .ice-card h3,
.ice-theme-dark .ice-card h3 { color: var(--ink); }
[data-ice-theme="dark"] .ice-empty--danger,
.ice-theme-dark .ice-empty--danger {
  border-color: rgba(224, 90, 90, .35);
  background: rgba(224, 90, 90, .1);
  color: #f2a0a0;
}

}