/* WAYNA · CPUX T01 — base visual del Control Plane (solo el panel `platform`, dash.wayna.test; el panel del restaurante NO enlaza esta hoja).
   Misma familia de marca que el restaurante (azul Wayna, Manrope), con una identidad propia de PLATAFORMA: sidebar marino profundo y la insignia «Plataforma» para no confundir los dos planos.
   Todo color sale de tokens `--cp-*` definidos para claro y oscuro; nada de colores sueltos en los componentes. */
:root {
    --cp-primary: #0284c7;
    --cp-secondary: #38bdf8;
    --cp-ink: #0b1220;
    --cp-neutral: #64748b;

    --cp-bg: #f5f7fa;
    --cp-surface: #ffffff;
    --cp-surface-2: #f1f5f9;
    --cp-border: #e2e8f0;
    --cp-text: #0f172a;
    --cp-muted: #5b6b82;
    --cp-ring: #0284c7;

    --cp-tone-success-bg: #dcfce7; --cp-tone-success-fg: #166534; --cp-tone-success-solid: #16a34a;
    --cp-tone-attention-bg: #ffedd5; --cp-tone-attention-fg: #9a3412; --cp-tone-attention-solid: #ea580c;
    --cp-tone-danger-bg: #fee2e2; --cp-tone-danger-fg: #991b1b; --cp-tone-danger-solid: #dc2626;
    --cp-tone-info-bg: #e0f2fe; --cp-tone-info-fg: #075985; --cp-tone-info-solid: #0284c7;
    --cp-tone-neutral-bg: #f1f5f9; --cp-tone-neutral-fg: #334155; --cp-tone-neutral-solid: #64748b;

    --cp-radius: .75rem;
    --cp-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

:root.dark {
    --cp-bg: #0b1220;
    --cp-surface: #111a2c;
    --cp-surface-2: #172236;
    --cp-border: #243247;
    --cp-text: #e2e8f0;
    --cp-muted: #94a3b8;
    --cp-ring: #38bdf8;

    --cp-tone-success-bg: #14532d; --cp-tone-success-fg: #bbf7d0; --cp-tone-success-solid: #22c55e;
    --cp-tone-attention-bg: #7c2d12; --cp-tone-attention-fg: #fed7aa; --cp-tone-attention-solid: #fb923c;
    --cp-tone-danger-bg: #7f1d1d; --cp-tone-danger-fg: #fecaca; --cp-tone-danger-solid: #f87171;
    --cp-tone-info-bg: #0c4a6e; --cp-tone-info-fg: #bae6fd; --cp-tone-info-solid: #38bdf8;
    --cp-tone-neutral-bg: #1e293b; --cp-tone-neutral-fg: #cbd5e1; --cp-tone-neutral-solid: #94a3b8;
    --cp-shadow: none;
}

/* ---------- lienzo ---------- */
body.fi-body { background: var(--cp-bg); color: var(--cp-text); font-feature-settings: 'tnum' 1; }
.fi-main { padding-block: 1.5rem; }
.fi-header-heading { font-weight: 800; letter-spacing: -.01em; }
.fi-breadcrumbs-item-label { color: var(--cp-muted); }

/* ---------- sidebar de plataforma: marino profundo en claro, oscuro y sistema ---------- */
.fi-sidebar {
    --cp-sb-bg: #0b1220;
    --cp-sb-border: #1b2538;
    --cp-sb-text: #e2e8f0;
    --cp-sb-muted: #94a3b8;
    --cp-sb-group: #94a3b8;
    --cp-sb-icon: #94a3b8;
    --cp-sb-hover-bg: #16213a;
    --cp-sb-active-bg: #0c3a5c;
    --cp-sb-active-text: #ffffff;
    --cp-sb-active-icon: #38bdf8;
    background: var(--cp-sb-bg);
    border-inline-end: 1px solid var(--cp-sb-border);
    color: var(--cp-sb-text);
}
:root:root .fi-sidebar { background: var(--cp-sb-bg); border-inline-end-color: var(--cp-sb-border); }
:root:root .fi-sidebar .fi-sidebar-header { background: var(--cp-sb-bg); border-bottom: 1px solid var(--cp-sb-border); min-height: 4.5rem; }
:root:root .fi-sidebar .fi-sidebar-nav { background: var(--cp-sb-bg); scrollbar-color: #334155 transparent; }
.fi-sidebar .fi-sidebar-group-label { color: var(--cp-sb-group); font-weight: 700; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.fi-sidebar .fi-sidebar-group-collapse-button { color: var(--cp-sb-muted); }
.fi-sidebar .fi-sidebar-item-button { color: var(--cp-sb-text); border-radius: .5rem; min-height: 2.5rem; }
.fi-sidebar .fi-sidebar-item-label { color: var(--cp-sb-text); }
.fi-sidebar .fi-sidebar-item-icon { color: var(--cp-sb-icon); }
.fi-sidebar .fi-sidebar-item-button:hover, .fi-sidebar .fi-sidebar-item-button:focus-visible { background: var(--cp-sb-hover-bg); }
.fi-sidebar .fi-sidebar-item-button:focus-visible { outline: 2px solid var(--cp-secondary); outline-offset: -2px; }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button { background: var(--cp-sb-active-bg); box-shadow: inset 3px 0 0 var(--cp-secondary); }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-label { color: var(--cp-sb-active-text); font-weight: 600; }
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-button .fi-sidebar-item-icon { color: var(--cp-sb-active-icon); }

/* marca: logo + «Plataforma» */
.cp-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.cp-brand__logo { height: 4.5rem; width: auto; margin: -1rem -.75rem -1rem -1.25rem; filter: brightness(0) invert(1); flex: none; }
.cp-brand__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.cp-brand__name { max-width: 7.5rem; font-size: .8125rem; font-weight: 800; color: #ffffff; line-height: 1.15; }
.cp-brand__plane { display: inline-flex; width: max-content; margin-top: .25rem; padding: .0625rem .5rem; border-radius: 999px; background: var(--cp-tone-info-bg); color: var(--cp-tone-info-fg); font-size: .625rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- superficies: secciones, tablas, widgets ---------- */
.fi-section, .fi-ta-ctn, .fi-wi-stats-overview-stat { box-shadow: var(--cp-shadow); }
.fi-section, .fi-ta-ctn { border: 1px solid var(--cp-border); border-radius: var(--cp-radius); background: var(--cp-surface); }
.fi-wi-stats-overview-stat { border: 1px solid var(--cp-border); border-radius: var(--cp-radius); background: var(--cp-surface); padding: 1.125rem 1.25rem; }
.fi-wi-stats-overview-stat-label { color: var(--cp-muted); font-weight: 600; font-size: .8125rem; }
.fi-wi-stats-overview-stat-value { color: var(--cp-text); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.fi-wi-stats-overview-stat-description { font-size: .8125rem; font-weight: 600; }
.fi-wi-stats-overview .fi-section-header-heading, .fi-wi-stats-overview > div > .fi-section-header { font-weight: 700; }

.fi-ta-table thead tr { background: var(--cp-surface-2); }
.fi-ta-header-cell { background: var(--cp-surface-2); color: var(--cp-muted); font-size: .75rem; font-weight: 700; letter-spacing: .03em; }
.fi-ta-row { transition: background-color .12s ease; }
.fi-ta-row:hover { background: color-mix(in srgb, var(--cp-primary) 5%, var(--cp-surface)); }
.fi-ta-cell { color: var(--cp-text); }
.fi-ta-actions { white-space: nowrap; }
.fi-ta-empty-state { padding-block: 3rem; }
.fi-ta-empty-state-icon-ctn { background: var(--cp-tone-neutral-bg); }

/* insignias de estado: tonos por tokens, también en oscuro */
.fi-badge { font-weight: 700; letter-spacing: .01em; }
.cp-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .1875rem .625rem; border-radius: 999px; font-size: .75rem; font-weight: 700; line-height: 1.25; background: var(--cp-tone-neutral-bg); color: var(--cp-tone-neutral-fg); }
.cp-badge svg { width: .875rem; height: .875rem; flex: none; }
.cp-badge--success { background: var(--cp-tone-success-bg); color: var(--cp-tone-success-fg); }
.cp-badge--attention { background: var(--cp-tone-attention-bg); color: var(--cp-tone-attention-fg); }
.cp-badge--danger { background: var(--cp-tone-danger-bg); color: var(--cp-tone-danger-fg); }
.cp-badge--info { background: var(--cp-tone-info-bg); color: var(--cp-tone-info-fg); }

/* estado vacío y nota de página reutilizables */
.cp-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.5rem 1rem; text-align: center; color: var(--cp-muted); }
.cp-empty svg { width: 2.75rem; height: 2.75rem; color: var(--cp-neutral); }
.cp-empty__title { font-size: 1.0625rem; font-weight: 700; color: var(--cp-text); }
.cp-empty__hint { max-width: 32rem; font-size: .875rem; }
.cp-note { display: flex; gap: .625rem; align-items: flex-start; padding: .75rem 1rem; border: 1px solid var(--cp-border); border-radius: var(--cp-radius); background: var(--cp-surface); color: var(--cp-muted); font-size: .875rem; }
.cp-note svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--cp-tone-info-solid); }

/* accesibilidad: foco visible y movimiento reducido */
.fi-btn:focus-visible, .fi-icon-btn:focus-visible, .fi-link:focus-visible, .fi-ta-row a:focus-visible { outline: 3px solid var(--cp-ring); outline-offset: 2px; }
/* CPUX T03: el foco por teclado también se ve en el menú lateral, los pasos del asistente, las pestañas, la paginación y las acciones de fila. */
.fi-sidebar-item-button:focus-visible, .fi-sidebar-group-button:focus-visible, .fi-fo-wizard-header-step-button:focus-visible, .fi-tabs-item:focus-visible,
.fi-pagination-item-button:focus-visible, .fi-dropdown-list-item:focus-visible, .fi-ta-header-cell-sort-button:focus-visible, .fi-ta-actions a:focus-visible, .fi-ta-actions button:focus-visible { outline: 3px solid var(--cp-ring); outline-offset: -2px; }
.fi-sidebar-item-button:focus-visible, .fi-sidebar-group-button:focus-visible { outline-color: var(--cp-sb-active-text); }
/* CPUX T03: textos secundarios con contraste AA en claro y oscuro (migas de pan, marcadores «sin dato»). */
.fi-breadcrumbs-item-label, .fi-breadcrumbs-item-separator, .fi-ta-placeholder, :root.dark .fi-ta-placeholder { color: var(--cp-muted); }
/* CPUX T03: en oscuro el botón primario (texto blanco) usa un fondo más profundo para llegar a contraste AA. */
:root.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined) { background-color: rgb(var(--primary-600)); }
:root.dark .fi-btn.fi-color-primary:not(.fi-btn-outlined):hover { background-color: rgb(var(--primary-800)); }
/* CPUX T03: objetivos táctiles de las acciones de fila ≥ 28 px de alto (WCAG 2.5.8 pide mínimo 24 px). */
.fi-ta-actions .fi-link, .fi-ta-actions a.flex { min-height: 1.75rem; min-width: 1.75rem; align-items: center; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .fi-ta-row { transition: none; } }

/* ---------- responsive ---------- */
@media (max-width: 1023px) { .fi-main { padding-block: 1rem; } .fi-wi-stats-overview-stat { padding: 1rem; } }
@media (max-width: 639px) {
    /* CPUX T03: en teléfono las celdas se ajustan en varias líneas (Empresa · Plan · Estado quedan a la vista; Vigencia y Precio, a un deslizamiento dentro de la tabla). */
    .fi-ta-ctn .fi-ta-cell, .fi-ta-ctn .fi-ta-header-cell, .fi-ta-ctn .fi-ta-text-item, .fi-ta-ctn .fi-ta-text-item-description { white-space: normal; }
    .fi-wi-stats-overview-stats-ctn { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
    .fi-wi-stats-overview-stat { padding: .75rem .875rem; }
    .fi-header-heading { font-size: 1.5rem; }
    .fi-ta-ctn { border-radius: .625rem; }
    .cp-brand__logo { height: 4rem; }
}

/* CPUX T03: el asistente de alta (4 pasos) se lee COMPLETO entre 768 y 1279 px sin scroll horizontal: cada paso comparte el ancho y su descripción pasa a segundo plano. */
@media (min-width: 768px) and (max-width: 1279.98px) {
    .fi-fo-wizard-header { grid-auto-columns: minmax(0, 1fr); overflow-x: visible; }
    .fi-fo-wizard-header-step-button { padding-inline: .875rem; gap: .5rem; }
    .fi-fo-wizard-header-step-description { display: none; }
}

/* login del Control Plane: la marca sobre fondo claro */
.fi-simple-layout .cp-brand { justify-content: center; }
.fi-simple-layout .cp-brand__logo { filter: none; }
.fi-simple-layout .cp-brand__name { color: var(--cp-text); }

/* ---------- CPUX T02 · Dashboard: requiere atención y actividad reciente ---------- */
.cp-attn { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; margin-bottom: .5rem; border: 1px solid var(--cp-border); border-radius: .625rem; background: var(--cp-surface); color: var(--cp-text); text-decoration: none; transition: border-color .12s ease, background-color .12s ease; }
.cp-attn:last-child { margin-bottom: 0; }
.cp-attn:hover, .cp-attn:focus-visible { border-color: var(--cp-primary); background: var(--cp-surface-2); outline: none; }
.cp-attn__icon { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: .625rem; background: var(--cp-tone-neutral-bg); color: var(--cp-tone-neutral-fg); }
.cp-attn__icon svg { width: 1.25rem; height: 1.25rem; }
.cp-attn--danger .cp-attn__icon { background: var(--cp-tone-danger-bg); color: var(--cp-tone-danger-fg); }
.cp-attn--attention .cp-attn__icon { background: var(--cp-tone-attention-bg); color: var(--cp-tone-attention-fg); }
.cp-attn--info .cp-attn__icon { background: var(--cp-tone-info-bg); color: var(--cp-tone-info-fg); }
.cp-attn__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.cp-attn__label { font-size: .9375rem; font-weight: 700; }
.cp-attn__hint { font-size: .8125rem; color: var(--cp-muted); }
.cp-attn__count { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cp-attn--danger .cp-attn__count { color: var(--cp-tone-danger-solid); }
.cp-attn--attention .cp-attn__count { color: var(--cp-tone-attention-solid); }
.cp-attn__go { width: 1.125rem; height: 1.125rem; flex: none; color: var(--cp-muted); }

.cp-feed { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--cp-border); color: var(--cp-text); text-decoration: none; }
.cp-feed:last-of-type { border-bottom: 0; }
.cp-feed:hover .cp-feed__action { color: var(--cp-primary); }
.cp-feed__main { display: flex; flex-direction: column; min-width: 0; }
.cp-feed__action { font-size: .9375rem; font-weight: 700; }
.cp-feed__meta { font-size: .8125rem; color: var(--cp-muted); overflow-wrap: anywhere; }
.cp-feed__time { flex: none; font-size: .8125rem; color: var(--cp-muted); white-space: nowrap; }

/* ---------- CPUX T02 · ficha de empresa ---------- */
.cp-sheet { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .cp-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-sheet__wide { grid-column: 1 / -1; } }
.cp-card { padding: 1.125rem 1.25rem; border: 1px solid var(--cp-border); border-radius: var(--cp-radius); background: var(--cp-surface); box-shadow: var(--cp-shadow); min-width: 0; }
.cp-card__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.cp-card__title { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cp-muted); }
.cp-card__title svg { width: 1.125rem; height: 1.125rem; }
.cp-dl { display: grid; gap: .5rem; margin: 0; }
.cp-dl > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9375rem; }
.cp-dl dt { color: var(--cp-muted); flex: none; }
.cp-dl dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; color: var(--cp-text); }
.cp-card__cta { display: inline-flex; align-items: center; gap: .25rem; margin-top: .75rem; font-size: .875rem; font-weight: 700; color: var(--cp-primary); text-decoration: none; }
.cp-card__cta:hover { text-decoration: underline; }
.cp-mini { display: flex; flex-direction: column; gap: .25rem; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.cp-mini li { display: flex; justify-content: space-between; gap: .75rem; padding-block: .25rem; border-bottom: 1px solid var(--cp-border); }
.cp-mini li:last-child { border-bottom: 0; }
.cp-mini span:last-child { color: var(--cp-muted); white-space: nowrap; }
.cp-muted { color: var(--cp-muted); font-size: .875rem; }

/* ---------- CPUX T02 · salud, resumen de onboarding y notas ---------- */
.cp-summary { display: grid; gap: .375rem; margin: 0; padding: 1rem 1.125rem; border: 1px solid var(--cp-border); border-radius: var(--cp-radius); background: var(--cp-surface-2); }
.cp-summary dt { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cp-muted); }
.cp-summary dd { margin: 0 0 .5rem; font-weight: 600; overflow-wrap: anywhere; }
.cp-summary dd:last-child { margin-bottom: 0; }
.cp-kind { display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; }
.cp-kind__plain { font-size: .875rem; color: var(--cp-muted); }
.cp-kind__when { font-size: .75rem; color: var(--cp-muted); }
.cp-kind__when--expired { color: var(--cp-tone-attention-fg); font-weight: 700; }
.fi-ta-table thead th { background: var(--cp-surface-2); }