/* ==========================================================================
   Credid Admin · sistema de diseño (dirección A del lienzo de rediseño)
   --------------------------------------------------------------------------
   - Tokens en :root (--crd-*). Todo componente nuevo toma color, tipografía y
     medidas de aquí; nunca de valores sueltos.
   - Las variables de Radzen (--rz-*) se sobrescriben SOLO dentro de .crd-app
     (el resto del documento, fuera del shell, no se toca).
   - Prefijo .crd-* en todas las clases. Sin !important.
   Plan: C:\Dev\PlanesDeTrabajo\Rediseno-Blazor-Admin\Plan-Rediseno-Blazor-Admin.md
   ========================================================================== */

/* ---- Tipografía autohospedada (IBM Plex, SIL OFL 1.1) ------------------- */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); }

/* ---- Tokens ------------------------------------------------------------- */
:root {
  --crd-navy: #0b4f8f;
  --crd-navy-700: #083a6b;
  --crd-navy-900: #062c52;
  --crd-navy-soft: #e4edf7;
  --crd-cyan: #35b8cf;
  --crd-cyan-ink: #127a8c;
  --crd-cyan-soft: #e3f6f9;

  --crd-bg: #f4f6f9;
  --crd-surface: #ffffff;
  --crd-surface-2: #fafbfc;
  --crd-border: #e1e6ec;
  --crd-border-2: #eef1f5;
  --crd-text: #182230;
  --crd-muted: #5b6b7c;
  --crd-muted-2: #8794a3;
  --crd-disabled: #c4ccd4;

  --crd-ok: #1a8a5a;      --crd-ok-soft: #e6f5ee;      --crd-ok-700: #146e48;
  --crd-warn: #b26a00;    --crd-warn-soft: #fff4e0;
  --crd-danger: #c0392b;  --crd-danger-soft: #fdecea;  --crd-danger-700: #a02d22;
  --crd-info: #0b6fb8;    --crd-info-soft: #e6f1fb;

  --crd-sidebar-bg: #062c52;
  --crd-sidebar-text: #c7d6e6;
  --crd-sidebar-icon: #8fb0d0;
  --crd-sidebar-active: rgba(255, 255, 255, .12);

  --crd-font: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --crd-font-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  --crd-fs-xs: 11.5px;
  --crd-fs-sm: 12.5px;
  --crd-fs-md: 13px;
  --crd-fs-lg: 14px;
  --crd-fs-title: 20px;
  --crd-fs-kpi: 24px;

  --crd-radius: 6px;
  --crd-radius-lg: 8px;
  --crd-control-h: 36px;
  --crd-button-h: 34px;
  --crd-sidebar-w: 240px;
  --crd-header-h: 56px;
  --crd-shadow: 0 1px 2px rgba(24, 34, 48, .06);
  --crd-shadow-panel: -8px 0 24px rgba(24, 34, 48, .12);
  --crd-focus: 0 0 0 3px rgba(53, 184, 207, .35);
}

/* ---- Radzen dentro del shell nuevo -------------------------------------- */
/* La tipografía va en el body y no solo en .crd-app porque Radzen monta sus popups con
   document.body.appendChild: el panel del dropdown, el calendario del datepicker, los diálogos y
   las notificaciones quedan FUERA de .crd-app y con el prefijo no los alcanzaba ninguna regla, así
   que las opciones se pintaban con la tipografía por defecto del navegador.. */
body { font-family: var(--crd-font); }

/* Las variables van en .crd-app Y en el body de las páginas del shell nuevo, por lo mismo: sin
   ellas el panel del dropdown, el calendario del datepicker y los diálogos salen con la paleta por
   defecto de Radzen (opción resaltada en otro azul, radios y alturas distintos).
   El :has() acota la regla a las páginas que montan el shell nuevo; en las anteriores no hay
   .crd-app, no coincide y nada cambia. Si el navegador no soporta :has(), simplemente se ignora. */
.crd-app,
body:has(.crd-app) {
  --rz-primary: var(--crd-navy);
  --rz-primary-dark: var(--crd-navy-700);
  --rz-primary-darker: var(--crd-navy-900);
  --rz-primary-light: #3d77b0;
  --rz-primary-lighter: var(--crd-navy-soft);
  --rz-secondary: var(--crd-cyan);
  --rz-secondary-dark: var(--crd-cyan-ink);
  --rz-secondary-lighter: var(--crd-cyan-soft);
  --rz-success: var(--crd-ok);
  --rz-success-lighter: var(--crd-ok-soft);
  --rz-warning: var(--crd-warn);
  --rz-warning-lighter: var(--crd-warn-soft);
  --rz-danger: var(--crd-danger);
  --rz-danger-lighter: var(--crd-danger-soft);
  --rz-info: var(--crd-info);
  --rz-info-lighter: var(--crd-info-soft);
  --rz-text-color: var(--crd-text);
  --rz-text-secondary-color: var(--crd-muted);
  --rz-body-font-family: var(--crd-font);
  --rz-body-font-size: var(--crd-fs-md);
  --rz-body-background-color: var(--crd-bg);
  --rz-base-background-color: var(--crd-surface);
  --rz-border-radius: var(--crd-radius);
  --rz-card-border-radius: var(--crd-radius-lg);
  --rz-card-border: 1px solid var(--crd-border);
  --rz-input-height: var(--crd-control-h);
  --rz-grid-header-background-color: var(--crd-surface-2);
  --rz-grid-cell-padding: 9px 10px;
  --rz-steps-number-selected-background: var(--crd-navy);
  --rz-steps-number-selected-color: #fff;
  --rz-steps-title-selected-color: var(--crd-text);
}

/* ---- Base del shell nuevo ----------------------------------------------- */
.crd-app,
.crd-app * { box-sizing: border-box; }
.crd-app {
  min-height: 100vh;
  display: flex;
  background: var(--crd-bg);
  color: var(--crd-text);
  font-family: var(--crd-font);
  font-size: var(--crd-fs-md);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.crd-app a { color: var(--crd-navy); text-decoration: none; }
.crd-app a:hover { color: var(--crd-navy-700); text-decoration: underline; }
.crd-app h1, .crd-app h2, .crd-app h3, .crd-app h4 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.crd-app p { margin: 0; }
.crd-mono { font-family: var(--crd-font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.crd-sql { max-height: 320px; overflow: auto; white-space: pre-wrap; margin: 8px 0 0; padding: 12px 14px; border-radius: var(--crd-radius); background: #1e2430; color: #e8eef7; font-family: var(--crd-font-mono); font-size: 12px; line-height: 1.45; }
.crd-bloqueos-script + .crd-bloqueos-script { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--crd-border-2); }
.crd-muted { color: var(--crd-muted); }
.crd-muted-2 { color: var(--crd-muted-2); }
.crd-text-xs { font-size: var(--crd-fs-xs); }
.crd-text-sm { font-size: var(--crd-fs-sm); }
.crd-strong { font-weight: 600; }
.crd-hidden { display: none; }
.crd-app :focus-visible { outline: none; box-shadow: var(--crd-focus); border-radius: var(--crd-radius); }

/* Aviso de excepción no controlada de Blazor Server (#blazor-error-ui en _Host.cshtml). El display:none lo mantiene oculto;
   va aquí porque este archivo lo carga _Host para toda la aplicación. blazor.server.js
   lo muestra poniendo display:block en línea cuando de verdad muere el circuito. */
#blazor-error-ui { display: none; position: fixed; left: 0; bottom: 0; width: 100%; z-index: 1000; padding: 10px 44px 10px 20px; background: var(--crd-warn-soft); color: var(--crd-warn); border-top: 1px solid var(--crd-warn); font-family: var(--crd-font); font-size: var(--crd-fs-md); box-shadow: 0 -1px 2px rgba(24, 34, 48, .12); }
#blazor-error-ui a { color: var(--crd-warn); font-weight: 600; margin-left: 8px; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 12px; top: 8px; }

/* Layout: shell */
.crd-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crd-content { flex: 1; padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 16px; }
.crd-footer { padding: 12px 24px; font-size: var(--crd-fs-xs); color: var(--crd-muted-2); border-top: 1px solid var(--crd-border); background: var(--crd-surface); display: flex; gap: 16px; }

/* Header (F0: versión mínima; F1 la sustituye por CrdHeader) */
.crd-header { height: var(--crd-header-h); flex: 0 0 var(--crd-header-h); background: var(--crd-surface); border-bottom: 1px solid var(--crd-border); display: flex; align-items: center; gap: 20px; padding: 0 20px; }
.crd-header__logo { height: 26px; width: auto; display: block; }
.crd-header__title { font-size: var(--crd-fs-sm); color: var(--crd-muted); }
.crd-header__spacer { flex: 1; }
.crd-header__user { display: flex; align-items: center; gap: 10px; padding-left: 12px; border-left: 1px solid var(--crd-border); }
.crd-header__user-name { font-size: var(--crd-fs-sm); font-weight: 600; line-height: 1.2; }
.crd-header__user-sub { font-size: var(--crd-fs-xs); color: var(--crd-muted); line-height: 1.2; }

/* Layout helpers */
.crd-row { display: flex; gap: 12px; align-items: flex-start; }
.crd-row--center { align-items: center; }
.crd-row--wrap { flex-wrap: wrap; }
.crd-row--stretch { align-items: stretch; } /* tarjetas KPI de la misma altura aunque unas lleven pie y otras no */
/* min-width: 0 porque una columna de la cuadrícula no puede encogerse por debajo de su contenido por
   defecto: una tabla ancha (el monitor de facturación automática) desbordaba la página entera en vez
   de desplazarse dentro de su .crd-table__scroll. */
.crd-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.crd-grid { display: grid; gap: 16px; }
.crd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crd-grid--main-aside { grid-template-columns: minmax(0, 1fr) 380px; }
.crd-grid--aside-main { grid-template-columns: 320px minmax(0, 1fr); }
.crd-spacer { flex: 1; }
.crd-divider-v { width: 1px; height: 24px; background: var(--crd-border); }
@media (max-width: 1100px) { .crd-grid--main-aside, .crd-grid--aside-main, .crd-grid--3, .crd-grid--4 { grid-template-columns: 1fr; } }

/* ---- CrdPageHeader ------------------------------------------------------ */
.crd-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.crd-page-header__text { display: flex; flex-direction: column; gap: 4px; }
.crd-page-header__title { font-size: var(--crd-fs-title); }
.crd-page-header__subtitle { font-size: var(--crd-fs-md); color: var(--crd-muted); max-width: 90ch; }
.crd-page-header__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ---- CrdCard ------------------------------------------------------------ */
.crd-card { background: var(--crd-surface); border: 1px solid var(--crd-border); border-radius: var(--crd-radius-lg); display: flex; flex-direction: column; min-width: 0; }
.crd-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--crd-border-2); }
.crd-card__title { font-size: var(--crd-fs-lg); font-weight: 600; }
.crd-card__subtitle { font-size: var(--crd-fs-sm); color: var(--crd-muted); }
.crd-card__actions { display: flex; gap: 8px; align-items: center; }
.crd-card__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.crd-card__body--flush { padding: 0; }

/* ---- CrdKpi ------------------------------------------------------------- */
.crd-kpi { flex: 1; min-width: 0; background: var(--crd-surface); border: 1px solid var(--crd-border); border-radius: var(--crd-radius-lg); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.crd-kpi__label { font-size: 12px; font-weight: 600; color: var(--crd-muted); }
.crd-kpi__value { font-size: var(--crd-fs-kpi); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.crd-kpi__value small { font-size: 14px; font-weight: 500; color: var(--crd-muted); }
.crd-kpi__foot { font-size: 12px; }
.crd-kpi--ok .crd-kpi__foot { color: var(--crd-ok); }
.crd-kpi--warn .crd-kpi__foot { color: var(--crd-warn); }
.crd-kpi--danger .crd-kpi__foot { color: var(--crd-danger); }
.crd-kpi--info .crd-kpi__foot { color: var(--crd-info); }
.crd-kpi--navy .crd-kpi__foot { color: var(--crd-navy); }
.crd-kpi--muted .crd-kpi__foot { color: var(--crd-muted); }

/* ---- CrdBadge ----------------------------------------------------------- */
.crd-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: var(--crd-fs-xs); font-weight: 600; white-space: nowrap; background: var(--crd-border-2); color: var(--crd-muted); }
.crd-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.crd-badge--ok { background: var(--crd-ok-soft); color: var(--crd-ok); }
.crd-badge--warn { background: var(--crd-warn-soft); color: var(--crd-warn); }
.crd-badge--danger { background: var(--crd-danger-soft); color: var(--crd-danger); }
.crd-badge--info { background: var(--crd-info-soft); color: var(--crd-info); }
.crd-badge--navy { background: var(--crd-navy-soft); color: var(--crd-navy); }
.crd-badge--cyan { background: var(--crd-cyan-soft); color: var(--crd-cyan-ink); }

/* ---- CrdChip (filtro) --------------------------------------------------- */
.crd-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--crd-border); background: var(--crd-surface); color: var(--crd-text); font: inherit; font-size: var(--crd-fs-sm); font-weight: 500; cursor: pointer; white-space: nowrap; }
.crd-chip:hover { border-color: var(--crd-muted-2); }
.crd-chip__count { font-size: 11px; color: var(--crd-muted-2); }
.crd-chip--on { background: var(--crd-navy-soft); border-color: var(--crd-navy); color: var(--crd-navy); font-weight: 600; }
.crd-chip--on .crd-chip__count { color: var(--crd-navy); }
.crd-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ---- CrdTabs ------------------------------------------------------------ */
.crd-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--crd-border); }
.crd-tab { display: flex; align-items: center; gap: 6px; padding: 10px 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: var(--crd-fs-md); font-weight: 500; color: var(--crd-muted); cursor: pointer; }
.crd-tab:hover { color: var(--crd-text); }
.crd-tab--on { color: var(--crd-navy); font-weight: 600; border-bottom-color: var(--crd-navy); }
.crd-tab__count { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--crd-border-2); color: var(--crd-muted); }
.crd-tab--on .crd-tab__count { background: var(--crd-navy-soft); color: var(--crd-navy); }

/* ---- Botones (envuelven a RadzenButton o <button>) ---------------------- */
.crd-btn { display: inline-flex; align-items: center; gap: 8px; height: var(--crd-button-h); padding: 0 14px; border-radius: var(--crd-radius); font: inherit; font-size: var(--crd-fs-md); font-weight: 600; cursor: pointer; white-space: nowrap; border: 1px solid var(--crd-border); background: var(--crd-surface); color: var(--crd-text); text-decoration: none; }
.crd-btn:hover { background: var(--crd-surface-2); text-decoration: none; }
.crd-btn:disabled, .crd-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.crd-btn--primary { background: var(--crd-navy); border-color: var(--crd-navy); color: #fff; }
.crd-btn--primary:hover { background: var(--crd-navy-700); }
.crd-btn--ghost { background: transparent; border-color: transparent; color: var(--crd-navy); }
.crd-btn--danger { background: var(--crd-danger); border-color: var(--crd-danger); color: #fff; }
.crd-btn--danger:hover { background: var(--crd-danger-700); border-color: var(--crd-danger-700); }
.crd-btn--danger-outline { background: var(--crd-surface); border-color: #f1b8b3; color: var(--crd-danger); }
.crd-btn--danger-outline:hover { background: var(--crd-danger-soft); }
.crd-btn--ok { background: var(--crd-ok); border-color: var(--crd-ok); color: #fff; }
.crd-btn--ok:hover { background: var(--crd-ok-700); border-color: var(--crd-ok-700); }
.crd-btn--icon { width: 30px; height: 30px; padding: 0; justify-content: center; border-color: transparent; background: transparent; color: var(--crd-muted); }
.crd-btn--icon:hover { background: var(--crd-border-2); color: var(--crd-text); }
.crd-btn--block { width: 100%; justify-content: center; }
/* Enlaces con forma de botón (<a class="crd-btn ...">, 29 en el shell nuevo): la regla `.crd-app a` (0,1,1) le ganaba a
   `.crd-btn--primary` (0,1,0) y el texto y el icono salían navy sobre navy, es decir, invisibles. Se repite el color con la
   misma especificidad que el enlace. Reportado el 2026-09-23. */
.crd-app a.crd-btn, .crd-app a.crd-btn:hover { color: var(--crd-text); text-decoration: none; }
.crd-app a.crd-btn--primary, .crd-app a.crd-btn--primary:hover,
.crd-app a.crd-btn--danger, .crd-app a.crd-btn--danger:hover,
.crd-app a.crd-btn--ok, .crd-app a.crd-btn--ok:hover { color: #fff; }
.crd-app a.crd-btn--ghost, .crd-app a.crd-btn--ghost:hover { color: var(--crd-navy); }
.crd-app a.crd-btn--danger-outline, .crd-app a.crd-btn--danger-outline:hover { color: var(--crd-danger); }
.crd-app a.crd-btn--icon { color: var(--crd-muted); }
.crd-app a.crd-btn--icon:hover { color: var(--crd-text); }

/* ---- Formularios (RadzenTextBox, RadzenDropDown, etc. dentro del shell) - */
.crd-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.crd-field__label { font-size: 12px; font-weight: 600; color: var(--crd-muted); }
.crd-field__label abbr { color: var(--crd-danger); text-decoration: none; }
.crd-field__hint { font-size: var(--crd-fs-xs); color: var(--crd-muted-2); }
.crd-field__error { font-size: var(--crd-fs-xs); color: var(--crd-danger); }
/* ValidationMessageFor pinta el span aunque no haya error; vacío no debe abrir hueco. */
.crd-field__error:empty { display: none; }
/* Campo de texto nativo, con la misma forma que los de Radzen: lo usan las páginas que no montan
   Blazor (la de ingreso) y los formularios sueltos dentro del shell. */
.crd-input { width: 100%; height: var(--crd-control-h); padding: 0 12px; font: inherit; font-size: var(--crd-fs-md); color: var(--crd-text); background: var(--crd-surface); border: 1px solid var(--crd-border); border-radius: var(--crd-radius); }
.crd-input::placeholder { color: var(--crd-muted-2); }
.crd-input:focus { outline: none; border-color: var(--crd-cyan); box-shadow: var(--crd-focus); }
.crd-input.input-validation-error { border-color: var(--crd-danger); }
.crd-app .rz-textbox, .crd-app .rz-dropdown, .crd-app .rz-datepicker, .crd-app .rz-numeric, .crd-app .rz-textarea { font-family: var(--crd-font); }
.crd-app .rz-textbox, .crd-app .rz-dropdown, .crd-app .rz-datepicker .rz-inputtext, .crd-app .rz-numeric .rz-inputtext { border-color: var(--crd-border); border-radius: var(--crd-radius); }

/* ---- Tablas (CrdDataTable envuelve un RadzenDataGrid) ------------------- */
.crd-table { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.crd-table__toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.crd-table__scroll { overflow-x: auto; }
.crd-app .rz-datatable, .crd-app .rz-data-grid { border: 0; border-radius: 0; background: transparent; }
.crd-app .rz-grid-table { font-size: var(--crd-fs-sm); border-collapse: collapse; }
.crd-app .rz-grid-table thead th { font-size: var(--crd-fs-xs); font-weight: 600; color: var(--crd-muted); background: var(--crd-surface-2); border-bottom: 1px solid var(--crd-border); padding: 8px 10px; white-space: nowrap; }
.crd-app .rz-grid-table thead th .rz-column-title { color: var(--crd-muted); }
.crd-app .rz-grid-table td { padding: 9px 10px; border-bottom: 1px solid var(--crd-border-2); vertical-align: middle; color: var(--crd-text); }
.crd-app .rz-grid-table tr.crd-tr--warn td { background: #fffaf0; }
.crd-app .rz-grid-table tr.crd-tr--err td { background: #fff5f4; }
.crd-app .rz-grid-table tr.crd-tr--sel td { background: #f2f7fc; }
.crd-app .rz-grid-table tr.crd-tr--muted td { color: var(--crd-muted-2); }
.crd-app .rz-pager { background: transparent; border: 0; padding: 8px 0 0; font-size: 12px; }
.crd-app .rz-datatable-loading, .crd-app .rz-data-grid-loading { opacity: .5; }
.crd-table--compact .rz-grid-table td { padding: 6px 10px; }
.crd-table__actions { display: flex; gap: 2px; }
.crd-td-right { text-align: right; }

/* ---- CrdProgress -------------------------------------------------------- */
.crd-progress { height: 6px; border-radius: 999px; background: #e6ebf0; overflow: hidden; width: 100%; }
.crd-progress__bar { height: 100%; border-radius: 999px; background: var(--crd-navy); transition: width .3s ease; }
.crd-progress--lg { height: 10px; }
.crd-progress--ok .crd-progress__bar { background: var(--crd-ok); }
.crd-progress--warn .crd-progress__bar { background: var(--crd-warn); }
.crd-progress--danger .crd-progress__bar { background: var(--crd-danger); }
.crd-progress--cyan .crd-progress__bar { background: var(--crd-cyan); }
@media (prefers-reduced-motion: reduce) { .crd-progress__bar { transition: none; } }

/* ---- CrdAlert ----------------------------------------------------------- */
.crd-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--crd-radius); font-size: var(--crd-fs-sm); line-height: 1.45; background: var(--crd-info-soft); color: var(--crd-info); }
.crd-alert__icon { flex: 0 0 auto; margin-top: 1px; }
.crd-alert__body { color: var(--crd-text); }
.crd-alert--ok { background: var(--crd-ok-soft); color: var(--crd-ok); }
.crd-alert--warn { background: var(--crd-warn-soft); color: var(--crd-warn); }
.crd-alert--danger { background: var(--crd-danger-soft); color: var(--crd-danger); }

/* ---- CrdEmptyState ------------------------------------------------------ */
.crd-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px; color: var(--crd-muted); text-align: center; }
.crd-empty__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--crd-border-2); display: flex; align-items: center; justify-content: center; color: var(--crd-muted-2); }
.crd-empty__title { font-size: var(--crd-fs-md); font-weight: 600; color: var(--crd-text); }
.crd-empty__text { font-size: 12px; }
.crd-empty__actions { padding-top: 6px; display: flex; gap: 8px; }

/* ---- CrdSkeleton -------------------------------------------------------- */
.crd-skeleton { display: flex; flex-direction: column; gap: 10px; }
.crd-skeleton__line { height: 12px; border-radius: 4px; background: linear-gradient(90deg, var(--crd-border-2) 25%, #f6f8fa 37%, var(--crd-border-2) 63%); background-size: 400% 100%; animation: crd-shimmer 1.4s ease infinite; }
@keyframes crd-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .crd-skeleton__line { animation: none; } }

/* ---- CrdSidePanel ------------------------------------------------------- */
.crd-panel-backdrop { position: fixed; inset: 0; background: rgba(6, 44, 82, .32); z-index: 1000; }
.crd-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--crd-surface); box-shadow: var(--crd-shadow-panel); z-index: 1001; display: flex; flex-direction: column; }
.crd-panel--wide { width: min(720px, 100vw); }
.crd-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--crd-border-2); }
.crd-panel__title { font-size: 16px; font-weight: 600; }
.crd-panel__subtitle { font-size: var(--crd-fs-sm); color: var(--crd-muted); }
.crd-panel__body { flex: 1; overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.crd-panel__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--crd-border-2); }

/* ---- CrdStageCard (etapas con estado) ----------------------------------- */
.crd-stage { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--crd-border); border-radius: var(--crd-radius-lg); background: var(--crd-surface); }
.crd-stage--queue, .crd-stage--cancel { opacity: .6; }
.crd-stage--current { border-color: var(--crd-navy); background: #f2f7fc; }
.crd-stage__head { display: flex; align-items: center; justify-content: space-between; }
.crd-stage__eyebrow { font-size: var(--crd-fs-xs); font-weight: 600; color: var(--crd-muted); letter-spacing: .02em; }
.crd-stage__title { font-size: var(--crd-fs-lg); font-weight: 600; }
.crd-stage__lines { display: flex; flex-direction: column; gap: 6px; font-size: var(--crd-fs-sm); }
.crd-stage__line { display: flex; gap: 8px; align-items: flex-start; }
.crd-stage__line svg { margin-top: 2px; }

/* ---- CrdWizard ---------------------------------------------------------- */
.crd-wizard { display: flex; flex-direction: column; gap: 16px; }
.crd-stepper { display: flex; align-items: center; background: var(--crd-surface); border: 1px solid var(--crd-border); border-radius: var(--crd-radius-lg); padding: 12px 16px; }
.crd-step { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.crd-step:last-child { flex: 0 0 auto; }
.crd-step__inner { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.crd-step__inner:disabled { cursor: default; }
.crd-step__num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; background: var(--crd-surface); color: var(--crd-muted-2); border: 1px solid var(--crd-border); flex: 0 0 auto; }
.crd-step__label { font-size: var(--crd-fs-md); font-weight: 500; color: var(--crd-muted-2); white-space: nowrap; }
.crd-step__line { flex: 1; height: 1px; background: var(--crd-border); margin: 0 12px; }
.crd-step--done .crd-step__num { background: var(--crd-cyan); color: #fff; border-color: var(--crd-cyan); }
.crd-step--done .crd-step__label { color: var(--crd-text); }
.crd-step--done .crd-step__line { background: var(--crd-cyan); }
.crd-step--current .crd-step__num { background: var(--crd-navy); color: #fff; border-color: var(--crd-navy); }
.crd-step--current .crd-step__label { color: var(--crd-text); font-weight: 600; }
.crd-wizard__body { display: flex; flex-direction: column; gap: 16px; }
.crd-wizard__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--crd-surface); border: 1px solid var(--crd-border); border-radius: var(--crd-radius-lg); padding: 12px 16px; position: sticky; bottom: 12px; box-shadow: var(--crd-shadow); }
.crd-wizard__rule { display: flex; gap: 8px; align-items: center; font-size: var(--crd-fs-md); color: var(--crd-muted); }
.crd-wizard__rule--blocked { color: var(--crd-warn); }
.crd-wizard__actions { display: flex; gap: 8px; }
.crd-wizard__resume { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--crd-radius-lg); background: var(--crd-cyan-soft); color: var(--crd-text); font-size: var(--crd-fs-md); }

/* ---- Vertical steps (paneles: anulación, incidencia) -------------------- */
.crd-vsteps { display: flex; flex-direction: column; }
.crd-vstep { display: flex; gap: 12px; }
.crd-vstep__rail { display: flex; flex-direction: column; align-items: center; }
.crd-vstep__rail .crd-step__num { width: 24px; height: 24px; }
.crd-vstep__rail::after { content: ''; flex: 1; width: 1px; background: var(--crd-border); margin: 4px 0; }
.crd-vstep:last-child .crd-vstep__rail::after { display: none; }
.crd-vstep__body { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; flex: 1; min-width: 0; }
.crd-vstep__title { font-size: var(--crd-fs-md); font-weight: 600; }
.crd-vstep--upcoming .crd-vstep__title { color: var(--crd-muted-2); }

/* ---- Avatar / foto ------------------------------------------------------ */
.crd-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--crd-navy-soft); color: var(--crd-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex: 0 0 auto; }
.crd-avatar--lg { width: 44px; height: 44px; font-size: 16px; }

/* ---- Registro en vivo (log) --------------------------------------------- */
.crd-log { font-family: var(--crd-font-mono); font-size: var(--crd-fs-xs); line-height: 1.7; background: #0f1720; color: #c7d6e6; border-radius: var(--crd-radius); padding: 12px; overflow: auto; }

/* ---- Icono -------------------------------------------------------------- */
.crd-icon { flex: 0 0 auto; display: inline-block; vertical-align: middle; }

/* ---- CrdSidebar (F1) ---------------------------------------------------- */
.crd-sidebar { width: var(--crd-sidebar-w); flex: 0 0 var(--crd-sidebar-w); background: var(--crd-sidebar-bg); color: #fff; display: flex; flex-direction: column; padding: 12px 0 16px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.crd-sidebar__nav { display: flex; flex-direction: column; gap: 2px; padding: 0 10px; }
.crd-sidebar__group { display: flex; flex-direction: column; }
.crd-sidebar__group-head { display: flex; align-items: center; justify-content: space-between; height: 36px; padding: 0 12px; border: 0; background: none; color: var(--crd-sidebar-text); font: inherit; font-size: var(--crd-fs-sm); font-weight: 600; letter-spacing: .01em; cursor: pointer; border-radius: var(--crd-radius); text-align: left; }
.crd-sidebar__group-head:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.crd-sidebar__group-head--open { color: #fff; }
.crd-sidebar__group-head .crd-icon { color: var(--crd-sidebar-icon); }
.crd-sidebar__items { display: flex; flex-direction: column; gap: 2px; padding: 2px 0 8px; }
.crd-sidebar__item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; border-radius: var(--crd-radius); color: var(--crd-sidebar-text); font-size: var(--crd-fs-md); font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; }
.crd-sidebar__item span { overflow: hidden; text-overflow: ellipsis; }
.crd-sidebar__item .crd-icon { color: var(--crd-sidebar-icon); }
.crd-sidebar__item:hover { color: #fff; background: rgba(255, 255, 255, .06); text-decoration: none; }
.crd-sidebar__item--sub { height: 32px; padding-left: 14px; }
.crd-sidebar__item--on { color: #fff; background: var(--crd-sidebar-active); font-weight: 600; box-shadow: inset 3px 0 0 var(--crd-cyan); }
.crd-sidebar__item--on .crd-icon { color: var(--crd-cyan); }
.crd-sidebar__foot { margin: auto 20px 0; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: 11px; color: var(--crd-sidebar-icon); }
.crd-app .crd-sidebar a { color: var(--crd-sidebar-text); }
.crd-app .crd-sidebar a.crd-sidebar__item--on, .crd-app .crd-sidebar a:hover { color: #fff; }

/* ---- CrdHeader (F1): migas y búsqueda ----------------------------------- */
.crd-header__brand { display: flex; align-items: center; }
.crd-crumbs { display: flex; align-items: center; gap: 8px; font-size: var(--crd-fs-sm); color: var(--crd-muted); min-width: 0; }
.crd-crumbs__item--current { color: var(--crd-text); font-weight: 600; }
.crd-crumbs__sep { color: var(--crd-muted-2); }
.crd-search { position: relative; display: flex; align-items: center; gap: 8px; width: 360px; height: 36px; padding: 0 10px 0 12px; border: 1px solid var(--crd-border); border-radius: var(--crd-radius); background: var(--crd-bg); color: var(--crd-muted-2); }
.crd-search:focus-within { background: var(--crd-surface); border-color: var(--crd-navy); box-shadow: var(--crd-focus); }
.crd-search__icon { color: var(--crd-muted-2); }
.crd-search__input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: var(--crd-fs-sm); color: var(--crd-text); outline: none; }
.crd-search__input::placeholder { color: var(--crd-muted-2); }
.crd-search__input::-webkit-search-cancel-button { display: none; }
.crd-search__kbd { font-family: var(--crd-font-mono); font-size: 11px; padding: 1px 6px; border: 1px solid var(--crd-border); border-radius: 4px; background: var(--crd-surface); color: var(--crd-muted); }
.crd-search__list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: var(--crd-surface); border: 1px solid var(--crd-border); border-radius: var(--crd-radius-lg); box-shadow: 0 8px 24px rgba(24, 34, 48, .12); z-index: 100; }
.crd-search__option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--crd-radius); font-size: var(--crd-fs-md); color: var(--crd-text); cursor: pointer; }
.crd-search__option .crd-icon { color: var(--crd-muted-2); }
.crd-search__option--on, .crd-search__option:hover { background: var(--crd-navy-soft); color: var(--crd-navy); }
/* Atajos a datos (Documentos, Clientes de facturación): van después de las pantallas y se separan con una línea. */
.crd-search__option--data { border-top: 1px solid var(--crd-border); border-radius: 0; margin-top: 2px; }
.crd-search__option--data + .crd-search__option--data { border-top: 0; margin-top: 0; }
.crd-search__name { flex: 1; }
.crd-search__domain { font-size: var(--crd-fs-xs); color: var(--crd-muted-2); }
@media (max-width: 1100px) { .crd-search { width: 240px; } .crd-crumbs { display: none; } }

/* ---- Inicio (F1): tareas y procesos ------------------------------------- */
.crd-task { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--crd-border-2); }
.crd-task:last-child { border-bottom: 0; }
.crd-task__icon { width: 34px; height: 34px; border-radius: var(--crd-radius-lg); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; background: var(--crd-info-soft); color: var(--crd-info); }
.crd-task__icon--warn { background: var(--crd-warn-soft); color: var(--crd-warn); }
.crd-task__icon--danger { background: var(--crd-danger-soft); color: var(--crd-danger); }
.crd-task__icon--ok { background: var(--crd-ok-soft); color: var(--crd-ok); }
.crd-task__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crd-task__title { font-size: var(--crd-fs-md); font-weight: 600; }
.crd-task__sub { font-size: 12px; color: var(--crd-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crd-proc { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--crd-border-2); }
.crd-proc:last-child { border-bottom: 0; }
.crd-proc__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.crd-proc__name { font-size: var(--crd-fs-md); font-weight: 600; }
.crd-proc__foot { font-size: 12px; color: var(--crd-muted); }

/* ---- Documentos (F2.1): anulación y envío -------------------------------- */
.crd-step__num--done { background: var(--crd-cyan); color: #fff; border-color: var(--crd-cyan); }
.crd-step__num--cur { background: var(--crd-navy); color: #fff; border-color: var(--crd-navy); }
.crd-anular-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--crd-border); border-radius: var(--crd-radius); font-size: var(--crd-fs-sm); cursor: pointer; }
.crd-anular-item__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.crd-anular-total { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-radius: var(--crd-radius); background: var(--crd-surface-2); font-size: var(--crd-fs-md); }
.crd-envio-fila { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--crd-border-2); font-size: var(--crd-fs-sm); }
.crd-envio-fila__cliente { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crd-app .rz-dialog-content { padding: 0; }

/* ---- Clientes de facturación (F2.2): lista + ficha con pestañas ---------- */
.crd-clientes { align-items: start; }
.crd-clientes__lista { position: sticky; top: 12px; }
.crd-clientes__buscar { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-bottom: 1px solid var(--crd-border-2); }
.crd-search--block { width: 100%; }
.crd-clientes__items { max-height: calc(100vh - 340px); min-height: 200px; overflow-y: auto; }
.crd-clientes__pie { padding: 8px 12px; border-top: 1px solid var(--crd-border-2); }
.crd-cliente-item { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--crd-border-2); background: none; font: inherit; color: var(--crd-text); cursor: pointer; }
.crd-cliente-item:hover { background: var(--crd-surface-2); }
.crd-cliente-item--on { background: var(--crd-navy-soft); box-shadow: inset 3px 0 0 var(--crd-navy); }
.crd-cliente-item__name { font-size: var(--crd-fs-md); font-weight: 600; }
.crd-cliente-item__sub { font-size: var(--crd-fs-xs); color: var(--crd-muted); font-variant-numeric: tabular-nums; }
.crd-cliente-item__badges { display: flex; gap: 4px; flex-wrap: wrap; }
.crd-cliente-item__badges:empty { display: none; }
.crd-ficha-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.crd-ficha-head__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crd-ficha-head__title { font-size: 17px; }
.crd-ficha-head__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.crd-ficha-head__actions { margin-left: auto; display: flex; gap: 8px; }
.crd-tab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 4px; }
.crd-tab-head__title { font-size: var(--crd-fs-lg); font-weight: 600; }
.crd-kv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
.crd-kv__item { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.crd-kv__item--2 { grid-column: span 2; }
.crd-kv__item--wide { grid-column: 1 / -1; }
.crd-kv__label { font-size: 12px; font-weight: 600; color: var(--crd-muted); }
.crd-kv__value { font-size: var(--crd-fs-md); overflow-wrap: anywhere; }
.crd-form { padding: 12px; border: 1px solid var(--crd-border-2); border-radius: var(--crd-radius-lg); background: var(--crd-surface-2); }
.crd-form-inline { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px dashed var(--crd-border); border-radius: var(--crd-radius-lg); }
.crd-form-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Exclusión de referencias: resultado con el botón «Ver detalle» de los registros que no se eliminaron. */
.crd-exclusion__resultado { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.crd-exclusion__resultado .crd-btn { margin-left: auto; height: 28px; }
/* Carga de referencias, paso 4: el badge del catálogo abre el panel con los valores del archivo y su código. */
.crd-carga__catalogo { display: inline-flex; gap: 4px; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.crd-carga__catalogo:hover .crd-badge, .crd-carga__catalogo:focus-visible .crd-badge { box-shadow: 0 0 0 1px currentColor; }
.crd-carga__valores-catalogo tr.crd-tr--warn td { background: #fffaf0; }
.crd-carga__valores-catalogo td .crd-text-sm { display: block; margin-top: 4px; }
.crd-switch-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
/* Desplegable nativo con la forma de los campos del rediseño (panel de catálogos de la carga de referencias). */
.crd-select { width: 100%; padding: 6px 10px; font: inherit; font-size: var(--crd-fs-sm); color: var(--crd-text); background: var(--crd-surface); border: 1px solid var(--crd-border); border-radius: var(--crd-radius); }
.crd-select:focus { outline: 2px solid var(--crd-cyan); outline-offset: 1px; }
.crd-plain-table { width: 100%; border-collapse: collapse; font-size: var(--crd-fs-sm); }
.crd-plain-table th { text-align: left; font-size: var(--crd-fs-xs); font-weight: 600; color: var(--crd-muted); background: var(--crd-surface-2); border-bottom: 1px solid var(--crd-border); padding: 8px 10px; white-space: nowrap; }
.crd-plain-table td { padding: 8px 10px; border-bottom: 1px solid var(--crd-border-2); vertical-align: middle; }
.crd-plain-table tr.crd-tr--muted td { color: var(--crd-muted-2); }
.crd-plain-table tr.crd-tr--sel td { background: #f2f7fc; }
@media (max-width: 1100px) { .crd-clientes__lista { position: static; } .crd-clientes__items { max-height: 320px; } .crd-kv { grid-template-columns: 1fr 1fr; } .crd-kv__item--2 { grid-column: span 1; } }

/* ---- Editor de documento (F2.3): comprobación, confirmación, verificación -- */
.crd-editor { align-items: start; }
.crd-comprobacion { position: sticky; top: 12px; }
.crd-comprobacion__tabla td, .crd-comprobacion__tabla th { padding: 6px 10px; }
.crd-comprobacion__tabla tr.crd-tr--warn td { background: #fffaf0; }
.crd-comprobacion__justificar td { background: #fffaf0; padding-top: 0; }
.crd-comprobacion--detalle { position: static; }
.crd-comprobacion__totales { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 16px; font-size: var(--crd-fs-sm); color: var(--crd-muted); }
.crd-editor__items tfoot td { background: var(--crd-surface-2); border-top: 1px solid var(--crd-border); }
.crd-item-impuesto { gap: 8px; padding: 6px 8px; border: 1px solid var(--crd-border-2); border-radius: var(--crd-radius); }
.crd-otro-dato { gap: 6px; }
.crd-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--crd-fs-md); }
.crd-checklist li { display: flex; align-items: center; gap: 8px; }
.crd-checklist--ok .crd-icon { color: var(--crd-ok); }
.crd-checklist--bad { color: var(--crd-danger); }
.crd-checklist--warn { color: var(--crd-warn); }
.crd-lista-errores { margin: 0; padding-left: 18px; }
.crd-confirm { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100vw - 32px)); background: var(--crd-surface); border-radius: var(--crd-radius-lg); box-shadow: 0 16px 48px rgba(24, 34, 48, .24); z-index: 1002; display: flex; flex-direction: column; overflow: hidden; }
.crd-confirm__header { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--crd-border-2); color: var(--crd-navy); }
.crd-confirm__header h3 { font-size: 16px; color: var(--crd-text); }
.crd-confirm__body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; font-size: var(--crd-fs-md); }
.crd-confirm__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--crd-border-2); }
.crd-confirm--danger .crd-confirm__header { background: var(--crd-danger); color: #fff; border-bottom-color: var(--crd-danger); }
.crd-confirm--danger .crd-confirm__header h3 { color: #fff; }
@media (max-width: 1100px) { .crd-comprobacion { position: static; } }

/* ---- Cierre mensual (F2.4): revisión por cliente y utilidades de texto ----- */
.crd-revision { display: flex; flex-direction: column; gap: 12px; }
.crd-revision .crd-comprobacion { position: static; }
.crd-text-warn { color: var(--crd-warn); }
.crd-text-danger { color: var(--crd-danger); }

/* ---- Facturación automática (F2.5): diagrama de pasos, registro y detalle ---
   Absorbe el antiguo facturacion-automatica.css con los tokens del rediseño. */
.crd-fa-flujo { display: flex; align-items: stretch; gap: 0; padding: 12px 8px; border: 1px solid var(--crd-border); border-radius: var(--crd-radius-lg); background: var(--crd-surface-2); overflow-x: auto; }
.crd-fa-paso { position: relative; flex: 1 1 0; min-width: 104px; display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--crd-surface); border: 2px solid var(--crd-border); border-radius: var(--crd-radius-lg); padding: 8px 10px 10px; cursor: pointer; font: inherit; color: inherit; transition: border-color .18s, box-shadow .18s, transform .18s; }
.crd-fa-paso:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(6, 44, 82, .1); }
.crd-fa-paso:focus-visible { outline: none; box-shadow: var(--crd-focus); }
.crd-fa-paso--sel { outline: 2px solid var(--crd-navy); outline-offset: 1px; }
.crd-fa-paso--pendiente { opacity: .68; }
.crd-fa-paso--pendiente .crd-fa-paso__num { background: var(--crd-muted-2); }
.crd-fa-paso--activo { border-color: var(--crd-navy); box-shadow: 0 0 0 3px rgba(11, 79, 143, .16); }
.crd-fa-paso--hecho { border-color: var(--crd-ok); }
.crd-fa-paso__head { display: flex; align-items: center; gap: 6px; }
.crd-fa-paso__num { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: var(--crd-navy); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.crd-fa-paso__titulo { font-size: var(--crd-fs-sm); font-weight: 600; color: var(--crd-text); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.crd-fa-paso__nums { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; }
.crd-fa-num { font-weight: 700; }
.crd-fa-num--proc { font-size: 19px; color: var(--crd-navy); }
.crd-fa-num--hechos { font-size: 15px; color: var(--crd-ok); }
.crd-fa-num--total { font-size: 13px; color: var(--crd-muted); font-weight: 600; }
.crd-fa-paso__bar { height: 5px; border-radius: 3px; background: var(--crd-border-2); overflow: hidden; }
.crd-fa-paso__fill { display: block; height: 100%; background: var(--crd-ok); transition: width .3s ease; }
.crd-fa-paso--result { flex: 1 1 0; min-width: 132px; border-color: var(--crd-navy-900); cursor: default; }
.crd-fa-paso--result:hover { transform: none; box-shadow: none; }
.crd-fa-result { display: flex; gap: 5px; flex-wrap: wrap; }
.crd-fa-chip { flex: 1 1 auto; text-align: center; border-radius: var(--crd-radius); padding: 4px 6px; font-size: 13px; font-weight: 700; color: #fff; white-space: nowrap; }
.crd-fa-chip--ok { background: var(--crd-ok); }
.crd-fa-chip--omit { background: var(--crd-warn); }
.crd-fa-chip--err { background: var(--crd-danger); }
.crd-fa-conector { flex: 0 0 auto; display: flex; align-items: center; padding: 0 4px; color: var(--crd-muted-2); }
.crd-fa-log { height: 260px; overflow-y: auto; background: var(--crd-navy-900); color: #d3dae6; font-family: var(--crd-font-mono, Consolas, "Courier New", monospace); font-size: 12px; border-radius: var(--crd-radius); padding: 10px; white-space: pre-wrap; }
.crd-fa-log__linea { padding: 1px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
/* Celda "Detalle" de las tablas del monitor: el mensaje de un error puede ser una excepción entera, y
   dejarlo envolver libre hacía filas de diez líneas. Se acota a dos; el texto completo va en el title y
   en el panel de detalle, que abre el botón de icono de al lado. */
.crd-fa-celda { display: flex; align-items: flex-start; gap: 6px; min-width: 0; }
.crd-fa-motivo { flex: 1; min-width: 0; white-space: normal; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.crd-fa-celda .crd-btn--icon { flex: 0 0 auto; width: 26px; height: 26px; margin-top: -3px; }
.crd-fa-detalle { white-space: pre-wrap; word-break: break-word; font-size: var(--crd-fs-sm); max-height: 55vh; overflow: auto; margin: 0; padding: 10px; background: var(--crd-surface-2); border: 1px solid var(--crd-border-2); border-radius: var(--crd-radius); }
@media (max-width: 1100px) { .crd-fa-paso { min-width: 120px; } }

/* ---- Bandeja de referencias (F3.1): tarjetas de carga en curso ------------ */
.crd-carga { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--crd-surface); border: 1px solid var(--crd-border); border-radius: var(--crd-radius-lg); }
.crd-carga__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.crd-carga .crd-form-actions { margin-top: auto; padding-top: 4px; }

/* ---- Asistente de carga de referencias (F3.2): dropzone ------------------ */
.crd-dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 28px 16px; border: 2px dashed var(--crd-border); border-radius: var(--crd-radius-lg); background: var(--crd-surface-2); text-align: center; }
.crd-dropzone:hover, .crd-dropzone:focus-within { border-color: var(--crd-navy); background: var(--crd-navy-soft); }
.crd-dropzone__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.crd-field--2 { grid-column: span 2; }

/* ---- Pantalla de ingreso (Pages/Sistema/Ingresar.cshtml) ------------------
   Es una Razor Page suelta: no monta Blazor ni el shell, así que carga solo este archivo y
   necesita su propio reinicio de márgenes. Reutiliza .crd-app para heredar tokens, tipografía
   y el reinicio de box-sizing; el resto son clases .crd-login-*. */
.crd-login-body { margin: 0; }
.crd-login__aside {
  flex: 0 0 42%;
  max-width: 520px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 48px 44px;
  background: linear-gradient(160deg, var(--crd-navy-900) 0%, var(--crd-navy-700) 100%);
  color: #fff;
}
/* Acento cyan del logo, apagado, para que el panel no sea un rectángulo plano. */
.crd-login__aside::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -140px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: var(--crd-cyan);
  opacity: .14;
}
.crd-login__logo { height: 34px; width: auto; align-self: flex-start; margin-bottom: 20px; }
.crd-login__claim { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; color: #fff; }
.crd-login__sub { max-width: 36ch; font-size: var(--crd-fs-lg); line-height: 1.65; color: var(--crd-sidebar-text); }
.crd-login__foot { position: absolute; left: 44px; bottom: 28px; font-size: var(--crd-fs-xs); color: var(--crd-sidebar-icon); }
.crd-login__main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 32px 24px; }
.crd-login__card {
  width: 100%;
  max-width: 372px;
  padding: 28px;
  background: var(--crd-surface);
  border: 1px solid var(--crd-border);
  border-radius: var(--crd-radius-lg);
  box-shadow: var(--crd-shadow);
}
.crd-login__title { font-size: var(--crd-fs-title); }
.crd-login__hint { margin-top: 4px; font-size: var(--crd-fs-sm); color: var(--crd-muted); }
.crd-login__form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; }
.crd-login__submit { margin-top: 2px; }
.crd-login__legal { font-size: var(--crd-fs-xs); color: var(--crd-muted-2); }

/* En pantallas angostas el panel se vuelve una cabecera: el reclamo sobra, el logo no. */
@media (max-width: 860px) {
  .crd-login { flex-direction: column; }
  .crd-login__aside { flex: 0 0 auto; max-width: none; padding: 22px 24px; }
  .crd-login__aside::after { display: none; }
  .crd-login__logo { height: 28px; margin-bottom: 0; }
  .crd-login__claim, .crd-login__sub, .crd-login__foot { display: none; }
  .crd-login__main { justify-content: flex-start; padding-top: 28px; }
}

/* ---------- Catálogos · Homologación (F6 / H-32) ---------- */
.crd-homolog { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, .95fr); gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 1180px) { .crd-homolog { grid-template-columns: 1fr; } }
.crd-hlist-box { max-height: 460px; overflow: auto; border: 1px solid var(--crd-border); border-radius: var(--crd-radius); background: var(--crd-surface); }
.crd-hlist { list-style: none; margin: 0; padding: 0; }
.crd-hlist__item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--crd-border-2); font-size: var(--crd-fs-sm); }
.crd-hlist__item:last-child { border-bottom: 0; }
.crd-hlist__item--on { background: var(--crd-navy-soft); }
.crd-hlist__item--locked { color: var(--crd-muted-2); }
.crd-hlist__item input[type=checkbox] { margin-top: 3px; flex: none; }
.crd-hlist__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.crd-hlist__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.crd-hlist mark { background: #fff3bf; color: inherit; padding: 0 1px; border-radius: 2px; }
.crd-destinos { display: flex; flex-direction: column; }
.crd-destino { display: flex; align-items: flex-start; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--crd-border-2); border-radius: var(--crd-radius); }
.crd-destino--on { background: var(--crd-navy-soft); }
.crd-destino input[type=radio] { margin-top: 4px; flex: none; }
.crd-destino__acciones { display: flex; gap: 2px; flex: none; }
.crd-bloqueos-tabla tr.crd-tr--sel td { background: #f2f7fc; }

/* ---------- Personas · Revisión de fotos (F6 / H-34) ---------- */
.crd-persona { display: flex; align-items: center; gap: 12px; min-width: 0; }
.crd-foto { width: 64px; height: 64px; object-fit: cover; border-radius: var(--crd-radius); border: 1px solid var(--crd-border); background: var(--crd-surface-2); flex: none; }
.crd-foto--vacia { display: flex; align-items: center; justify-content: center; color: var(--crd-muted-2); }
.crd-foto--grande { width: 180px; height: 180px; }
.crd-fotos-tabla .rz-grid-table td { vertical-align: middle; }
.crd-foto-recorte { width: min(100%, 450px); height: 450px; margin: 0 auto 12px; background: var(--crd-surface-2); border: 1px solid var(--crd-border); border-radius: var(--crd-radius); overflow: hidden; }
.crd-foto-cropper { width: 100%; height: 100%; display: block; }
.crd-foto-pasos .crd-step__inner { cursor: default; }
.crd-foto--media { width: 96px; height: 96px; }
.crd-movimientos tr.crd-tr--warn td { background: #fff8e6; }

/* ---- CrdEnDesarrollo (pantalla cerrada por mejora, 14 oct 2026) ------------- */
.crd-en-desarrollo { display: flex; justify-content: center; padding: 32px 16px; }
.crd-en-desarrollo__card { position: relative; width: 100%; max-width: 560px; padding: 36px 32px 28px; background: var(--crd-surface); border: 1px solid var(--crd-border); border-radius: 12px; box-shadow: 0 10px 30px rgba(6, 44, 82, 0.08); text-align: center; overflow: hidden; }
.crd-en-desarrollo__banda { position: absolute; left: 0; right: 0; top: 0; height: 5px; background: repeating-linear-gradient(135deg, var(--crd-cyan) 0 12px, var(--crd-navy) 12px 24px); }
.crd-en-desarrollo__icon { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--crd-navy); background: var(--crd-cyan-soft); animation: crd-en-desarrollo-girar 14s linear infinite; }
@keyframes crd-en-desarrollo-girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .crd-en-desarrollo__icon { animation: none; } }
.crd-en-desarrollo__badge { margin-bottom: 10px; }
.crd-en-desarrollo__title { margin: 0 0 6px; font-size: var(--crd-fs-title); font-weight: 600; color: var(--crd-text); }
.crd-en-desarrollo__text { margin: 0 auto 18px; max-width: 44ch; font-size: var(--crd-fs-md); line-height: 1.55; color: var(--crd-muted); }
.crd-en-desarrollo__lista { list-style: none; margin: 0 0 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; text-align: left; font-size: var(--crd-fs-sm); color: var(--crd-text); background: var(--crd-bg); border-radius: 8px; }
.crd-en-desarrollo__lista li { display: flex; align-items: flex-start; gap: 8px; }
.crd-en-desarrollo__lista .crd-icon { flex: 0 0 auto; margin-top: 2px; color: var(--crd-cyan-ink); }
.crd-en-desarrollo__actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

/* Entrada del menú cerrada por mejora */
.crd-sidebar__tag { margin-left: auto; padding: 1px 6px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--crd-cyan-ink); background: var(--crd-cyan-soft); }