/*
 * Tablero: encabezados de página, dashboard (banda + fila de cifras + widgets), fichas (infolists) y páginas
 * personalizadas (calendario, reportes, saldo, morosidad, estadísticas). Misma voz que la app (app/DESIGN.md):
 * marino que enmarca, cifras Archivo 800 condensadas, etiquetas en oración, color plano, chips de 6 px.
 *
 * Tokens propios con prefijo --cp-tab-* (los de marca viven en base.css). Las cifras usan font-stretch 72 %:
 * depende de cargar Archivo variable (eje wdth); con la Archivo estática cae al ancho normal sin romper nada.
 */

/*
 * Archivo variable (ejes wght 100–900 y wdth 62–125 %), necesaria para las cifras condensadas (72 %) y los
 * títulos (88 %): Bunny Fonts solo sirve Archivo estática 400–700. Mismo nombre de familia, así que convive con la
 * de Filament. PROVISIONAL: mover a base.css / autoalojar (la app ya tiene app/public/fonts/archivo-*.woff2).
 */

:root {
    --cp-tab-marino: #0a1033;
    --cp-tab-marino-2: #141c4d;
    --cp-tab-marino-3: #232c66;
    --cp-tab-sobre: #f3f5ff;
    --cp-tab-sobre-2: #aab3dd;
    --cp-tab-surface: #ffffff;
    --cp-tab-surface-2: #f5f7fc;
    --cp-tab-line: #dbe0ee;
    --cp-tab-line-2: #c3cae0;
    --cp-tab-text: #0e1430;
    --cp-tab-text-2: #3f4769;
    --cp-tab-text-3: #5a6387;
    /* --cp-tab-azul*: acento de acción, ahora verde cancha (nombre heredado). */
    --cp-tab-azul: #047857;
    --cp-tab-azul-ink: #047857;
    --cp-tab-azul-soft: #d1fae5;
    --cp-tab-verde: #15803d;
    --cp-tab-verde-ink: #15803d;
    --cp-tab-verde-soft: #dcf5e4;
    --cp-tab-ambar: #f59e0b;
    --cp-tab-ambar-ink: #a15c00;
    --cp-tab-ambar-soft: #fdf0d5;
    --cp-tab-rojo: #dc2626;
    --cp-tab-rojo-ink: #b91c1c;
    --cp-tab-rojo-soft: #fde4e4;
    --cp-tab-sombra: 0 1px 2px rgb(10 16 51 / 0.06), 0 2px 8px rgb(10 16 51 / 0.05);
    --cp-tab-cifra: 'tnum' 1, 'lnum' 1;
}

.dark {
    --cp-tab-surface: #10163a;
    --cp-tab-surface-2: #161d45;
    --cp-tab-line: #222a57;
    --cp-tab-line-2: #323b70;
    --cp-tab-text: #eef0fb;
    --cp-tab-text-2: #b8bedf;
    --cp-tab-text-3: #8c93bd;
    --cp-tab-azul: #34d399;
    --cp-tab-azul-ink: #6ee7b7;
    --cp-tab-azul-soft: rgb(16 185 129 / 0.18);
    --cp-tab-verde: #22c55e;
    --cp-tab-verde-ink: #5ee08c;
    --cp-tab-verde-soft: rgb(34 197 94 / 0.16);
    --cp-tab-ambar-ink: #fbbf24;
    --cp-tab-ambar-soft: rgb(245 158 11 / 0.16);
    --cp-tab-rojo: #ef4444;
    --cp-tab-rojo-ink: #fb8282;
    --cp-tab-rojo-soft: rgb(239 68 68 / 0.16);
    --cp-tab-sombra: 0 0 0 1px rgb(255 255 255 / 0.04);
}

/* ======================================================================
   Encabezado de página
   ====================================================================== */
.fi-header {
    align-items: flex-end;
    row-gap: 1rem;
}

.fi-header-heading {
    font-size: 1.75rem;
    line-height: 1.12;
    font-weight: 800;
    font-stretch: 88%;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--cp-tab-text);
}

.fi-header-subheading {
    margin-top: 0.375rem;
    font-size: 0.9375rem;
    color: var(--cp-tab-text-2);
    max-width: 68ch;
    text-wrap: pretty;
}

.fi-header-has-breadcrumbs .fi-breadcrumbs {
    margin-bottom: 0.375rem;
}

.fi-breadcrumbs-item-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--cp-tab-text-3);
}

a.fi-breadcrumbs-item-label:hover {
    color: var(--cp-tab-azul-ink);
}

.fi-breadcrumbs-item:last-child .fi-breadcrumbs-item-label {
    color: var(--cp-tab-text-3);
    font-weight: 500;
}

.fi-breadcrumbs-item-separator.fi-icon {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--cp-tab-line-2);
}

.fi-header-actions-ctn .fi-ac {
    align-items: center;
    gap: 0.5rem;
}

/* Una sola primaria (verde) por cabecera; el resto son secundarias de contorno con la tinta de su estado. */
.fi-header-actions-ctn .fi-btn:not(.fi-color-primary):not(.fi-outlined):not(.fi-link) {
    background-color: var(--cp-tab-surface);
    color: var(--cp-tab-text);
    box-shadow: inset 0 0 0 1.5px var(--cp-tab-line-2);
}

.fi-header-actions-ctn .fi-btn:not(.fi-color-primary):not(.fi-outlined):not(.fi-link):hover {
    background-color: var(--cp-tab-surface-2);
}

.fi-header-actions-ctn .fi-btn:not(.fi-color-primary):not(.fi-outlined):not(.fi-link) > .fi-icon {
    color: var(--cp-tab-text-3);
}

.fi-header-actions-ctn .fi-btn.fi-color-warning:not(.fi-outlined):not(.fi-link) > .fi-icon {
    color: var(--cp-tab-ambar-ink);
}

.fi-header-actions-ctn .fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-link) {
    color: var(--cp-tab-rojo-ink);
}

.fi-header-actions-ctn .fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-link) > .fi-icon {
    color: var(--cp-tab-rojo-ink);
}

.fi-header-actions-ctn .fi-btn.fi-color-danger:not(.fi-outlined):not(.fi-link):hover {
    background-color: var(--cp-tab-rojo-soft);
}

/* ======================================================================
   Superficies comunes (secciones, tablas de widget, gráficos)
   ====================================================================== */
.fi-section:not(.fi-section-not-contained):not(.fi-aside),
.fi-wi-widget .fi-ta-ctn,
.fi-wi-chart .fi-section {
    border-radius: 14px;
    background-color: var(--cp-tab-surface);
    box-shadow: 0 0 0 1px var(--cp-tab-line), var(--cp-tab-sombra);
}

.dark .fi-section:not(.fi-section-not-contained):not(.fi-aside),
.dark .fi-wi-widget .fi-ta-ctn,
.dark .fi-wi-chart .fi-section {
    box-shadow: 0 0 0 1px var(--cp-tab-line);
}

.fi-section-header-heading,
.fi-wi-widget .fi-ta-header-heading {
    font-size: 1rem;
    line-height: 1.25;
    font-weight: 800;
    font-stretch: 88%;
    letter-spacing: -0.01em;
    color: var(--cp-tab-text);
}

.fi-section-header-description,
.fi-wi-widget .fi-ta-header-description {
    font-size: 0.875rem;
    color: var(--cp-tab-text-3);
    text-wrap: pretty;
}

/* Iconos de cabecera de sección: tinta tenue, orientan sin gritar. */
.fi-section-header > .fi-icon {
    color: var(--cp-tab-text-3);
}

/* ======================================================================
   Dashboard · banda "Próxima actividad" (punto focal)
   ====================================================================== */
.cp-resumen {
    display: grid;
    gap: 0.75rem;
}

.cp-banda {
    --cp-banda-pad: 1.5rem;
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(12rem, 16rem) auto;
    align-items: center;
    gap: 0 2rem;
    padding: 1.375rem var(--cp-banda-pad);
    border-radius: 20px;
    background-color: var(--cp-tab-marino);
    color: var(--cp-tab-sobre);
}

.dark .cp-banda {
    box-shadow: 0 0 0 1px var(--cp-tab-marino-3);
}

.cp-banda > * + * {
    position: relative;
}

/* Reglas verticales finas entre las tres voces de la banda. */
.cp-banda-que::before,
.cp-banda-cupo::before {
    content: '';
    position: absolute;
    left: -1rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 1px;
    background-color: var(--cp-tab-marino-3);
}

.cp-banda-cuando {
    display: grid;
    gap: 0.25rem;
    min-width: 9rem;
}

.cp-banda-etiqueta {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--cp-tab-sobre-2);
}

.cp-banda-hora {
    font-size: 3.25rem;
    line-height: 1;
    font-weight: 800;
    font-stretch: 72%;
    letter-spacing: -0.015em;
    font-feature-settings: var(--cp-tab-cifra);
    font-variant-numeric: tabular-nums lining-nums;
    color: #fff;
}

.cp-banda-hora-vacia {
    color: var(--cp-tab-sobre-2);
}

.cp-banda-dia {
    font-size: 0.9375rem;
    font-weight: 750;
    font-stretch: 88%;
    color: var(--cp-tab-sobre);
}

.cp-banda-que {
    display: grid;
    justify-items: start;
    gap: 0.375rem;
    min-width: 0;
}

.cp-banda-titulo {
    font-size: 1.375rem;
    line-height: 1.15;
    font-weight: 800;
    font-stretch: 88%;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: #fff;
}

.cp-banda-titulo a {
    color: inherit;
    text-decoration: none;
}

.cp-banda-titulo a:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.cp-banda-meta {
    font-size: 0.9375rem;
    color: var(--cp-tab-sobre-2);
    text-wrap: pretty;
}

.cp-banda-chip {
    display: inline-flex;
    align-items: center;
    height: 1.5rem;
    margin-top: 0.25rem;
    padding: 0 0.5625rem;
    border-radius: 6px;
    font-size: 0.78125rem;
    font-weight: 700;
    background-color: var(--cp-tab-marino-2);
    color: var(--cp-tab-sobre);
    box-shadow: inset 0 0 0 1px var(--cp-tab-marino-3);
}

/* Sobre marino los chips usan los tonos "oscuros" del sistema en ambos temas. */
.cp-banda-chip-verde { background-color: rgb(34 197 94 / 0.16); color: #5ee08c; box-shadow: none; }
.cp-banda-chip-ambar { background-color: rgb(245 158 11 / 0.18); color: #fbbf24; box-shadow: none; }
.cp-banda-chip-rojo { background-color: rgb(239 68 68 / 0.18); color: #fb8282; box-shadow: none; }
.cp-banda-chip-azul { background-color: rgb(16 185 129 / 0.22); color: #6ee7b7; box-shadow: none; }

.cp-banda-cupo {
    display: grid;
    gap: 0.375rem;
}

.cp-banda-cifra {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    line-height: 1;
}

.cp-banda-num {
    font-size: 2.25rem;
    font-weight: 800;
    font-stretch: 72%;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums lining-nums;
    color: #fff;
}

.cp-banda-de {
    font-size: 1.375rem;
    font-weight: 800;
    font-stretch: 72%;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--cp-tab-sobre-2);
}

.cp-banda-cupo-txt {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--cp-tab-sobre-2);
}

.cp-banda-barra {
    height: 4px;
    margin-top: 0.25rem;
    border-radius: 2px;
    background-color: var(--cp-tab-marino-3);
    overflow: hidden;
}

.cp-banda-barra > span {
    display: block;
    height: 100%;
    border-radius: 2px;
    background-color: #10b981;
}

.cp-banda-barra > span.cp-banda-barra-lleno {
    background-color: #22c55e;
}

.cp-banda-ir {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 2.5rem;
    padding: 0 0.875rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 750;
    white-space: nowrap;
    color: var(--cp-tab-sobre);
    background-color: var(--cp-tab-marino-2);
    box-shadow: inset 0 0 0 1px var(--cp-tab-marino-3);
    transition: background-color 120ms var(--cp-ease), transform 100ms var(--cp-ease);
}

.cp-banda-ir .fi-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 160ms var(--cp-ease);
}

.cp-banda-ir:hover {
    background-color: var(--cp-tab-marino-3);
}

.cp-banda-ir:hover .fi-icon {
    transform: translateX(2px);
}

.cp-banda-ir:active {
    transform: scale(0.97);
}

.cp-banda a:focus-visible {
    outline: 2px solid #6ee7b7;
    outline-offset: 3px;
    border-radius: 6px;
}

@media (max-width: 1100px) {
    .cp-banda {
        grid-template-columns: auto minmax(0, 1fr);
        row-gap: 1.25rem;
    }

    .cp-banda-cupo {
        grid-column: 1 / -1;
        max-width: 22rem;
    }

    .cp-banda-cupo::before {
        display: none;
    }

    .cp-banda-ir {
        position: absolute;
        right: var(--cp-banda-pad);
        bottom: 1.375rem;
    }
}

@media (max-width: 640px) {
    .cp-banda {
        --cp-banda-pad: 1.125rem;
        grid-template-columns: minmax(0, 1fr);
        padding: 1.125rem var(--cp-banda-pad);
    }

    .cp-banda-que::before {
        display: none;
    }

    .cp-banda-hora {
        font-size: 2.75rem;
    }

    .cp-banda-ir {
        position: static;
        justify-self: start;
    }
}

/* ======================================================================
   Dashboard · fila de cifras (el resto de indicadores, un solo libro mayor)
   ====================================================================== */
.cp-resumen .fi-section-not-contained > .fi-section-content-ctn > .fi-section-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
    gap: 0;
    overflow: hidden;
    border-radius: 14px;
    background-color: var(--cp-tab-surface);
    box-shadow: 0 0 0 1px var(--cp-tab-line), var(--cp-tab-sombra);
}

.dark .cp-resumen .fi-section-not-contained > .fi-section-content-ctn > .fi-section-content {
    box-shadow: 0 0 0 1px var(--cp-tab-line);
}

.cp-resumen .fi-section-content > .fi-grid-col {
    grid-column: auto;
    min-width: 0;
}

.cp-resumen .fi-wi-stats-overview-stat {
    height: 100%;
    padding: 1rem 1.25rem 1.125rem;
    border-radius: 0;
    background: transparent;
    /* Reglas a la izquierda y arriba; el borde exterior del libro las recorta. */
    box-shadow: -1px 0 0 0 var(--cp-tab-line), 0 -1px 0 0 var(--cp-tab-line);
    overflow: hidden;
    transition: background-color 160ms var(--cp-ease);
}

.cp-resumen a.fi-wi-stats-overview-stat:hover {
    background-color: var(--cp-tab-surface-2);
}

.cp-resumen a.fi-wi-stats-overview-stat:focus-visible {
    outline: 2px solid var(--cp-tab-azul);
    outline-offset: -3px;
}

.cp-resumen .fi-wi-stats-overview-stat-content {
    gap: 0.375rem;
}

.cp-resumen .fi-wi-stats-overview-stat-label {
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cp-tab-text-2);
}

.cp-resumen .fi-wi-stats-overview-stat-value {
    font-size: 2rem;
    line-height: 1.05;
    font-weight: 800;
    font-stretch: 72%;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--cp-tab-text);
    white-space: nowrap;
}

/* Valores de texto (p. ej. "Inventario al día"): voz de título, no de cifra. */
.cp-resumen .fi-wi-stats-overview-stat.cp-stat-texto .fi-wi-stats-overview-stat-value {
    font-size: 1.125rem;
    line-height: 1.25;
    font-weight: 800;
    font-stretch: 88%;
    letter-spacing: -0.01em;
    padding-top: 0.5rem;
}

.cp-resumen .fi-wi-stats-overview-stat-description {
    font-size: 0.8125rem;
    line-height: 1.4;
    align-items: flex-start;
    color: var(--cp-tab-text-3);
    font-variant-numeric: tabular-nums;
    text-wrap: pretty;
}

/* Color solo para estados (éxito, alerta, riesgo); lo neutro queda en tinta tenue. */
.cp-resumen .fi-wi-stats-overview-stat-description:is(.fi-color-primary, .fi-color-info, .fi-color-gray) {
    color: var(--cp-tab-text-3);
}

.cp-resumen .fi-wi-stats-overview-stat-description.fi-color-success { color: var(--cp-tab-verde-ink); }
.cp-resumen .fi-wi-stats-overview-stat-description.fi-color-warning { color: var(--cp-tab-ambar-ink); }
.cp-resumen .fi-wi-stats-overview-stat-description.fi-color-danger { color: var(--cp-tab-rojo-ink); }

/* Sparkline discreta, pegada al pie de la celda. */
.cp-resumen .fi-wi-stats-overview-stat-chart {
    border-radius: 0;
    opacity: 0.7;
}

/* Cifras de KPI fuera del dashboard (otras páginas con StatsOverview). */
.fi-wi-stats-overview:not(.cp-resumen) .fi-wi-stats-overview-stat-label {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--cp-tab-text-2);
}

.fi-wi-stats-overview:not(.cp-resumen) .fi-wi-stats-overview-stat-value {
    font-weight: 800;
    font-stretch: 72%;
    font-variant-numeric: tabular-nums lining-nums;
}

/* ======================================================================
   Dashboard · tablas de widget (Próximas actividades, Pendientes, Acuerdos…)
   ====================================================================== */
.fi-wi-widget .fi-ta-header {
    padding-top: 1rem;
    padding-bottom: 0.875rem;
}

.fi-wi-widget .fi-ta-header-cell {
    font-size: 0.8125rem;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cp-tab-text-3);
}

.fi-wi-widget .fi-ta-table > thead > tr {
    background-color: var(--cp-tab-surface-2);
}

.fi-wi-widget .fi-ta-header-cell-confirmados,
.fi-wi-widget .fi-ta-cell-confirmados,
.fi-wi-widget .fi-ta-cell-inicio {
    white-space: nowrap;
}

/* "11/18", "mié. 21/10 · 18:30": datos que se leen como cifra. */
.fi-wi-widget .fi-ta-cell-confirmados .fi-ta-text-item,
.fi-wi-widget .fi-ta-cell-cantidad .fi-ta-text-item,
.fi-wi-widget .fi-ta-cell-stock-minimo .fi-ta-text-item,
.fi-wi-widget .fi-ta-cell-sugerido .fi-ta-text-item,
.fi-wi-widget .fi-ta-cell-lecturas-count .fi-ta-text-item {
    font-size: 1.125rem;
    font-weight: 800;
    font-stretch: 72%;
    font-variant-numeric: tabular-nums lining-nums;
}

.fi-wi-widget .fi-ta-cell-inicio .fi-ta-text-item {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

/* Estado vacío de widget: amable y compacto, no media pantalla en blanco. */
.fi-wi-widget .fi-ta-empty-state {
    padding: 1.75rem 1.5rem 2rem;
}

.fi-wi-widget .fi-ta-empty-state-content {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    max-width: 32ch;
    margin-inline: auto;
}

.fi-wi-widget .fi-ta-empty-state-icon-bg {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.5rem;
    border-radius: 14px;
}

.fi-wi-widget .fi-ta-empty-state-heading {
    font-size: 1rem;
    font-weight: 800;
    font-stretch: 90%;
    color: var(--cp-tab-text);
}

.fi-wi-widget .fi-ta-empty-state-description {
    margin-top: 0;
    font-size: 0.875rem;
    color: var(--cp-tab-text-3);
    text-wrap: pretty;
}

/* Si la tabla está vacía, la fila de cabeceras sobra. */
.fi-wi-widget .fi-ta-ctn:has(.fi-ta-empty-state) .fi-ta-table > thead {
    display: none;
}

/* Gráficos */
.fi-wi-chart .fi-section-header-heading {
    font-size: 1rem;
}

/* ======================================================================
   Fichas (infolists)
   ====================================================================== */
.fi-section.fi-section-has-header:not(.fi-section-not-contained) > .fi-section-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--cp-tab-line);
}

.fi-section:not(.fi-section-not-contained) > .fi-section-content-ctn > .fi-section-content {
    padding: 1.25rem 1.5rem 1.5rem;
}

.fi-in-entry {
    row-gap: 0.25rem;
}

.fi-in-entry-label {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--cp-tab-text-3);
}

.fi-in-entry-content,
.fi-in-text-item {
    font-variant-numeric: tabular-nums;
}

.fi-in-text-item {
    font-size: 0.9375rem;
    color: var(--cp-tab-text);
}

.fi-in-entry .fi-in-placeholder {
    font-size: 0.9375rem;
    font-style: normal;
    color: var(--cp-tab-text-3);
}

/* Repetidores contenidos: renglones con regla, no tarjetas dentro de tarjetas. */
.fi-in-repeatable.fi-contained > .fi-in-repeatable-item {
    border-radius: 10px;
    padding: 0.75rem 1rem;
    background-color: var(--cp-tab-surface-2);
    box-shadow: none;
}

.fi-in-repeatable.fi-contained {
    gap: 0.5rem;
}

/* Chips de estado en fichas: etiqueta plana de 6 px. */
.fi-in-entry .fi-badge {
    border-radius: 6px;
    box-shadow: none;
    font-weight: 700;
}

/* ======================================================================
   Páginas personalizadas — piezas comunes
   ====================================================================== */
.cp-pag {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.cp-hoja {
    border-radius: 14px;
    background-color: var(--cp-tab-surface);
    box-shadow: 0 0 0 1px var(--cp-tab-line), var(--cp-tab-sombra);
}

.dark .cp-hoja {
    box-shadow: 0 0 0 1px var(--cp-tab-line);
}

.cp-hoja-titulo {
    font-size: 1rem;
    font-weight: 800;
    font-stretch: 88%;
    letter-spacing: -0.01em;
    color: var(--cp-tab-text);
}

.cp-nota {
    font-size: 0.8125rem;
    color: var(--cp-tab-text-3);
    text-wrap: pretty;
}

.cp-cifra {
    font-weight: 800;
    font-stretch: 72%;
    font-variant-numeric: tabular-nums lining-nums;
}

.cp-neg {
    color: var(--cp-tab-rojo-ink);
}

/* Fila de cifras (libro mayor), igual que en el dashboard. */
.cp-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    overflow: hidden;
    border-radius: 14px;
    background-color: var(--cp-tab-surface);
    box-shadow: 0 0 0 1px var(--cp-tab-line), var(--cp-tab-sombra);
}

.dark .cp-cifras {
    box-shadow: 0 0 0 1px var(--cp-tab-line);
}

.cp-cifras > div {
    display: grid;
    gap: 0.375rem;
    padding: 1rem 1.25rem 1.125rem;
    box-shadow: -1px 0 0 0 var(--cp-tab-line), 0 -1px 0 0 var(--cp-tab-line);
}

.cp-cifras .lbl {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--cp-tab-text-2);
}

.cp-cifras .val {
    font-size: 2rem;
    line-height: 1.05;
    font-weight: 800;
    font-stretch: 72%;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--cp-tab-text);
}

.cp-cifras .val.cp-neg {
    color: var(--cp-tab-rojo-ink);
}

/* Tabla de datos de página (reportes, saldo, morosidad): mismas reglas que las tablas del sistema. */
.cp-tabla-env {
    overflow-x: auto;
}

.cp-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--cp-tab-text);
}

.cp-tabla th {
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--cp-tab-text-3);
    background-color: var(--cp-tab-surface-2);
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--cp-tab-line);
    white-space: nowrap;
}

.cp-tabla td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cp-tab-line);
}

.cp-tabla tbody tr:last-child td {
    border-bottom: 0;
}

.cp-tabla .num {
    text-align: right;
    white-space: nowrap;
}

.cp-tabla .centro {
    text-align: center;
}

.cp-tabla tr.total td {
    font-weight: 800;
    background-color: var(--cp-tab-surface-2);
    border-top: 1px solid var(--cp-tab-line-2);
}

.cp-tabla td.vacio {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--cp-tab-text-3);
}

.cp-chip {
    display: inline-flex;
    align-items: center;
    height: 1.375rem;
    padding: 0 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
    vertical-align: 0.0625rem;
    background-color: var(--cp-tab-surface-2);
    color: var(--cp-tab-text-2);
}

.cp-chip-rojo { background-color: var(--cp-tab-rojo-soft); color: var(--cp-tab-rojo-ink); }
.cp-chip-ambar { background-color: var(--cp-tab-ambar-soft); color: var(--cp-tab-ambar-ink); }
.cp-chip-verde { background-color: var(--cp-tab-verde-soft); color: var(--cp-tab-verde-ink); }

.cp-vacio {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: 2rem 1.5rem;
    text-align: center;
}

.cp-vacio-icono {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.5rem;
    border-radius: 14px;
    background-color: var(--cp-tab-verde-soft);
    color: var(--cp-tab-verde-ink);
}

.cp-vacio-icono .fi-icon {
    width: 1.5rem;
    height: 1.5rem;
}

.cp-vacio-titulo {
    font-size: 1rem;
    font-weight: 800;
    font-stretch: 90%;
    color: var(--cp-tab-text);
}

.cp-vacio p {
    max-width: 36ch;
    font-size: 0.875rem;
    color: var(--cp-tab-text-3);
}

/* ======================================================================
   Reportes
   ====================================================================== */
.cp-rep-sel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 12px;
    background-color: var(--cp-tab-surface-2);
    box-shadow: inset 0 0 0 1px var(--cp-tab-line);
    width: fit-content;
    max-width: 100%;
}

.cp-rep-sel button {
    height: 2.25rem;
    padding: 0 0.875rem;
    border-radius: 9px;
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--cp-tab-text-2);
    transition: background-color 120ms var(--cp-ease), color 120ms var(--cp-ease);
}

.cp-rep-sel button:hover {
    color: var(--cp-tab-text);
}

.cp-rep-sel button.activo {
    background-color: var(--cp-tab-surface);
    color: var(--cp-tab-text);
    font-weight: 750;
    box-shadow: 0 0 0 1px var(--cp-tab-line), 0 1px 2px rgb(10 16 51 / 0.08);
}

.dark .cp-rep-sel button.activo {
    background-color: var(--cp-tab-marino-3);
    box-shadow: none;
}

.cp-rep-sel button:focus-visible {
    outline: 2px solid var(--cp-tab-azul);
    outline-offset: 1px;
}

.cp-rep-sel .cp-rep-clave {
    font-weight: 800;
    font-stretch: 72%;
    color: var(--cp-tab-text-3);
    margin-right: 0.25rem;
}

.cp-rep-desc {
    font-size: 0.9375rem;
    color: var(--cp-tab-text-2);
    max-width: 72ch;
    text-wrap: pretty;
}

.cp-rep-bloque {
    display: grid;
    gap: 0.625rem;
}

.cp-rep-grafico svg {
    max-width: 100%;
    height: auto;
}

/* ======================================================================
   Saldo del periodo: un estado de cuenta
   ====================================================================== */
.cp-saldo-filtro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.cp-saldo-filtro label {
    font-size: 0.875rem;
    font-weight: 650;
    color: var(--cp-tab-text-2);
}

.cp-saldo-filtro .fi-input-wrp {
    min-width: 16rem;
}

.cp-saldo-cab {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--cp-tab-line);
}

.cp-saldo-cab .sub {
    font-size: 0.875rem;
    color: var(--cp-tab-text-3);
    font-variant-numeric: tabular-nums;
}

.cp-saldo-proyectado {
    display: grid;
    justify-items: end;
    gap: 0.25rem;
    text-align: right;
}

.cp-saldo-proyectado .lbl {
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--cp-tab-text-2);
}

.cp-saldo-proyectado .val {
    font-size: 2.25rem;
    line-height: 1;
    font-weight: 800;
    font-stretch: 72%;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--cp-tab-text);
}

.cp-saldo-uso {
    display: grid;
    gap: 0.5rem;
    padding: 1rem 1.5rem 1.25rem;
    border-bottom: 1px solid var(--cp-tab-line);
}

.cp-saldo-uso-txt {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--cp-tab-text-2);
}

.cp-saldo-uso-txt .cp-cifra {
    font-size: 1rem;
    color: var(--cp-tab-text);
}

.cp-saldo-barra {
    height: 6px;
    border-radius: 3px;
    background-color: var(--cp-tab-line);
    overflow: hidden;
}

.cp-saldo-barra > div {
    height: 100%;
    border-radius: 3px;
    background-color: var(--cp-tab-verde);
}

.cp-saldo-barra > div.alerta { background-color: var(--cp-tab-ambar); }
.cp-saldo-barra > div.excedido { background-color: var(--cp-tab-rojo); }

.cp-saldo-libro {
    padding: 0.5rem 1.5rem 1rem;
}

.cp-saldo-fila {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0 0.5rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--cp-tab-line);
    font-size: 0.9375rem;
    color: var(--cp-tab-text);
}

.cp-saldo-fila:last-child {
    border-bottom: 0;
}

.cp-saldo-fila .op {
    font-weight: 800;
    color: var(--cp-tab-text-3);
    text-align: center;
}

.cp-saldo-fila .monto {
    font-size: 1.0625rem;
    font-weight: 800;
    font-stretch: 72%;
    font-variant-numeric: tabular-nums lining-nums;
    white-space: nowrap;
}

.cp-saldo-fila .sub {
    display: block;
    font-size: 0.8125rem;
    color: var(--cp-tab-text-3);
}

.cp-saldo-fila.total {
    border-top: 1px solid var(--cp-tab-line-2);
    font-weight: 750;
}

.cp-saldo-fila.total .monto {
    font-size: 1.375rem;
}

.cp-saldo-fila.aparte {
    margin-top: 0.5rem;
    border-top: 1px dashed var(--cp-tab-line-2);
    border-bottom: 0;
    color: var(--cp-tab-text-2);
}

.cp-saldo-cat {
    padding: 1.25rem 1.5rem 0.75rem;
}

/* ======================================================================
   Estadísticas de jugadores: rankings como la lista numerada (firma)
   ====================================================================== */
.cp-est-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem;
}

.cp-est-filtros label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--cp-tab-text-2);
}

.cp-est-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.cp-est-card {
    padding: 1rem 1.25rem 0.5rem 0.5rem;
}

.cp-est-card h3 {
    padding-left: 0.75rem;
    margin-bottom: 0.25rem;
}

.cp-est-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cp-est-fila {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 3rem 2rem;
    align-items: center;
    gap: 0 0.625rem;
    min-height: 2.75rem;
    position: relative;
}

/* La regla arranca después del margen numérico, como en la hoja rayada. */
.cp-est-fila + .cp-est-fila::before {
    content: '';
    position: absolute;
    left: 3.125rem;
    right: 0;
    top: 0;
    height: 1px;
    background-color: var(--cp-tab-line);
}

.cp-est-pos {
    text-align: right;
    font-size: 1.375rem;
    line-height: 1;
    font-weight: 800;
    font-stretch: 72%;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--cp-tab-text-3);
}

.cp-est-pos::after {
    content: '.';
}

.cp-est-nombre {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9375rem;
    font-weight: 650;
    color: var(--cp-tab-text);
}

.cp-est-barra {
    height: 4px;
    border-radius: 2px;
    background-color: var(--cp-tab-line);
    overflow: hidden;
}

.cp-est-barra > div {
    height: 100%;
    border-radius: 2px;
    background-color: var(--cp-tab-azul);
}

.cp-est-valor {
    text-align: right;
    font-size: 1.125rem;
    font-weight: 800;
    font-stretch: 72%;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--cp-tab-text);
}

.cp-est-card .cp-nota {
    padding: 0.5rem 0.75rem 0.75rem;
}

/* ======================================================================
   Calendario (FullCalendar ↔ tokens del sistema)
   ====================================================================== */
.cp-cal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cp-cal-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--cp-tab-text-2);
}

.cp-cal-leyenda > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.cp-cal-punto {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    flex: none;
}

.cp-cal-punto.borde {
    background: transparent;
    border: 1.5px dashed var(--cp-tab-text-3);
}

.cp-cal-tachado {
    text-decoration: line-through;
    opacity: 0.6;
}

.cp-cal-caja {
    position: relative;
    padding: 1rem 1.25rem 1.25rem;
}

.cp-cal-estado {
    padding: 2rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--cp-tab-text-3);
}

.cp-cal-cargando {
    position: absolute;
    top: 1.25rem;
    right: 50%;
    transform: translateX(50%);
    font-size: 0.75rem;
    color: var(--cp-tab-text-3);
}

.cp-fc {
    --fc-border-color: var(--cp-tab-line);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: var(--cp-tab-surface-2);
    --fc-list-event-hover-bg-color: var(--cp-tab-surface-2);
    --fc-today-bg-color: var(--cp-tab-azul-soft);
    --fc-now-indicator-color: var(--cp-tab-rojo);
    --fc-button-text-color: var(--cp-tab-text);
    --fc-button-bg-color: var(--cp-tab-surface);
    --fc-button-border-color: var(--cp-tab-line-2);
    --fc-button-hover-bg-color: var(--cp-tab-surface-2);
    --fc-button-hover-border-color: var(--cp-tab-line-2);
    --fc-button-active-bg-color: var(--cp-tab-marino);
    --fc-button-active-border-color: var(--cp-tab-marino);
    --fc-event-text-color: #fff;
    font-size: 0.875rem;
    color: var(--cp-tab-text);
}

.dark .cp-fc {
    --fc-button-active-bg-color: var(--cp-tab-marino-3);
    --fc-button-active-border-color: var(--cp-tab-marino-3);
}

.cp-fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 1rem;
}

.cp-fc .fc-toolbar-title {
    font-size: 1.375rem;
    font-weight: 800;
    font-stretch: 88%;
    letter-spacing: -0.02em;
}

.cp-fc .fc-toolbar-title::first-letter {
    text-transform: uppercase;
}

.cp-fc .fc-button {
    height: 2.25rem;
    padding: 0 0.875rem;
    border-width: 1.5px;
    border-radius: 9px;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: none !important; /* FullCalendar pone sombra de foco en línea con !important. */
}

.cp-fc .fc-button:focus-visible {
    outline: 2px solid var(--cp-tab-azul);
    outline-offset: 2px;
}

.cp-fc .fc-button-primary:not(:disabled).fc-button-active,
.cp-fc .fc-button-primary:not(:disabled):active {
    color: #fff;
}

.cp-fc .fc-button-primary:disabled {
    opacity: 0.5;
}

.cp-fc .fc-button-group > .fc-button:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-left: -1.5px;
}

.cp-fc .fc-button-group > .fc-button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.cp-fc .fc-col-header-cell-cushion,
.cp-fc .fc-daygrid-day-number,
.cp-fc .fc-list-day-text,
.cp-fc .fc-list-day-side-text {
    color: inherit;
    text-decoration: none;
}

.cp-fc .fc-col-header-cell {
    padding: 0.375rem 0;
    font-size: 0.8125rem;
    font-weight: 650;
    color: var(--cp-tab-text-3);
    background-color: var(--cp-tab-surface-2);
}

.cp-fc .fc-col-header-cell-cushion::first-letter {
    text-transform: uppercase;
}

.cp-fc .fc-daygrid-day-number {
    padding: 0.375rem 0.5rem;
    font-size: 1rem;
    font-weight: 800;
    font-stretch: 72%;
    font-variant-numeric: tabular-nums lining-nums;
    color: var(--cp-tab-text-2);
}

.cp-fc .fc-day-other .fc-daygrid-day-number {
    color: var(--cp-tab-line-2);
}

.cp-fc .fc-day-today .fc-daygrid-day-number {
    color: var(--cp-tab-azul-ink);
}

.cp-fc .fc-daygrid-event {
    margin-top: 1px;
    padding: 0.0625rem 0.25rem;
    border-radius: 6px;
}

.cp-fc .fc-daygrid-dot-event {
    color: inherit;
}

.cp-fc .fc-daygrid-dot-event:hover {
    background: var(--fc-list-event-hover-bg-color);
}

.cp-fc .fc-daygrid-dot-event .fc-event-time {
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--cp-tab-text-3);
}

.cp-fc .fc-daygrid-dot-event .fc-event-title {
    font-weight: 650;
}

.cp-fc .fc-list-event a {
    color: inherit;
    text-decoration: none;
}

.cp-fc .fc-list-day-cushion {
    background: var(--fc-neutral-bg-color);
    font-weight: 750;
}

.cp-fc .fc-list-event-title .cp-fc-sub {
    display: block;
    font-size: 0.8125rem;
    color: var(--cp-tab-text-3);
}

.cp-fc .cp-fc-cancelada .fc-event-title,
.cp-fc .cp-fc-cancelada .fc-list-event-title a {
    text-decoration: line-through;
}

.cp-fc .cp-fc-cancelada {
    opacity: 0.55;
}

.cp-fc .cp-fc-borrador {
    border-style: dashed;
    opacity: 0.75;
}

.cp-fc a.fc-event:focus-visible {
    outline: 2px solid var(--cp-tab-azul);
    outline-offset: 1px;
}

@media (max-width: 640px) {
    .cp-cal-caja {
        padding: 0.5rem;
    }

    .cp-fc .fc-header-toolbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .cp-fc .fc-toolbar-title {
        font-size: 1.125rem;
    }

    .cp-fc .fc-footer-toolbar {
        justify-content: center;
    }

    .cp-fc .fc-button {
        padding: 0 0.625rem;
    }
}

/* ======================================================================
   Movimiento reducido
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
    .cp-banda-ir,
    .cp-banda-ir .fi-icon,
    .cp-resumen .fi-wi-stats-overview-stat,
    .cp-rep-sel button {
        transition: none;
    }

    .cp-banda-ir:active,
    .cp-banda-ir:hover .fi-icon {
        transform: none;
    }
}

.cp-tabla td.nombre {
    font-weight: 650;
}

.cp-hoja-titulo-lg {
    font-size: 1.25rem;
}

.cp-saldo-fila .sub-inline {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--cp-tab-text-3);
}

.cp-saldo-fila .cp-chip {
    margin-left: 0.375rem;
}

.cp-saldo-cat-vacio {
    padding: 0 1.5rem 1.25rem;
}

.cp-est-deporte {
    min-width: 12rem;
}

/* Estado vacío de widget en una sola línea amable: icono a la izquierda, título y frase al lado. */
.fi-wi-widget .fi-ta-empty-state {
    padding: 1.25rem 1.5rem;
}

.fi-wi-widget .fi-ta-empty-state-content {
    grid-template-columns: 2.75rem minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    column-gap: 0.875rem;
    row-gap: 0.125rem;
    max-width: none;
    margin: 0;
    text-align: left;
}

.fi-wi-widget .fi-ta-empty-state-icon-bg {
    grid-row: span 2;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    border-radius: 12px;
}

.fi-wi-widget .fi-ta-empty-state-heading,
.fi-wi-widget .fi-ta-empty-state-description {
    grid-column: 2;
    margin: 0;
    text-align: left;
}

/* Paginación vacía en widgets sin paginar: no deja un pie en blanco. */
.fi-wi-widget .fi-pagination:not(:has(*)) {
    display: none;
}

.cp-tabla th:first-child,
.cp-tabla td:first-child {
    padding-left: 1.5rem;
}

.cp-tabla th:last-child,
.cp-tabla td:last-child {
    padding-right: 1.5rem;
}