/* ============================================================
   Llamadas-IA · Sistema de diseño
   - brand (azul corporativo #305485): identidad, navegación, KPIs neutros
   - accent (naranja #f97316): atención, CTAs primarias, métricas activas
   ============================================================ */

.nav-link.active {
    background-color: rgba(48, 84, 133, 0.3);
    color: #fff;
}

/* ----------- Sidebar grupos colapsables --------------------- */
.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(196, 218, 255, 0.85);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background-color 120ms, color 120ms;
}
.nav-group-toggle:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.nav-group.is-open > .nav-group-toggle {
    color: #fff;
}
.nav-group.is-open > .nav-group-toggle .nav-group-chevron {
    transform: rotate(180deg);
}
.nav-group-body {
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    margin-left: 0.5rem;
}
/* Indicador discreto cuando un grupo colapsado contiene la página activa */
.nav-group.has-active:not(.is-open) > .nav-group-toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: #f97316;
    margin-left: auto;
}

/* Scrollbar fino para el menú lateral (sólo Webkit/Blink) */
.sidebar-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}
.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
}
.sidebar-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
}
.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.32);
}

.fade-in {
    animation: fadeIn 0.2s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ----------- Status badges (semántica unificada) ------------
   Naranja  -> requiere atención / en proceso / pendiente acción humana
   Verde    -> éxito / cerrado positivamente
   Rojo     -> error / fallo / crítico
   Azul     -> neutral / informativo
   Gris     -> archivado / sin actividad
   ------------------------------------------------------------ */

/* atención / en proceso */
.status-activa,
.status-pending,
.status-pendiente,
.status-in_progress,
.status-syncing,
.status-started,
.status-queued,
.status-refreshing_in_progress { background-color: #ffedd5; color: #9a3412; }

/* éxito */
.status-resuelta,
.status-resolved,
.status-synced,
.status-complete,
.status-completed,
.status-ended { background-color: #d1fae5; color: #065f46; }

/* error / fallo */
.status-error,
.status-failed,
.status-cancelled { background-color: #fee2e2; color: #991b1b; }

/* archivado */
.status-removed { background-color: #e5e7eb; color: #4b5563; }

input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(48, 84, 133, 0.15);
}

table th {
    position: sticky;
    top: 0;
    background: white;
    z-index: 1;
}

/* ----------- Utilidades de página (compactas y consistentes) ------------ */

/* Encabezado de página: más fino que antes (text-2xl en vez de text-3xl) */
.page-header h1 {
    font-size: 1.5rem;        /* 24px */
    line-height: 2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.25rem;
}
.page-header p {
    color: #4b5563;
    font-size: 0.875rem;
}

/* KPI card: padding compacto, hover acento */
.kpi-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 1rem;
    transition: box-shadow .15s, border-color .15s;
}
.kpi-card:hover { box-shadow: 0 4px 12px -2px rgba(0,0,0,.06); border-color: #d1d5db; }
.kpi-card .kpi-label { font-size: 0.75rem; color: #6b7280; font-weight: 500; text-transform: uppercase; letter-spacing: .025em; margin-bottom: 0.25rem; }
.kpi-card .kpi-value { font-size: 1.5rem; line-height: 2rem; font-weight: 700; color: #111827; }
.kpi-card .kpi-sub   { font-size: 0.75rem; color: #6b7280; margin-top: 0.125rem; }

/* KPI card destacada (accent): para métricas activas que requieren mirada */
.kpi-card-accent {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fed7aa;
}
.kpi-card-accent .kpi-value { color: #9a3412; }
.kpi-card-accent .kpi-label { color: #c2410c; }

/* KPI card de alerta (alarmas, fallos): naranja oscuro con pulse sutil */
.kpi-card-alert {
    background: #fff7ed;
    border: 1px solid #fdba74;
}
.kpi-card-alert .kpi-value { color: #c2410c; font-weight: 800; }
.kpi-card-alert .kpi-label { color: #9a3412; }

/* Contador "badge" naranja (sidebar, headers) */
.badge-count-accent {
    background: #f97316;
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.125rem 0.4rem;
    border-radius: 9999px;
    line-height: 1;
    min-width: 1.25rem;
    text-align: center;
    display: inline-block;
}

/* Punto pulsante para indicar "vivo / en proceso" */
.dot-pulse {
    width: 8px; height: 8px; border-radius: 9999px;
    background: #f97316;
    box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.6);
    animation: dotPulse 1.6s infinite;
    display: inline-block;
}
@keyframes dotPulse {
    0%   { box-shadow: 0 0 0 0   rgba(249,115,22,0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(249,115,22,0);   }
    100% { box-shadow: 0 0 0 0   rgba(249,115,22,0);   }
}

/* Botón CTA primario (acciones importantes que abren formularios o lanzan acciones) */
.btn-accent {
    background: #f97316;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-accent:hover { background: #ea580c; }

/* Botón secundario (azul brand, mantiene estética actual) */
.btn-primary {
    background: #294872;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background .15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.btn-primary:hover { background: #1b2e48; }

/* ----------- Tooltip IA (sin cambios) ------------ */

@keyframes pulse {
    from { height: 20%; opacity: 0.3; }
    to { height: 100%; opacity: 0.8; }
}

.ai-tooltip {
    cursor: help;
}

#ai-tooltip-container {
    position: fixed;
    background: linear-gradient(135deg, #305485 0%, #1b2e48 100%);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-line;
    max-width: 320px;
    min-width: 280px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
    z-index: 99999;
    font-weight: 500;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

#ai-tooltip-container.show {
    opacity: 1;
    transform: translateY(0);
}

#ai-tooltip-container::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1b2e48;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(-8px);
    }
}

/* ===========================================================
   CALENDARIO LABORAL
   =========================================================== */

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}
.calendar-cell {
    min-height: 86px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 8px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    display: flex;
    flex-direction: column;
}
.calendar-cell:hover {
    border-color: #fb923c;
    background: #fff7ed;
}
.calendar-cell.outside {
    background: #f9fafb;
    color: #9ca3af;
    cursor: default;
}
.calendar-cell.outside:hover {
    border-color: #e5e7eb;
    background: #f9fafb;
}
.calendar-cell.weekend {
    background: #f3f4f6;
}
.calendar-cell.today {
    border: 2px solid #305485;
    box-shadow: 0 0 0 1px rgba(48,84,133,0.15);
}
.calendar-cell .cell-day {
    font-weight: 600;
    font-size: 0.85rem;
    color: #1f2937;
    margin-bottom: 4px;
}
.calendar-cell.outside .cell-day {
    color: #9ca3af;
}
.calendar-cell .cell-tag {
    font-size: 0.65rem;
    line-height: 1.1;
    padding: 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    align-self: flex-start;
}
.calendar-cell .cell-name {
    font-size: 0.7rem;
    line-height: 1.2;
    color: #4b5563;
    margin-top: 2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Tipos de día */
.cell-type-holiday_national { background: #fef2f2; border-color: #fecaca; }
.cell-type-holiday_national .cell-tag { background: #fee2e2; color: #b91c1c; }
.cell-type-holiday_regional { background: #fff7ed; border-color: #fed7aa; }
.cell-type-holiday_regional .cell-tag { background: #ffedd5; color: #c2410c; }
.cell-type-holiday_local { background: #fefce8; border-color: #fde68a; }
.cell-type-holiday_local .cell-tag { background: #fef3c7; color: #a16207; }
.cell-type-company_closure { background: #f5f3ff; border-color: #ddd6fe; }
.cell-type-company_closure .cell-tag { background: #ede9fe; color: #6d28d9; }
.cell-type-special_hours { background: #ecfeff; border-color: #a5f3fc; }
.cell-type-special_hours .cell-tag { background: #cffafe; color: #0e7490; }
.cell-type-working_day { background: #f0fdf4; border-color: #bbf7d0; }
.cell-type-working_day .cell-tag { background: #dcfce7; color: #15803d; }

.legend-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid;
}
.legend-pill .swatch { width: 10px; height: 10px; border-radius: 3px; }

.office-status-open { background: #dcfce7; color: #15803d; }
.office-status-closed { background: #fee2e2; color: #b91c1c; }

/* Estados de periodos de facturación */
.billing-status-open            { background: #dbeafe; color: #1d4ed8; }
.billing-status-open_unclosed   { background: #fef3c7; color: #b45309; }
.billing-status-closed          { background: #e5e7eb; color: #374151; }
.billing-status-invoiced        { background: #fef3c7; color: #92400e; }
.billing-status-paid            { background: #dcfce7; color: #15803d; }

/* ===========================================================
   RESPONDIA v1 · Aplicación de tokens
   -----------------------------------------------------------
   tokens.css define las variables. Aquí las aplicamos al body
   y a los componentes nuevos. Los componentes legacy siguen
   con clases brand-*/accent-* hasta su migración.
   =========================================================== */
body {
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

code, pre, .font-mono, kbd, samp {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums slashed-zero;
}

/* Cifras: KPIs, columnas numéricas y duraciones siempre con tabular nums.
   Evita el "salto" tipográfico durante los tickers de GSAP. */
.kpi-card .kpi-value,
.kpi-value-xl,
td.col-num,
.tabular-nums {
    font-variant-numeric: tabular-nums slashed-zero;
    font-feature-settings: "tnum" 1, "ss01" 1;
}

/* ----------- Componentes nuevos · Cockpit -------------------- */

/* Métrica gigante (display) usada en hero del dashboard y cockpit */
.kpi-value-xl {
    font-family: var(--font-display);
    font-size: 56px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.035em;
    color: var(--ink);
}

/* Sparkline contenedor (svg path se anima con GSAP) */
.spark {
    display: block;
    width: 100%;
    height: 36px;
    overflow: visible;
}
.spark path { fill: none; stroke: var(--brand); stroke-width: 1.5; }
.spark .spark-fill { fill: oklch(0.42 0.09 255 / 0.08); stroke: none; }
.spark .spark-dot  { fill: var(--signal); }

/* Punto live (versión "premium" del .dot-pulse legacy) */
.live-dot {
    width: 8px; height: 8px; border-radius: 9999px;
    background: var(--signal);
    box-shadow: 0 0 0 0 oklch(0.7 0.17 55 / 0.45);
    animation: livePulse 1.6s cubic-bezier(0.4,0,0.6,1) infinite;
    display: inline-block;
}
@keyframes livePulse {
    0%   { box-shadow: 0 0 0 0   oklch(0.7 0.17 55 / 0.45); }
    70%  { box-shadow: 0 0 0 10px oklch(0.7 0.17 55 / 0); }
    100% { box-shadow: 0 0 0 0   oklch(0.7 0.17 55 / 0); }
}

/* Onda de actividad (waveform sintético para "llamada en curso") */
.waveform {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 18px;
}
.waveform > span {
    display: block;
    width: 2px;
    background: var(--signal);
    border-radius: 2px;
    height: 30%;
    animation: waveBar 1.1s ease-in-out infinite;
    opacity: 0.85;
}
.waveform > span:nth-child(1) { animation-delay: -1.0s; }
.waveform > span:nth-child(2) { animation-delay: -0.8s; }
.waveform > span:nth-child(3) { animation-delay: -0.6s; }
.waveform > span:nth-child(4) { animation-delay: -0.4s; }
.waveform > span:nth-child(5) { animation-delay: -0.2s; }
@keyframes waveBar {
    0%, 100% { height: 25%; }
    50%      { height: 95%; }
}

/* Embudo: barras horizontales para placed → answered → transferred */
.funnel-step {
    display: grid;
    grid-template-columns: 160px 1fr 96px;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}
.funnel-step:last-child { border-bottom: 0; }
.funnel-step .funnel-label { color: var(--ink-2); font-size: var(--t-sm); font-weight: 500; }
.funnel-step .funnel-bar {
    position: relative;
    background: var(--bg-sunken);
    border-radius: 9999px;
    height: 10px;
    overflow: hidden;
}
.funnel-step .funnel-bar > .fill {
    position: absolute; inset: 0 auto 0 0;
    background: linear-gradient(90deg, var(--brand) 0%, var(--signal) 100%);
    border-radius: 9999px;
    width: 0;
    transition: width var(--d-slow) cubic-bezier(0.2,0.8,0.2,1);
}
.funnel-step .funnel-value {
    text-align: right;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
}
.funnel-step .funnel-value small { color: var(--ink-3); font-weight: 500; margin-left: 4px; }

/* Card "premium": misma estructura que kpi-card pero hairline + tipografía Inter Tight */
.card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    padding: 16px;
    box-shadow: var(--elev-1);
    transition: box-shadow 160ms, border-color 160ms;
}
.card:hover { box-shadow: var(--elev-2); }
.card-title {
    font-family: var(--font-ui);
    font-size: var(--t-md);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em;
    margin: 0 0 8px 0;
}
.card-eyebrow {
    font-family: var(--font-ui);
    font-size: var(--t-eyebrow);
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: 6px;
    display: block;
}

/* Reveal-on-scroll baseline (animations.js añade .is-in para activar) */
.reveal {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--d-slow) ease, transform var(--d-slow) ease;
    will-change: transform, opacity;
}
.reveal.is-in {
    opacity: 1;
    transform: translateY(0);
}

/* ===========================================================
   RESPONDIA v1 · Fase 2 · Header de página
   -----------------------------------------------------------
   Refinamiento de .page-header con eyebrow, h1 más fina con
   Inter Tight, y subtítulo que respira. Compatible con el
   .page-header heredado (no rompe páginas viejas).
   =========================================================== */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
}
.page-header > div:first-child { min-width: 0; flex: 1; }
.page-header h1 {
    font-family: var(--font-ui);
    font-size: 26px;
    line-height: 1.15;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 4px 0;
}
.page-header p {
    color: var(--ink-3);
    font-size: 13.5px;
    line-height: 1.45;
    margin: 0;
}
.page-header .eyebrow {
    font-family: var(--font-ui);
    font-size: var(--t-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--ink-4);
    margin-bottom: 4px;
    display: block;
}
.page-header .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.page-header .clock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--bg-sunken);
    border: 1px solid var(--line);
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.page-header .clock::before {
    content: "";
    width: 6px; height: 6px; border-radius: 9999px;
    background: var(--ok);
    box-shadow: 0 0 0 3px oklch(0.62 0.13 155 / 0.15);
}

/* ===========================================================
   RESPONDIA v1 · Fase 3 · Hero del dashboard
   -----------------------------------------------------------
   Bloque grande para la página principal. Métrica display +
   sub-métricas alineadas + cockpit live a la derecha.
   =========================================================== */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
    background: linear-gradient(180deg, var(--bg) 0%, var(--bg-sunken) 100%);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    padding: 22px 24px;
    margin-bottom: 18px;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }

.hero-stack {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}
.hero-eyebrow {
    font-family: var(--font-ui);
    font-size: var(--t-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.hero-display {
    font-family: var(--font-display);
    font-size: clamp(48px, 6vw, 72px);
    line-height: 0.98;
    letter-spacing: -0.04em;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums slashed-zero;
}
.hero-sub {
    color: var(--ink-3);
    font-size: 13.5px;
    margin-top: 6px;
}
.hero-meta {
    display: flex;
    gap: 28px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.hero-meta .meta-item .meta-label {
    font-size: var(--t-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    font-weight: 600;
    margin-bottom: 2px;
}
.hero-meta .meta-item .meta-value {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.hero-meta .meta-item .meta-value.is-positive { color: var(--ok); }
.hero-meta .meta-item .meta-value.is-warn     { color: var(--warn); }

/* Cockpit (mini panel live a la derecha del hero) */
.cockpit {
    background: var(--ink);
    border-radius: var(--r-3);
    padding: 18px;
    color: oklch(0.96 0.005 260);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 160px;
    position: relative;
    overflow: hidden;
}
.cockpit::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top right, oklch(0.7 0.17 55 / 0.18), transparent 60%),
        radial-gradient(ellipse at bottom left, oklch(0.42 0.09 255 / 0.25), transparent 65%);
    pointer-events: none;
}
.cockpit > * { position: relative; z-index: 1; }
.cockpit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cockpit-eyebrow {
    font-size: var(--t-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: oklch(0.75 0.02 260);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.cockpit-eyebrow .live-dot { background: var(--signal); }
.cockpit-time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: oklch(0.7 0.02 260);
    font-variant-numeric: tabular-nums;
}
.cockpit-big {
    font-family: var(--font-display);
    font-size: 64px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: -0.04em;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.cockpit-big small {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 500;
    color: oklch(0.75 0.02 260);
    margin-left: 8px;
    letter-spacing: 0;
}
.cockpit-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    color: oklch(0.78 0.02 260);
    font-size: 12px;
}
.cockpit-foot .waveform > span { background: var(--signal); }

/* ===========================================================
   RESPONDIA v1 · Fase 4 · Tablas premium
   -----------------------------------------------------------
   Hairline minimalista, header sticky con backdrop, hover sutil,
   tabular nums por columna, padding consistente. No agresivo:
   las tablas que no añadan .table-premium siguen como están.
   =========================================================== */
.table-premium {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg);
    border-radius: var(--r-3);
    overflow: hidden;
    border: 1px solid var(--line);
}
.table-premium thead th {
    background: var(--bg-sunken);
    color: var(--ink-3);
    font-family: var(--font-ui);
    font-size: var(--t-eyebrow);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 1;
    backdrop-filter: saturate(160%) blur(6px);
    -webkit-backdrop-filter: saturate(160%) blur(6px);
}
.table-premium tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 13.5px;
    line-height: 1.4;
    vertical-align: middle;
}
.table-premium tbody tr:last-child td { border-bottom: 0; }
.table-premium tbody tr {
    transition: background-color var(--d-fast) ease;
}
.table-premium tbody tr:hover { background-color: var(--brand-soft); }
.table-premium .col-num,
.table-premium td.num,
.table-premium th.num { text-align: right; font-variant-numeric: tabular-nums slashed-zero; }
.table-premium .col-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Estado vacío de tabla (no rows). */
.table-empty {
    text-align: center;
    padding: 36px 16px;
    color: var(--ink-4);
    font-size: 13px;
}
.table-empty strong { display: block; color: var(--ink-2); margin-bottom: 4px; font-weight: 600; }

/* ===========================================================
   RESPONDIA v1 · Fase 4 · Badges semánticos premium
   -----------------------------------------------------------
   No reemplaza los .status-* legacy: añade un set premium
   `.b-*` con tipografía Inter Tight + tabular nums + dot.
   =========================================================== */
.b {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-family: var(--font-ui);
    font-size: 11.5px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    white-space: nowrap;
}
.b::before {
    content: "";
    width: 6px; height: 6px; border-radius: 9999px;
    background: currentColor;
    flex-shrink: 0;
    opacity: 0.9;
}
.b-ok    { color: oklch(0.4 0.13 155); background: var(--ok-soft);     border-color: oklch(0.86 0.06 155); }
.b-warn  { color: oklch(0.4 0.15 75);  background: var(--warn-soft);   border-color: oklch(0.86 0.08 80); }
.b-err   { color: oklch(0.4 0.18 25);  background: var(--err-soft);    border-color: oklch(0.86 0.07 25); }
.b-info  { color: var(--brand-ink);    background: var(--brand-soft);  border-color: oklch(0.86 0.04 255); }
.b-mute  { color: var(--ink-3);        background: var(--bg-sunken);   border-color: var(--line); }
.b-live  { color: oklch(0.4 0.17 55);  background: var(--signal-soft); border-color: oklch(0.85 0.1 60); }
.b-live::before {
    background: var(--signal);
    box-shadow: 0 0 0 0 oklch(0.7 0.17 55 / 0.45);
    animation: livePulse 1.6s cubic-bezier(0.4,0,0.6,1) infinite;
}

/* ===========================================================
   RESPONDIA v1 · Fase 5 · Formularios premium
   -----------------------------------------------------------
   Input/select/textarea coherentes. No invade los formularios
   existentes que usan clases tailwind explícitas; sólo aplica
   por defecto a los que no las tengan, o a los marcados con
   .field-premium.
   =========================================================== */
.field-premium label,
.field-premium .field-label {
    display: block;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-2);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}
.field-premium input[type="text"],
.field-premium input[type="email"],
.field-premium input[type="tel"],
.field-premium input[type="password"],
.field-premium input[type="number"],
.field-premium input[type="search"],
.field-premium input[type="url"],
.field-premium input[type="date"],
.field-premium input[type="time"],
.field-premium input[type="datetime-local"],
.field-premium select,
.field-premium textarea,
input.input-premium,
select.input-premium,
textarea.input-premium {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    padding: 9px 12px;
    font-family: var(--font-ui);
    font-size: 14px;
    color: var(--ink);
    line-height: 1.4;
    transition: border-color var(--d-fast), box-shadow var(--d-fast), background-color var(--d-fast);
    box-shadow: var(--elev-1);
}
.field-premium input::placeholder,
.field-premium textarea::placeholder,
input.input-premium::placeholder,
textarea.input-premium::placeholder {
    color: var(--ink-4);
}
.field-premium input:focus,
.field-premium select:focus,
.field-premium textarea:focus,
input.input-premium:focus,
select.input-premium:focus,
textarea.input-premium:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px oklch(0.42 0.09 255 / 0.18);
}
.field-premium .field-help {
    font-size: 11.5px;
    color: var(--ink-4);
    margin-top: 4px;
    line-height: 1.4;
}
.field-premium .field-error {
    font-size: 12px;
    color: var(--err);
    margin-top: 4px;
    line-height: 1.4;
}

/* Botones premium (no rompen .btn-primary/.btn-accent legacy) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-2);
    font-family: var(--font-ui);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.005em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 80ms ease, background-color var(--d-fast), border-color var(--d-fast), box-shadow var(--d-fast), color var(--d-fast);
    user-select: none;
    text-decoration: none;
}
.btn:active { transform: scale(0.985); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px oklch(0.42 0.09 255 / 0.25); }

.btn-brand {
    background: var(--brand);
    color: #fff;
    box-shadow: var(--elev-2);
}
.btn-brand:hover { background: var(--brand-ink); }

.btn-signal {
    background: var(--signal);
    color: oklch(0.2 0.02 60);
    box-shadow: var(--elev-2);
}
.btn-signal:hover { background: oklch(0.65 0.18 50); color: #fff; }

.btn-ghost {
    background: transparent;
    color: var(--ink-2);
    border-color: var(--line);
}
.btn-ghost:hover { background: var(--bg-sunken); color: var(--ink); border-color: var(--ink-5); }

.btn-danger {
    background: var(--err);
    color: #fff;
}
.btn-danger:hover { background: oklch(0.5 0.19 25); }

.btn[aria-busy="true"] { opacity: 0.7; pointer-events: none; }

/* ===========================================================
   RESPONDIA v1 · Fase 4 extendida · Auto-upgrade de tablas
   y cards legacy (.bg-white.rounded-lg.border.border-gray-200)
   -----------------------------------------------------------
   El JS legacy genera mucho HTML con ese patrón Tailwind. En
   lugar de reescribir cada Pages.* uno a uno, mejoramos
   visualmente todo lo que ya existe haciendo override fino.
   =========================================================== */

/* Cards legacy: tipografía y border-color a tokens. */
.bg-white.rounded-lg.border.border-gray-200,
.bg-white.rounded-lg.shadow-sm.border.border-gray-200 {
    border-color: var(--line) !important;
    background: var(--bg) !important;
    box-shadow: var(--elev-1);
}
.bg-white.rounded-lg.border.border-gray-200:hover,
.bg-white.rounded-lg.shadow-sm.border.border-gray-200:hover {
    box-shadow: var(--elev-2);
}

/* Tablas legacy con thead bg-gray-50: aplicamos la estética premium
   sólo a las que están dentro de cards (no rompemos ningún caso aislado). */
.bg-white.rounded-lg.border.border-gray-200 table thead tr,
.bg-white.rounded-lg.shadow-sm.border.border-gray-200 table thead tr,
.bg-white.rounded-lg.border.border-gray-200 table thead th,
.bg-white.rounded-lg.shadow-sm.border.border-gray-200 table thead th {
    background: var(--bg-sunken) !important;
    color: var(--ink-3) !important;
    font-family: var(--font-ui);
    letter-spacing: 0.05em;
}
.bg-white.rounded-lg.border.border-gray-200 table tbody td,
.bg-white.rounded-lg.shadow-sm.border.border-gray-200 table tbody td {
    color: var(--ink);
    border-color: var(--line);
}
.bg-white.rounded-lg.border.border-gray-200 table tbody tr:hover td,
.bg-white.rounded-lg.shadow-sm.border.border-gray-200 table tbody tr:hover td {
    background-color: var(--brand-soft);
}

/* ===========================================================
   RESPONDIA v1 · Fase 6 extra · Micro-animaciones globales
   -----------------------------------------------------------
   Page-enter sutil para la transición entre rutas.
   =========================================================== */
.page-enter {
    animation: pageEnter 280ms ease-out both;
}
@keyframes pageEnter {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Si el sistema operativo prefiere movimiento reducido, neutralizamos
   absolutamente todas las micro-animaciones del proyecto. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .live-dot { animation: none; box-shadow: 0 0 0 4px oklch(0.7 0.17 55 / 0.18); }
    .waveform > span { animation: none; height: 70%; }
}