/* ─────────────────────────────────────────────────────────────────
   ContaPlus Design System — app.css
   CSS custom properties mirror AppTheme.cs so non-MudBlazor
   elements (login panel, badges, etc.) share the same tokens.
───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined');

/* ── Design Tokens ─────────────────────────────────────────────── */
:root {
    /* Surfaces */
    --cp-bg-app:          #f8fafc;
    --cp-bg-surface:      #ffffff;
    --cp-bg-surface-alt:  #f1f5f9;
    --cp-bg-hover:        #f8fafc;

    /* Borders */
    --cp-border:          #e2e8f0;
    --cp-border-light:    #f1f5f9;

    /* Text */
    --cp-text-primary:    #0f172a;
    --cp-text-secondary:  #475569;
    --cp-text-muted:      #94a3b8;
    --cp-text-inverse:    #f8fafc;

    /* Brand */
    --cp-accent:          #3b82f6;
    --cp-accent-hover:    #2563eb;
    --cp-accent-soft:     #eff6ff;
    --cp-accent-text:     #1d4ed8;
    --cp-secondary:       #6366f1;

    /* Semantics */
    --cp-success:         #10b981;
    --cp-success-soft:    #ecfdf5;
    --cp-danger:          #ef4444;
    --cp-danger-soft:     #fef2f2;
    --cp-warning:         #f59e0b;
    --cp-warning-soft:    #fffbeb;

    /* Navigation */
    --cp-nav-bg:          #0f172a;
    --cp-nav-hover:       rgba(255, 255, 255, 0.06);
    --cp-nav-active:      rgba(59, 130, 246, 0.15);

    /* Radius */
    --cp-radius-sm:       6px;
    --cp-radius-md:       8px;
    --cp-radius-lg:       12px;
    --cp-radius-xl:       20px;

    /* Shadows */
    --cp-shadow-sm:       0 1px 2px rgba(0,0,0,0.04), 0 1px 4px rgba(0,0,0,0.06);
    --cp-shadow-md:       0 4px 12px rgba(0,0,0,0.08);
    --cp-shadow-lg:       0 24px 48px rgba(0,0,0,0.2);

    /* App bar */
    --cp-appbar-height:   56px;
    --cp-drawer-width:    260px;
    --cp-footer-height:   36px;
}

/* ── Reset & Base ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    color: var(--cp-text-primary);
    background: var(--cp-bg-app);
    overflow: hidden;
}

/* ── Scrollbar ─────────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── MudBlazor overrides ───────────────────────────────────────── */

/* App bar — white with border, no shadow */
.mud-appbar {
    border-bottom: 1px solid var(--cp-border) !important;
    box-shadow: none !important;
}
.mud-appbar .mud-icon-button { color: var(--cp-text-secondary) !important; }
.mud-appbar .mud-icon-button:hover { background: var(--cp-bg-surface-alt) !important; }

/* Drawer — dark background */
.mud-drawer { background: var(--cp-nav-bg) !important; border: none !important; }
.mud-drawer-content { background: transparent !important; }
.mud-nav-group-header, .mud-nav-item .mud-nav-link { color: #94a3b8 !important; font-size: 13px !important; }
.mud-nav-group-header:hover, .mud-nav-item .mud-nav-link:hover { background: var(--cp-nav-hover) !important; color: #cbd5e1 !important; }
.mud-nav-item .mud-nav-link.active { background: var(--cp-nav-active) !important; color: #60a5fa !important; font-weight: 500 !important; }

/* DataGrid */
.mud-table-head th { background: var(--cp-bg-surface-alt) !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.3px !important; color: var(--cp-text-secondary) !important; border-bottom: 1px solid var(--cp-border) !important; }
.mud-table-row:hover td { background: var(--cp-bg-hover) !important; }
.mud-table-row.selected td { background: var(--cp-accent-soft) !important; }
.mud-table td { font-size: 13px !important; border-bottom: 1px solid var(--cp-border-light) !important; }

/* Cards / Paper */
.mud-paper { border-radius: var(--cp-radius-lg) !important; }
.mud-paper.cp-card { border: 1px solid var(--cp-border); box-shadow: var(--cp-shadow-sm) !important; }

/* Inputs */
.mud-input-outlined .mud-input-outlined-border { border-color: var(--cp-border) !important; }
.mud-input-outlined:hover .mud-input-outlined-border { border-color: #cbd5e1 !important; }
.mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--cp-accent) !important; }

/* Text field label */
.mud-input-label { color: var(--cp-text-secondary) !important; font-size: 12.5px !important; font-weight: 500 !important; }

/* ── Utility classes ───────────────────────────────────────────── */
.cp-text-muted    { color: var(--cp-text-muted) !important; }
.cp-text-secondary { color: var(--cp-text-secondary) !important; }
.cp-mono { font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace !important; }
.cp-tabular { font-variant-numeric: tabular-nums; }
.cp-nowrap { white-space: nowrap; }
/* Texto largo en una celda de grid: una línea con elipsis; el valor completo va en title (S-237). */
.cp-truncate { display: inline-block; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
/* Grids anchos (paridad con legacy, EP-015): encabezados en una línea; el grid hace scroll horizontal. */
.cp-data-grid .mud-table-head th { white-space: nowrap; }

/* ── Status Badges ─────────────────────────────────────────────── */
.cp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}
.cp-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.cp-badge-vigente   { background: var(--cp-success-soft); color: #059669; }
.cp-badge-vigente::before { background: var(--cp-success); }
.cp-badge-cancelado { background: var(--cp-danger-soft); color: #dc2626; }
.cp-badge-cancelado::before { background: var(--cp-danger); }

.cp-type-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.cp-type-emitido  { background: #dbeafe; color: #1d4ed8; }
.cp-type-recibido { background: #fef3c7; color: #92400e; }
.cp-type-ingreso  { background: #ecfdf5; color: #047857; }
.cp-type-egreso   { background: #fef2f2; color: #b91c1c; }
.cp-type-nomina   { background: #f5f3ff; color: #6d28d9; }
.cp-type-pago     { background: #eff6ff; color: #1d4ed8; }
.cp-type-traslado { background: #fefce8; color: #854d0e; }

/* ── Sync / progress banner ────────────────────────────────────── */
.cp-sync-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--cp-radius-md);
    border-left: 3px solid currentColor;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
}
.cp-sync-banner-text {
    flex: 1;
    min-width: 0;
    color: inherit;
}
.cp-sync-banner-progress {
    flex: 0 0 auto;
    width: 180px;
}
.cp-sync-banner-info {
    background: #eff6ff;
    color: #1d4ed8;
}
.cp-sync-banner-warning {
    background: #fffbeb;
    color: #b45309;
}
.cp-sync-banner-success {
    background: #ecfdf5;
    color: #047857;
}

/* ── Loading shimmer ───────────────────────────────────────────── */
.cp-shimmer {
    background: linear-gradient(90deg, var(--cp-bg-surface-alt) 25%, #e8edf4 50%, var(--cp-bg-surface-alt) 75%);
    background-size: 200% 100%;
    animation: cp-shimmer 1.5s infinite;
    height: 14px;
    border-radius: 4px;
}
@keyframes cp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── App Shell Layout ──────────────────────────────────────────────
   Estructura compartida por el shell de ContaPlus.App (MainLayout) y de
   CfdiTotal.Admin (AdminLayout). Vive aquí —no inline en cada layout—
   para que ambos proyectos tengan el MISMO comportamiento de scroll.

   body es overflow:hidden (ver reset arriba), así que el scroll vertical
   lo provee .cp-main-content. Las páginas de lista (AppListPage) son
   height:100% y no desbordan → scrollean internamente en su DataGrid;
   las páginas "planas" (dashboards, reportes, formularios) scrollean aquí.

   min-height:0 es OBLIGATORIO: MudBlazor pone .mud-main-content { flex:1 1 auto }
   y carga su CSS DESPUÉS de app.css, así que gana. Con el min-height:auto por
   defecto, el flex-item crece hasta el alto de su contenido (no se queda en el
   alto del viewport) y overflow-y:auto nunca se activa → el body recorta y no
   hay scroll. min-height:0 deja que el item se encoja al alto disponible y
   entonces sí scrollea. No quitar min-height:0 ni volver a overflow:hidden. */
/* Selectores cualificados con .mud-layout / .mud-main-content para GANARLE en
   especificidad a las reglas de MudBlazor (.mud-layout{height:100%},
   .mud-main-content{flex:1 1 auto}) sin depender del orden de carga del CSS. */
.cp-app-layout,
.mud-layout.cp-app-layout { display: flex; flex-direction: column; height: 100vh; }

.cp-main-content,
.mud-layout .mud-main-content.cp-main-content {
    flex: 1 1 auto;
    min-height: 0;          /* permite que el flex-item se encoja y scrollee */
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background: var(--cp-bg-app);
}

/* ── Report Page Layout ────────────────────────────────────────────
   Páginas "planas" de reporte (DIOT, REPSE, análisis): flujo vertical
   con scroll propio, a diferencia de .cp-list-page que no desborda.

   `> * { flex-shrink: 0 }` es OBLIGATORIO: por defecto los flex-items se
   encogen hasta caber en el alto disponible, así que el contenido nunca
   supera al contenedor y overflow-y:auto jamás activa el scroll. Peor si
   un hijo recorta (MudTabs con Rounded es overflow:hidden): se traga todo
   lo que queda debajo del pliegue. */
.cp-report-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    gap: 12px;
    padding: 16px 16px 16px;
}
.cp-report-page > * {
    flex-shrink: 0;
}

/* ── List Page Layout ──────────────────────────────────────────── */
.cp-list-page {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    gap: 12px;
    padding: 16px 16px 0;
    background: var(--cp-bg-app);
}

/* Filter drawer (off-canvas overlay) */
.cp-filter-drawer {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    overflow: hidden;
}
.cp-filter-drawer.open {
    pointer-events: auto;
}
.cp-filter-backdrop {
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background 0.3s ease;
}
.cp-filter-drawer.open .cp-filter-backdrop {
    background: rgba(0, 0, 0, 0.1);
}
.cp-filter-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 440px;
    max-width: 85%;
    background: var(--cp-bg-surface);
    border-right: 1px solid var(--cp-border);
    box-shadow: var(--cp-shadow-lg);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}
.cp-filter-drawer.open .cp-filter-panel {
    transform: translateX(0);
}
.cp-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cp-border);
    flex-shrink: 0;
}
.cp-filter-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.cp-filter-actions {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--cp-border);
    gap: 8px;
    flex-shrink: 0;
}

/* Toolbar */
.cp-toolbar {
    background: var(--cp-bg-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    box-shadow: var(--cp-shadow-sm);
}
.cp-toolbar-separator { width: 1px; height: 20px; background: var(--cp-border); margin: 0 4px; }
.cp-result-badge {
    font-size: 12px;
    font-weight: 500;
    color: var(--cp-text-muted);
    padding: 4px 10px;
    background: var(--cp-bg-surface-alt);
    border-radius: 20px;
}
.cp-result-badge strong { color: var(--cp-text-primary); font-weight: 600; }

/* Search box inside toolbar */
.cp-search-box {
    display: flex;
    align-items: center;
    background: var(--cp-bg-surface-alt);
    border: 1.5px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    padding: 0 10px;
    width: 300px;
    height: 36px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cp-search-box:focus-within {
    border-color: var(--cp-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: var(--cp-bg-surface);
}
.cp-search-box input {
    border: none;
    background: none;
    padding: 6px 8px;
    font-size: 13px;
    font-family: inherit;
    outline: none;
    flex: 1;
    color: var(--cp-text-primary);
}
.cp-search-box input::placeholder { color: var(--cp-text-muted); }

/* Grid + Detail container */
.cp-grid-container {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
    background: var(--cp-bg-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
    box-shadow: var(--cp-shadow-sm);
    margin-bottom: 12px;
}
.cp-grid-wrapper { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }

/* Detail side panel */
.cp-detail-panel {
    width: 380px;
    border-left: 1px solid var(--cp-border);
    background: var(--cp-bg-surface);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
}
.cp-detail-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cp-border);
    flex-shrink: 0;
}
.cp-detail-header h3 { flex: 1; font-size: 15px; font-weight: 600; color: var(--cp-text-primary); margin: 0; }
.cp-detail-body { padding: 20px; overflow-y: auto; }
.cp-detail-section { margin-bottom: 20px; }
.cp-detail-section h4 { font-size: 11px; font-weight: 600; color: var(--cp-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px; }
.cp-detail-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.cp-detail-row .label { color: var(--cp-text-muted); }
.cp-detail-row .value { color: var(--cp-text-primary); font-weight: 500; }
.cp-detail-row .value.total { font-size: 20px; color: var(--cp-accent); font-weight: 700; }
.cp-detail-amounts { background: var(--cp-bg-surface-alt); border-radius: var(--cp-radius-md); padding: 12px 14px; border: 1px solid var(--cp-border-light); }
.cp-detail-amounts .total-divider { border-top: 1.5px solid var(--cp-border); margin-top: 8px; padding-top: 10px; }
.cp-detail-uuid { font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace; font-size: 11px; color: var(--cp-text-secondary); background: var(--cp-bg-surface-alt); padding: 10px 12px; border-radius: var(--cp-radius-md); border: 1px solid var(--cp-border-light); display: flex; align-items: flex-start; gap: 8px; }
.cp-detail-uuid span { flex: 1; word-break: break-all; }

/* ── Filter drawer body (unified across all *Filters.razor) ────
   Single source of truth for the filter panels. Components must NOT
   declare their own `*.razor.css` for this structure.
   See STYLEGUIDE.md §5.3.
───────────────────────────────────────────────────────────────── */
.cp-filters {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cp-filters-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cp-filters-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cp-text-muted);
    padding-bottom: 4px;
    border-bottom: 1px solid var(--cp-border);
}

.cp-filters-fields {
    display: grid;
    gap: 12px 16px;
    grid-template-columns: 1fr;
}

.cp-filters-fields.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.cp-filters-fields.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.cp-filters-fields .span-2 {
    grid-column: span 2;
}

.cp-filters-fields .span-3 {
    grid-column: span 3;
}

/* ── Footer ────────────────────────────────────────────────────── */
.cp-footer {
    height: var(--cp-footer-height);
    background: var(--cp-bg-surface);
    border-top: 1px solid var(--cp-border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 20px;
    flex-shrink: 0;
}
.cp-footer-item {
    font-size: 12px;
    color: var(--cp-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    transition: color 0.15s;
    text-decoration: none;
}
.cp-footer-item:hover { color: var(--cp-text-secondary); }
.cp-footer-item.plan { color: var(--cp-accent-text); font-weight: 500; }
.cp-footer-item.pending { color: #b45309; }

/* ── CfdStamp Section Components ─────────────────────────────── */

.cfd-section {
    background: var(--cp-bg-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    overflow: visible;
}

.cfd-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cp-text-muted);
    padding: 10px 16px;
    border-bottom: 1px solid var(--cp-border);
    background: var(--cp-bg-surface);
    border-radius: var(--cp-radius-md) var(--cp-radius-md) 0 0;
}

.cfd-section-body {
    padding: 12px 16px;
}

.cfd-fields-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.cfd-fields-row > * {
    flex: 1;
    min-width: 120px;
}

.cfd-fields-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Grid de campos alineados en columnas (4 columnas que colapsan en pantallas chicas) */
.cfd-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 16px;
    align-items: start;
}

.cfd-grid > .cfd-span-2 {
    grid-column: span 2;
}

@media (max-width: 960px) {
    .cfd-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cfd-grid > .cfd-span-2 {
        grid-column: span 2;
    }
}

@media (max-width: 560px) {
    .cfd-grid {
        grid-template-columns: 1fr;
    }

    .cfd-grid > .cfd-span-2 {
        grid-column: span 1;
    }
}

/* Emisor — tarjeta de identidad del contribuyente seleccionado */
.emisor-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--cp-accent-soft);
    border: 1px solid var(--cp-border-light);
    border-radius: var(--cp-radius-sm);
}

.emisor-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--cp-bg-surface);
    color: var(--cp-accent-text);
    border: 1px solid var(--cp-border-light);
}

.emisor-identity-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.emisor-identity-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--cp-text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emisor-identity-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.emisor-rfc {
    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
    color: var(--cp-accent-text);
}

/* Emisor — estado vacío (sin contribuyente seleccionado) */
.emisor-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    font-size: 12.5px;
    color: var(--cp-text-muted);
    background: var(--cp-bg-app);
    border: 1px dashed var(--cp-border);
    border-radius: var(--cp-radius-sm);
}

/* Totals summary bar */
.cfd-totals-row {
    display: flex;
    gap: 16px;
    justify-content: flex-end;
    flex-wrap: wrap;
    padding: 12px 0 4px;
    border-top: 1px solid var(--cp-border);
    margin-top: 8px;
}

.cfd-total-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 100px;
}

.cfd-total-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--cp-text-muted);
}

.cfd-total-value {
    font-size: 14px;
    font-weight: 600;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    color: var(--cp-text-primary);
}

.cfd-total-grand .cfd-total-label {
    color: var(--cp-accent);
}

.cfd-total-grand .cfd-total-value {
    font-size: 16px;
    color: var(--cp-accent);
}

/* Inline dialog (concept form, etc.) */
.cfd-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 100;
}

.cfd-dialog-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 640px;
    max-width: 90vw;
    max-height: 80vh;
    background: var(--cp-bg-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    z-index: 101;
    display: flex;
    flex-direction: column;
    animation: cfd-dialog-in 0.2s ease;
}

@keyframes cfd-dialog-in {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

.cfd-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cp-border);
    font-size: 14px;
}

.cfd-dialog-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.cfd-dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--cp-border);
}

/* Form step sections inside dialogs */
.cfd-form-step {
    padding: 12px 0;
    border-bottom: 1px solid var(--cp-border-light);
}

.cfd-form-step:last-child {
    border-bottom: none;
}

.cfd-form-step-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--cp-accent-text);
    margin-bottom: 10px;
}

/* ── Tabla con alto máximo y encabezado fijo ───────────────────────
   Para listados largos embebidos en una tarjeta (contratos REPSE con
   cientos de trabajadores): la tabla scrollea dentro de su tarjeta en
   vez de empujar las tarjetas siguientes fuera de la vista.

   La clase va en el `Class` del MudSimpleTable, que la aplica a su div
   raíz. Se acota tanto ese div como el `.mud-table-container` interno
   para no depender de la estructura exacta que emita MudBlazor: el que
   scrollea es el más interno de los dos y el `thead` se fija con
   position:sticky respecto a él. Como sticky rompe el border-collapse,
   la línea inferior del encabezado va como box-shadow inset. */
.cp-table-scroll,
.cp-table-scroll .mud-table-container {
    max-height: 520px;
    overflow: auto;
}

.cp-table-scroll thead th {
    position: sticky;
    z-index: 2;
    background: var(--mud-palette-surface);
    box-shadow: inset 0 -1px 0 var(--cp-border);
}

.cp-table-scroll thead tr:first-child th {
    top: 0;
}

/* Encabezado de dos filas (grupos de columnas): la segunda fila se pega
   justo debajo de la primera, así que necesita alto fijo y conocido. */
.cp-table-scroll--grouped thead th {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* Sólo la primera fila lleva alto fijo: es la referencia del `top` de la
   segunda. La segunda crece con su contenido (rótulos de bimestre). */
.cp-table-scroll--grouped thead tr:first-child th {
    height: 34px;
}

.cp-table-scroll--grouped thead tr:nth-child(2) th {
    top: 34px;
}

/* ── Rejilla de cifras del SISUB (REPSE, S-232 / S-234) ─────────────
   Siete columnas y DOS RENGLONES por trabajador, uno por bimestre. Con
   once columnas —los cinco campos de cada bimestre uno junto al otro— el
   segundo bimestre quedaba fuera de una pantalla de portátil y había que
   capturarlo desplazándose en horizontal, con la columna del trabajador
   fija para no perder de vista de quién era el renglón. Creciendo hacia
   abajo no hace falta nada de eso: ni scroll horizontal, ni columna
   pegada, y el nombre tiene ancho para no partirse en tres líneas. */
.cp-figure-table th.cp-figure-name,
.cp-figure-table td.cp-figure-name {
    width: 28%;
    min-width: 240px;
    text-align: left;
    box-shadow: inset -1px 0 0 var(--cp-border);
}

.cp-figure-table thead th.cp-figure-name {
    box-shadow: inset -1px 0 0 var(--cp-border), inset 0 -1px 0 var(--cp-border);
}

/* De qué bimestre es el renglón. Angosta: son dos líneas cortas. */
.cp-figure-table th.cp-figure-period,
.cp-figure-table td.cp-figure-period {
    width: 120px;
    text-align: left;
    white-space: nowrap;
}

/* Los dos renglones de una persona se leen como un bloque: la línea
   gruesa separa personas, no bimestres. Sin ella, doce renglones sueltos
   son doce trabajadores a primera vista. */
.cp-figure-table tbody tr.cp-figure-worker > td {
    border-top: 2px solid var(--cp-border);
}

.cp-figure-table tbody tr.cp-figure-worker:first-child > td {
    border-top: none;
}

/* Bimestre en el que el trabajador no produce fila del archivo bajo este
   contrato: no hay campos que ofrecer, sólo el porqué (S-233). */
.cp-figure-absent {
    text-align: center;
    font-size: 12px;
    font-style: italic;
    color: var(--mud-palette-text-disabled);
}

/* Renglón del segundo bimestre: tinte suave, para saber en cuál de los
   dos se está capturando sin leer la columna del periodo. */
.cp-bim-second {
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, transparent);
}

/* Totales del contrato: fijos al pie del área que scrollea, como el
   encabezado lo está arriba. Es contra lo que el contador cuadra.
   Son dos renglones, así que el de arriba se pega a la altura del de
   abajo — de ahí el alto fijo, el mismo recurso que usa el encabezado de
   dos filas. Con un solo bimestre a la vista sobra: la regla que iguala
   `first-child` a `last-child` lo deja pegado al fondo. */
.cp-figure-table tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    height: 34px;
    font-weight: 600;
    background: var(--mud-palette-surface);
}

.cp-figure-table tfoot tr:first-child:not(:last-child) td {
    bottom: 34px;
}

.cp-figure-table tfoot tr:first-child td {
    box-shadow: inset 0 1px 0 var(--cp-border);
}

.cp-figure-table tfoot td.cp-figure-name {
    box-shadow: inset -1px 0 0 var(--cp-border);
}

.cp-figure-table tfoot tr:first-child td.cp-figure-name {
    box-shadow: inset 0 1px 0 var(--cp-border), inset -1px 0 0 var(--cp-border);
}

/* Un cero no dice lo mismo que una cifra capturada y no puede pesar igual. */
.cp-figure-zero input {
    color: var(--mud-palette-text-disabled);
}

/* Barra única de paginación, al pie de la tabla que gobierna (S-232). */
.cp-paging-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0 4px;
}

/* ── Origen de una cifra editable (REPSE, S-199) ───────────────────
   En la tabla del SISUB conviven cifras derivadas del CFDI, cifras que
   mandó el Excel del proveedor de nómina y correcciones a mano. Se
   marca con un borde izquierdo en la celda y NO con un chip por celda:
   son diez campos numéricos por trabajador y un chip en cada uno deja
   la tabla ilegible. El chip va una vez por fila. */
.cp-figure {
    border-left: 3px solid transparent;
}

.cp-figure--imported {
    border-left-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 6%, transparent);
}

.cp-figure--manual {
    border-left-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 6%, transparent);
}

/* Referencia bajo el campo de variables: de qué periodo sale y un botón
   para copiarla. Era una columna propia entre los campos capturables. */
.cp-figure-estimate {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    margin-top: 2px;
    font-size: 11px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.cp-figure-estimate .mud-button {
    min-width: 0;
    padding: 0 4px;
    font-size: 11px;
    font-style: normal;
}

.cp-figure-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
}

.cp-figure-legend span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cp-figure-swatch {
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--cp-border);
}

.cp-figure-swatch--imported {
    background: var(--mud-palette-success);
}

.cp-figure-swatch--manual {
    background: var(--mud-palette-warning);
}

/* ── Deriva de la base bajo un ajuste guardado (REPSE, S-200) ───────
   El ajuste se guardó sobre un derivado que hoy ya no es el mismo
   (llegó o se canceló un CFDI). El ajuste se respeta —es trabajo
   humano— pero tiene que verse: se marca con un punteado superior,
   ortogonal al borde de color del origen, para que ambas señales
   convivan en la misma celda. El detalle va en el tooltip. */
.cp-figure--drifted {
    border-top: 2px dotted var(--mud-palette-error);
}

.cp-figure-swatch--drifted {
    width: 14px;
    height: 3px;
    background: none;
    border-top: 2px dotted var(--mud-palette-error);
}

/* Resumen del cuatrimestre. Sustituye al "N trabajador(es) en <mes>–<mes>"
   suelto: con cuarenta contratos, saber cuántos trabajadores quedan
   incompletos exigía recorrerlos todos sumando a mano. */
.cp-repse-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 32px;
    align-items: center;
}

.cp-repse-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 90px;
}

.cp-repse-stat__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cp-text-muted);
}

.cp-repse-stat__value {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--cp-text-primary);
    font-variant-numeric: tabular-nums;
}

.cp-repse-stat--warning .cp-repse-stat__value {
    color: var(--mud-palette-warning-darken);
}

/* ── Estado de un contrato en la rejilla (REPSE, S-231) ────────
   Tres señales que pueden coincidir: el problema del contrato, los
   recibos que su vigencia deja fuera y los trabajadores incompletos.
/* ── Nota del bimestre sin contratos (REPSE, S-231) ────────────
   Dato del periodo, no advertencia: vive junto al periodo, en gris y
   sin fondo. Lo que sustituye era un aviso ámbar por contrato que
   pedía una acción que en el caso normal no existe. */
.cp-repse-period-note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--cp-border);
    color: var(--cp-text-secondary);
}

.cp-repse-period-note .mud-icon-root {
    color: var(--cp-text-muted);
    flex-shrink: 0;
}

/* El periodo es texto, no cifra: mismo bloque, tamaño de cuerpo. */
.cp-repse-stat--period {
    margin-left: auto;
    align-items: flex-end;
    min-width: 0;
}

.cp-repse-stat--period .cp-repse-stat__value {
    font-size: 13px;
    font-weight: 500;
    text-transform: capitalize;
}

/* ══ Declaraciones REPSE: la pantalla cabe en una pantalla (S-236) ══
   Antes de la primera celda editable había 982 px de contexto apilado
   —encabezado, filtros, pestañas, barra del paquete, cifras INFONAVIT,
   leyenda y un selector de contratos de alto fijo—, así que en un
   portátil la tabla de captura no se veía al abrir y, al bajar a ella,
   se perdían de vista las cifras contra las que hay que cuadrarla.
   Ahora la página es un espacio de trabajo de alto fijo: barra, cifras
   y una fila que reparte panel de contratos + tabla. Lo único que
   desplaza es lo que tiene filas. */
.cp-repse-workspace {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    gap: 10px;
    padding: 12px;
    background: var(--cp-bg-app);
}

.cp-repse-workspace > * {
    flex-shrink: 0;
}

/* ── Barra de trabajo ──────────────────────────────────────────────
   Encabezado + filtros + pestañas en una sola línea. El periodo es una
   pastilla que abre los tres selects; los trámites, un segmentado. */
.cp-workbar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 9px 12px;
    background: var(--cp-bg-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
}

.cp-workbar__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--cp-radius-md);
    flex-shrink: 0;
}

.cp-workbar__title {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

/* Pastilla del periodo: es el activador del menú de selección, así que
   tiene que leerse como un control y no como una etiqueta. */
.cp-period-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 32px;
    padding: 0 10px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background: var(--cp-bg-surface);
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    color: var(--cp-text-primary);
}

.cp-period-pill:hover {
    border-color: var(--cp-accent);
    background: var(--cp-accent-soft);
}

.cp-period-pill__label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--cp-text-secondary);
}

.cp-period-pill__name {
    font-weight: 600;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-period-pill__sep {
    color: #cbd5e1;
}

.cp-period-menu {
    width: 340px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Segmentado de trámite. Sustituye a las pestañas: dos destinos no
   necesitan 56 px de tira propia. */
.cp-segmented {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--cp-radius-md);
    background: var(--cp-bg-surface-alt);
}

.cp-segmented__item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 26px;
    padding: 0 11px;
    border: none;
    border-radius: var(--cp-radius-sm);
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--cp-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.cp-segmented__item:hover:not(.cp-segmented__item--on) {
    color: var(--cp-text-primary);
}

.cp-segmented__item--on {
    font-weight: 600;
    color: var(--cp-accent-text);
    background: var(--cp-bg-surface);
    box-shadow: var(--cp-shadow-sm);
}

/* ── Cifras INFONAVIT compactas ────────────────────────────────────
   Las mismas tres cifras de S-235 en un cuarto del alto. El riel de
   color es el estado: ámbar mientras siguen siendo la estimación del
   CFDI, verde cuando alguien ya las ajustó contra su EMA/EBA. */
.cp-figures-strip {
    display: flex;
    overflow: hidden;
    background: var(--cp-bg-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
}

.cp-figures-strip__rail {
    width: 4px;
    flex-shrink: 0;
    background: var(--cp-warning);
}

.cp-figures-strip--adjusted .cp-figures-strip__rail {
    background: var(--cp-success);
}

.cp-figures-strip__body {
    flex: 1;
    min-width: 0;
    padding: 8px 12px 10px;
}

.cp-figures-strip__fields {
    display: flex;
    gap: 14px;
    margin-top: 4px;
}

.cp-figures-strip__fields > * {
    flex: 1;
    min-width: 0;
}

/* ── Panel de contratos + detalle ──────────────────────────────────
   La fila que se lleva todo el alto sobrante. `min-height: 0` en los
   dos: sin él, un hijo con desplazamiento propio crece hasta desbordar
   la pantalla en vez de desplazarse (comportamiento por defecto de
   flex). */
.cp-repse-split {
    display: flex;
    gap: 10px;
    flex: 1;
    min-height: 0;
}

.cp-repse-split__detail {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--cp-bg-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
}

/* El cuerpo de la tabla es lo único que se desplaza del detalle. */
.cp-repse-split__scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Dentro del split, .cp-table-scroll ya no impone su tope de 520 px:
   el alto lo pone el contenedor, que es el que sabe cuánta pantalla
   queda. Sin esto la tabla se quedaría corta en un monitor grande. */
.cp-repse-split__scroll .cp-table-scroll,
.cp-repse-split__scroll .cp-table-scroll .mud-table-container {
    max-height: none;
    overflow: visible;
}

/* ── Panel vertical de contratos (S-236) ───────────────────────────
   Sustituye a la rejilla de alto fijo de S-205. Con veinte contratos
   una tira horizontal se recorre de lado y no dice cuáles faltan; una
   columna se recorre con la rueda y cabe un estado por tarjeta. */
.cp-contract-panel {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--cp-bg-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-lg);
}

.cp-contract-panel__head {
    padding: 10px 10px 8px;
    flex-shrink: 0;
}

.cp-contract-panel__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.cp-contract-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid var(--cp-border);
    border-radius: 12px;
    background: var(--cp-bg-surface);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--cp-text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.cp-contract-filter:hover {
    background: var(--cp-bg-surface-alt);
}

.cp-contract-filter--on {
    background: var(--cp-text-primary);
    border-color: var(--cp-text-primary);
    color: var(--cp-text-inverse);
}

.cp-contract-filter__dot {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Los sin asignar no son un contrato, pero dejan gente fuera de todos
   los archivos: van fijos arriba de la lista y no dentro de ella, donde
   el desplazamiento los perdería de vista. */
.cp-contract-panel__pinned {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 20px);
    margin: 0 10px 8px;
    padding: 8px 9px;
    border: 1px solid rgba(245, 158, 11, 0.5);
    border-radius: var(--cp-radius-md);
    background: var(--cp-warning-soft);
    color: #b45309;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    flex-shrink: 0;
}

.cp-contract-panel__pinned:hover {
    border-color: var(--cp-warning);
}

.cp-contract-panel__list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 10px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cp-contract-panel__foot {
    padding: 8px 10px 10px;
    border-top: 1px solid var(--cp-border-light);
    flex-shrink: 0;
}

.cp-contract-panel__bar {
    height: 5px;
    border-radius: 3px;
    background: var(--cp-bg-surface-alt);
    margin-top: 5px;
    overflow: hidden;
}

.cp-contract-panel__bar > i {
    display: block;
    height: 100%;
    background: var(--cp-success);
}

/* ── Tarjeta de contrato ───────────────────────────────────────────
   Dos líneas: número + cuenta arriba, beneficiario abajo. El punto de
   la izquierda es el estado de revisión y el triángulo, un aviso del
   contrato. Se escanea sin leer, que es lo que hace falta con veinte. */
.cp-ct {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background: var(--cp-bg-surface);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    flex-shrink: 0;
}

.cp-ct:hover {
    background: var(--cp-bg-hover);
    border-color: #cbd5e1;
}

.cp-ct--on,
.cp-ct--on:hover {
    border-color: var(--cp-accent);
    background: var(--cp-accent-soft);
    box-shadow: inset 3px 0 0 var(--cp-accent);
}

.cp-ct__dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--cp-warning);
}

.cp-ct__dot--reviewed {
    background: var(--cp-success);
}

.cp-ct__body {
    flex: 1;
    min-width: 0;
}

.cp-ct__top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cp-ct__number {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    letter-spacing: -0.2px;
    font-weight: 600;
    color: var(--cp-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-ct--on .cp-ct__number {
    color: var(--cp-accent-text);
}

.cp-ct__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--cp-bg-surface-alt);
    color: var(--cp-text-secondary);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    margin-left: auto;
}

.cp-ct--on .cp-ct__count {
    background: var(--cp-accent);
    color: #fff;
}

.cp-ct__name {
    font-size: 11.5px;
    color: var(--cp-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-ct--on .cp-ct__name {
    color: #334155;
}

/* Aviso del contrato (vigencia, datos incompletos): un triángulo y el
   porqué en el tooltip. En la rejilla de S-205 eran chips de texto, que
   en 300 px de ancho no caben y tampoco se escanean. */
.cp-ct__flag {
    display: inline-flex;
    color: var(--cp-warning);
    flex-shrink: 0;
}

.cp-ct__flag--info {
    color: var(--cp-accent);
}

.cp-contract-panel__empty {
    padding: 24px 10px;
    text-align: center;
    color: var(--cp-text-muted);
    font-size: 12px;
}

/* El contenido del trámite abierto: se lleva todo el alto que sobra bajo la
   barra de trabajo. Gana a la regla `flex-shrink: 0` de los hijos directos del
   espacio de trabajo, que es para las bandas de alto propio (barra, cifras). */
.cp-repse-workspace .cp-repse-tab {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1 1 0;
    min-height: 0;
}

/* Las bandas de alto propio del trámite —avisos, resumen, cifras— no se
   encogen; el reparto panel + tabla es el que se queda con lo que sobre. */
.cp-repse-tab > * {
    flex-shrink: 0;
}

.cp-repse-tab > .cp-repse-split {
    flex-grow: 1;
    flex-basis: 0;
    min-height: 0;
}

.cp-contract-panel__pinned--on {
    border-color: var(--cp-warning);
    box-shadow: inset 3px 0 0 var(--cp-warning);
}

/* ── Ajustes de la declaración REPSE (S-236, 2ª pasada) ────────────
   Siete correcciones de uso sobre la pantalla ya montada. */

/* Columna derecha del split: las cifras INFONAVIT dejan de ir a lo
   ancho de la pantalla y se ponen encima de la tabla contra la que se
   cuadran. A lo ancho le quitaban ~130 px de alto al panel de
   contratos, que en un portátil se quedaba mostrando dos. */
.cp-repse-split__main {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cp-repse-split__main > .cp-figures-strip {
    flex-shrink: 0;
}

.cp-repse-split__main > .cp-repse-split__detail {
    flex: 1 1 0;
    min-height: 0;
}

/* Importes alineados a la derecha dentro del campo, no sólo la celda:
   son cifras, y con los puntos decimales desalineados una columna de
   percepciones no se puede recorrer con la vista. */
.cp-figure-table .mud-input-slot,
.cp-figure-table input {
    text-align: right;
}

/* El periodo del renglón cabe en una línea desde S-236 ("B1 may–jun
   26"), así que la columna ya no necesita 120 px ni dos alturas. */
.cp-figure-table th.cp-figure-period,
.cp-figure-table td.cp-figure-period {
    width: 96px;
}

/* Lista de contribuyentes de la pastilla. Alto propio y desplazable:
   hay cuentas con cincuenta, y el panel no puede crecer con ellas. */
.cp-period-menu__taxpayers {
    max-height: 220px;
    overflow-y: auto;
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Los dos pasos del round-trip de percepciones ──────────────────
   Descargar la plantilla y subirla corregida son un proceso con un
   orden y con días de por medio. Como dos tarjetas numeradas se lee
   así; como una alerta y dos botones en fila, no. */
.cp-figures-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cp-figures-step {
    flex: 1 1 300px;
    min-width: 0;
    display: flex;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--cp-border);
    border-radius: var(--cp-radius-md);
    background: var(--cp-bg-surface);
}

.cp-figures-step__n {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    flex-shrink: 0;
    background: var(--cp-accent-soft);
    color: var(--cp-accent-text);
    font-size: 12px;
    font-weight: 700;
}

.cp-figures-step__body {
    flex: 1;
    min-width: 0;
}