/* ════════════════════════════════════════════════════════════════════════════
   RGCLOUD_FE · app.css — sistema de tema (tokens --rg-*, data-mode claro/oscuro).
   Paleta navy/amber de FE portada al sistema del core RGCLOUDS2026.
   Numericos en IBM Plex Mono (.num / .mono). Sin hex hardcoded en componentes.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
    /* Marca navy/amber (del mockup FE) */
    --rg-navy-900: #081826;
    --rg-navy-800: #0d2440;
    --rg-navy-700: #143a6b;
    --rg-navy-600: #1d4e8f;
    --rg-amber: #f5a623;
    --rg-amber-bright: #ffb020;

    --rg-primary: #143a6b;
    --rg-primary-hover: #1d4e8f;
    --rg-primary-dark: #0d2440;
    --rg-primary-light: #dbe6f5;
    --rg-primary-rgb: 20, 58, 107;
    --rg-accent: #f5a623;

    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;
}

/* ── Neutrales por modo ─────────────────────────────────────────────────── */
[data-mode="light"] {
    --rg-bg-page: #f4f6fa;
    --rg-bg-card: #ffffff;
    --rg-bg-header: rgba(255,255,255,0.92);
    --rg-bg-input: #ffffff;
    --rg-bg-hover: #f8fafc;
    --rg-bg-subtle: #f1f5f9;
    --rg-border: #e6e9ef;
    --rg-border-light: #f1f5f9;
    --rg-text-primary: #0f1e30;
    --rg-text-secondary: #475569;
    /* Los dos tonos atenuados estaban por debajo del minimo legible sobre el
       fondo claro (el pie de los KPI daba 2.6 de contraste, y los subtitulos y
       contadores rozaban el limite). Se oscurecen lo justo para pasar AA sin
       dejar de leerse como texto secundario. */
    --rg-text-muted: #5a6982;
    --rg-text-faint: #5f6c82;
    --rg-shadow-sm: 0 1px 3px rgba(0,0,0,0.04);
    --rg-shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --rg-shadow-sidebar: 2px 0 12px rgba(0,0,0,0.04);
    --rg-success: #15803d;
    --rg-warning: #b45309;
    --rg-danger:  #c02626;
    --rg-info:    #1d4ed8;
    /* El primario COMO TEXTO. Ver la nota en el bloque oscuro. */
    --rg-primary-ink: var(--rg-primary);
}

[data-mode="dark"] {
    --rg-navy-800: #0b1a2e;
    --rg-bg-page: #0b1017;
    --rg-bg-card: #141a24;
    --rg-bg-header: rgba(16,22,32,0.92);
    --rg-bg-input: #141a24;
    --rg-bg-hover: #1a2231;
    --rg-bg-subtle: #12161f;
    --rg-border: #24303f;
    --rg-border-light: #1a2231;
    --rg-text-primary: #e8eaf0;
    --rg-text-secondary: #b0b8c8;
    --rg-text-muted: #7e879a;
    --rg-text-faint: #555e72;
    --rg-shadow-sm: 0 1px 3px rgba(0,0,0,0.25);
    --rg-shadow-md: 0 4px 12px rgba(0,0,0,0.35);
    --rg-shadow-sidebar: 2px 0 12px rgba(0,0,0,0.3);
    --rg-success: #22c55e;
    --rg-warning: #f59e0b;
    --rg-danger:  #f87171;
    --rg-info:    #38bdf8;

    /* EL PRIMARIO COMO TEXTO.
       --rg-primary es un azul marino: correcto de FONDO (un boton primario con
       letra blanca se ve igual de bien en los dos temas), pero como color de
       LETRA sobre el fondo oscuro queda casi negro sobre negro —contraste 1.7,
       ilegible— y por eso se «perdian» los iconos de cabecera, los enlaces y
       varias etiquetas al cambiar de tema.
       Todo lo que pinte TEXTO con el color de marca usa este token; lo que pinte
       FONDOS sigue usando --rg-primary. */
    --rg-primary-ink: #6ea8e8;
}

/* ── Reset base ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--sans);
    background: var(--rg-bg-page);
    color: var(--rg-text-primary);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--rg-primary-ink); }
/* Numeros, identificadores y comprobantes en fuente monoespaciada, para que las
   cifras alineen columna con columna. `font-mono` es el nombre que usa el
   estandar del proyecto y se usaba en 51 celdas sin que existiera la regla: esos
   eNCF y cedulas salian en la fuente normal, desalineados. */
.num, .mono, .font-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* Ocultar spinners de inputs numericos (proteccion contra incremento accidental) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

/* ── Pagina ─────────────────────────────────────────────────────────────── */
.fe-page { max-width: 1600px; margin: 0 auto; }
.fe-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.fe-h1 { font-size: 1.35rem; font-weight: 700; color: var(--rg-text-primary); margin: 0; display: flex; align-items: center; gap: .5rem; }
.fe-h1 i { color: var(--rg-primary-ink); }
.fe-sub { font-size: .85rem; color: var(--rg-text-secondary); }
.fe-muted { color: var(--rg-text-muted); font-size: .85rem; }

/* ── KPIs ───────────────────────────────────────────────────────────────── */
.fe-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .9rem; margin-bottom: 1.25rem; }
.fe-kpi {
    background: var(--rg-bg-card); border: 1px solid var(--rg-border); border-radius: 12px;
    padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .25rem;
    box-shadow: var(--rg-shadow-sm);
}
.fe-kpi-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rg-text-muted); }
.fe-kpi-num { font-family: var(--mono); font-size: 1.9rem; font-weight: 600; color: var(--rg-text-primary); line-height: 1.1; }
.fe-kpi-foot { font-size: .72rem; color: var(--rg-text-faint); }

/* ── Card + tabla ───────────────────────────────────────────────────────── */
.fe-card {
    background: var(--rg-bg-card); border: 1px solid var(--rg-border); border-radius: 12px;
    padding: 1.1rem 1.25rem; box-shadow: var(--rg-shadow-sm);
}
.fe-card-title { font-weight: 600; color: var(--rg-text-primary); margin-bottom: .8rem; display: flex; align-items: center; gap: .45rem; }
/* Controles que acompanan al titulo de una tarjeta (filtros, buscador). */
.fe-card-tools { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
.fe-card-title i { color: var(--rg-primary-ink); }
/* Pantalla que no pudo completarse (limite de errores del layout). */
.fe-fallo {
    max-width: 620px; margin: 2.5rem auto; text-align: center;
    background: var(--rg-bg-card); border: 1px solid var(--rg-border);
    border-radius: 12px; padding: 2rem 1.75rem; box-shadow: var(--rg-shadow-sm);
}
.fe-fallo-titulo {
    display: flex; align-items: center; justify-content: center; gap: .5rem;
    font-size: 1.05rem; font-weight: 700; color: var(--rg-text-primary); margin-bottom: .6rem;
}
.fe-fallo-titulo i { color: var(--rg-warning); font-size: 1.3rem; }
.fe-fallo-texto { font-size: .88rem; color: var(--rg-text-secondary); margin-bottom: 1.1rem; line-height: 1.5; }

/* Aviso al pie de un grupo de campos (consecuencia fiscal de lo que se captura). */
.fe-nota-plazo {
    display: flex; align-items: flex-start; gap: .5rem; margin: .1rem 0 0;
    font-size: .8rem; color: var(--rg-text-secondary);
    background: rgba(37, 99, 235, .07); border-left: 3px solid var(--rg-info);
    border-radius: 0 .4rem .4rem 0; padding: .5rem .7rem;
}
.fe-nota-plazo i { color: var(--rg-info); margin-top: .1rem; }
[data-mode="dark"] .fe-nota-plazo { background: rgba(37, 99, 235, .13); }
.fe-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.fe-table th {
    text-align: left; padding: .5rem .65rem; background: var(--rg-bg-subtle);
    color: var(--rg-text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--rg-border);
}
.fe-table td { padding: .5rem .65rem; border-bottom: 1px solid var(--rg-border-light); color: var(--rg-text-secondary); }
.fe-table tbody tr:hover { background: var(--rg-bg-hover); }

/* ── WIP ────────────────────────────────────────────────────────────────── */
.fe-wip { text-align: center; padding: 4rem 1rem; color: var(--rg-text-secondary); }
.fe-wip i { font-size: 3rem; color: var(--rg-amber); }
.fe-wip .fe-h1 { justify-content: center; margin: 1rem 0 .5rem; }
.fe-wip code { background: var(--rg-bg-subtle); padding: .1rem .4rem; border-radius: 5px; }

/* ════════════════════════════════════════════════════════════════════════════
   CRUD canonico (global, aplica a todas las pantallas Frmxxx).
   Clases del estandar del core: crud-*, btn-crud, badge-*, modal-*, form-*, help-*.
   ════════════════════════════════════════════════════════════════════════════ */
@keyframes spin { to { transform: rotate(360deg); } }

/* Entrada de una pantalla. Se usaba sin que la animacion existiera. */
@keyframes rgSlideUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rg-slide-up { animation: rgSlideUp .25s ease-out both; }
@media (prefers-reduced-motion: reduce) { .rg-slide-up { animation: none; } }

/* Estado vacio de una pantalla sin datos. */
.fe-empty { padding: 2rem 1rem; text-align: center; color: var(--rg-text-muted); font-size: .88rem; }
.spin { animation: spin .8s linear infinite; display: inline-block; }

/* El tope de 1200px desperdiciaba las pantallas anchas y obligaba a truncar
   columnas. Se aprovecha el ancho disponible, con un limite para que las lineas
   de texto no queden incomodas de leer en monitores muy grandes. */
.crud-container { max-width: 1600px; margin: 0 auto; }
.crud-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.crud-header-left { display: flex; align-items: center; gap: .7rem; }
.crud-header-icon { font-size: 1.8rem; color: var(--rg-primary-ink); }
.crud-title { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--rg-text-primary); }
.crud-subtitle { font-size: .8rem; color: var(--rg-text-muted); }
.crud-header-actions { display: flex; gap: .4rem; align-items: center; }

.btn-crud { display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--rg-border);
    background: var(--rg-bg-card); color: var(--rg-text-secondary); border-radius: 8px;
    padding: .5rem .8rem; font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .12s; }
.btn-crud:hover:not(:disabled) { border-color: var(--rg-primary-ink); color: var(--rg-primary-ink); }
.btn-crud:disabled { opacity: .6; cursor: default; }
.btn-crud.btn-primary { background: var(--rg-primary); border-color: var(--rg-primary); color: #fff; }
.btn-crud.btn-primary:hover:not(:disabled) { background: var(--rg-primary-hover); color: #fff; }
.btn-crud.btn-danger { background: var(--rg-danger); border-color: var(--rg-danger); color: #fff; }
/* En oscuro el rojo se aclara para verse sobre el fondo; la letra blanca encima
   pierde contraste, asi que pasa a tinta oscura. */
[data-mode="dark"] .btn-crud.btn-danger { color: var(--rg-bg-page); }
.btn-crud.btn-outline { background: transparent; }
.btn-help { background: rgba(37,99,235,.08); color: var(--rg-info); border-color: rgba(37,99,235,.25); }

.crud-alert { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-radius: 8px;
    font-size: .85rem; margin-bottom: .9rem; }
.crud-alert.success { background: rgba(21,128,61,.1); color: var(--rg-success); border: 1px solid rgba(21,128,61,.25); }
.crud-alert.error { background: rgba(192,38,38,.08); color: var(--rg-danger); border: 1px solid rgba(192,38,38,.25); }
.crud-alert.info { background: rgba(37,99,235,.08); color: var(--rg-info, #2563eb); border: 1px solid rgba(37,99,235,.25); }
/* La X que descarta el aviso. Sin regla salia como un boton gris del navegador
   dentro de la franja de color. */
.crud-alert-close {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: inherit; opacity: .65; padding: .1rem .25rem; border-radius: 4px;
    font-size: .8rem; line-height: 1; flex-shrink: 0;
}
.crud-alert-close:hover { opacity: 1; background: rgba(0,0,0,.08); }
[data-mode="dark"] .crud-alert-close:hover { background: rgba(255,255,255,.12); }

/* Texto del boton que se oculta en pantallas estrechas, dejando solo el icono. */
@media (max-width: 520px) { .btn-text { display: none; } }

.crud-search-bar { display: flex; align-items: center; gap: .5rem; background: var(--rg-bg-card);
    border: 1px solid var(--rg-border); border-radius: 9px; padding: .3rem .5rem; margin-bottom: 1rem; }
.crud-search-btn { background: none; border: none; color: var(--rg-text-muted); cursor: pointer; font-size: 1rem; padding: .25rem; }
.crud-search-bar input { flex: 1; border: none; outline: none; background: transparent; color: var(--rg-text-primary); font-size: .88rem; padding: .3rem; }
.crud-search-clear { background: none; border: none; color: var(--rg-text-muted); cursor: pointer; }
.crud-count { font-size: .75rem; color: var(--rg-text-muted); white-space: nowrap; padding-right: .3rem; }

.crud-grid-wrapper { background: var(--rg-bg-card); border: 1px solid var(--rg-border); border-radius: 12px;
    overflow: auto; max-height: calc(100vh - 280px); box-shadow: var(--rg-shadow-sm); }
.crud-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.crud-table thead th { position: sticky; top: 0; background: var(--rg-bg-subtle); color: var(--rg-text-muted);
    font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; text-align: left;
    padding: .6rem .7rem; border-bottom: 1px solid var(--rg-border); }
.crud-table tbody td { padding: .55rem .7rem; border-bottom: 1px solid var(--rg-border-light); color: var(--rg-text-secondary); }
.crud-table tbody tr:hover { background: var(--rg-bg-hover); }

/* Una cadena larga sin espacios —un JSON de respuesta, una URL, un trackId— no
   tiene donde partirse, asi que estira la tabla y con ella la pagina entera: en
   un telefono aparece una barra horizontal y el texto se sale de la tarjeta. Se
   le permite partir en cualquier punto, que es preferible a perder el contenido
   de vista. */
.crud-table td, .fe-table td { overflow-wrap: anywhere; min-width: 0; }

/* Tabla dentro de una tarjeta: en escritorio, si de todos modos no cabe, se
   desliza DENTRO de la tarjeta en vez de estirar la pagina entera —que es lo
   que hacia aparecer una barra horizontal en toda la pantalla. En telefono no
   hace falta, porque alli la tabla ya se convierte en tarjetas. */
.fe-tabla-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.crud-table td > *, .fe-table td > * { max-width: 100%; min-width: 0; }
.crud-table pre, .fe-table pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; margin: 0; }
/* Encabezado y botones en el MISMO eje: con el titulo a la izquierda y los
   botones a la derecha, la columna se leia descuadrada. */
.col-actions { text-align: center; white-space: nowrap; }
.text-center { text-align: center; }

.crud-loading, .crud-empty-state { text-align: center; padding: 3rem 1rem; color: var(--rg-text-muted); }
.crud-spinner { width: 30px; height: 30px; border: 3px solid var(--rg-border); border-top-color: var(--rg-primary);
    border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto .7rem; }

.badge { display: inline-block; padding: .12rem .55rem; border-radius: 1rem; font-size: .72rem; font-weight: 700; }
/* El verde de exito, sobre su propio fondo teñido y en letra pequeña, quedaba
   justo por debajo del minimo legible en tema claro; se oscurece solo aqui. */
.badge-yes { background: rgba(21,128,61,.12); color: var(--rg-success); }
.badge-no { background: rgba(192,38,38,.1); color: var(--rg-danger); }
/* Aviso: ni bien ni mal. Lo usa el nivel «Advertencia» del registro y el origen
   «Integracion» del padron. Se usaba sin que la regla existiera. */
.badge-warn { background: rgba(217,119,6,.12); color: var(--rg-warning); }
[data-mode="light"] .badge-yes,
[data-mode="light"] .crud-alert.success { color: #12692f; }

.btn-icon { background: none; border: 1px solid transparent; border-radius: 7px; cursor: pointer;
    padding: .3rem .45rem; font-size: .95rem; color: var(--rg-text-muted); transition: all .12s; }
.btn-icon:hover { background: var(--rg-bg-hover); }
.btn-edit:hover { color: var(--rg-info); }
.btn-delete:hover { color: var(--rg-danger); }

/* ── Modal ──────────────────────────────────────────────────────────────── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(3px); z-index: 1000; }
.modal-container { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1001; pointer-events: none; padding: 1rem; }
.modal-dialog { pointer-events: auto; background: var(--rg-bg-card); border: 1px solid var(--rg-border);
    border-radius: 14px; width: 100%; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal-lg { max-width: 640px; } .modal-sm { max-width: 420px; }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1.2rem;
    border-bottom: 1px solid var(--rg-border); }
.modal-header h2 { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--rg-text-primary); display: flex; align-items: center; gap: .5rem; }
.modal-close { background: none; border: none; cursor: pointer; color: var(--rg-text-muted); font-size: 1rem; padding: .25rem; border-radius: 6px; }
.modal-close:hover { color: var(--rg-text-primary); background: var(--rg-bg-hover); }
.modal-body { padding: 1.1rem 1.2rem; overflow-y: auto; flex: 1; }
.modal-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: .7rem 1.2rem; border-top: 1px solid var(--rg-border); }

/* Los campos de una fila se alinean por ARRIBA, no por abajo.
   Alinear por abajo parecia razonable hasta que un campo lleva algo colgando
   —el nombre del archivo elegido, un aviso de validacion—: ese campo crece y
   arrastra a todos sus vecinos hacia abajo, que es justo lo que descuadraba la
   contrasena del certificado y el boton de filtrar. Alineando por arriba, las
   etiquetas quedan a la misma altura y lo que cuelgue, cuelga sin mover nada. */
.form-row { display: flex; gap: .8rem; flex-wrap: wrap; align-items: flex-start; }
.form-group { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .8rem; flex: 1; min-width: 180px; }
.form-group label { font-size: .78rem; font-weight: 600; color: var(--rg-text-secondary); line-height: 1.25; }

/* Un grupo que solo lleva un boton no tiene etiqueta, asi que su boton subia una
   linea respecto a los campos de al lado. Se le reserva el alto de la etiqueta
   que no tiene, y las bases coinciden solas en toda la aplicacion. */
.form-group:not(:has(label)):has(> button)::before {
    content: ""; display: block; height: calc(.78rem * 1.25);
}
.form-group input, .form-group select, .form-group textarea {
    background: var(--rg-bg-input); color: var(--rg-text-primary); border: 1px solid var(--rg-border);
    border-radius: 8px; padding: .5rem .65rem; font-size: .88rem; outline: none; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--rg-primary); box-shadow: 0 0 0 3px rgba(var(--rg-primary-rgb), .15); }

/* ── Ayuda ──────────────────────────────────────────────────────────────── */
.help-body { padding: 0; }
.help-section { padding: 1rem 1.2rem; border-bottom: 1px solid var(--rg-border); }
.help-section:last-child { border-bottom: none; }
.help-section-title { display: flex; align-items: center; gap: .45rem; font-weight: 700; color: var(--rg-text-primary); margin-bottom: .5rem; font-size: .9rem; }
.help-section-title i { color: var(--rg-info); }
.help-section p, .help-section li { font-size: .84rem; color: var(--rg-text-secondary); }
.help-tip { display: flex; gap: .5rem; background: rgba(37,99,235,.07); border-left: 4px solid var(--rg-info);
    border-radius: 0 8px 8px 0; padding: .6rem .8rem; margin-top: .5rem; font-size: .82rem; color: var(--rg-text-secondary); }
.help-tip i { color: var(--rg-info); }
[data-mode="dark"] .help-tip { background: rgba(37,99,235,.13); }

/* Pasos numerados de una ayuda. Se usaban en cuatro pantallas sin que existiera
   la regla: los numeros salian como texto suelto en vez de en su circulo. */
.help-steps { display: flex; flex-direction: column; gap: .5rem; margin-top: .4rem; }
.help-step { display: flex; gap: .6rem; align-items: flex-start; }
.help-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.5rem; height: 1.5rem; flex-shrink: 0; margin-top: .05rem;
    background: var(--rg-info); color: #fff; border-radius: 50%;
    font-size: .72rem; font-weight: 700;
}
/* En oscuro el circulo es celeste claro: la cifra va en tinta oscura, no en
   blanco, que sobre ese celeste apenas se distingue. */
[data-mode="dark"] .help-step-num { color: var(--rg-bg-page); }
.help-step > div { font-size: .84rem; color: var(--rg-text-secondary); padding-top: .1rem; }

/* Semaforo dentro de una ayuda (Home lo usa para los estados del comprobante). */
.help-badge { display: inline-block; padding: .1rem .45rem; border-radius: 1rem; font-size: .7rem; font-weight: 700; }
.help-badge-ok     { background: rgba(22,163,74,.12);  color: #166534; }
.help-badge-warn   { background: rgba(217,119,6,.12);  color: #92400e; }
.help-badge-alert  { background: rgba(234,88,12,.12);  color: #9a3412; }
.help-badge-danger { background: rgba(220,38,38,.12);  color: #991b1b; }
[data-mode="dark"] .help-badge-ok     { color: #86efac; }
[data-mode="dark"] .help-badge-warn   { color: #fcd34d; }
[data-mode="dark"] .help-badge-alert  { color: #fdba74; }
[data-mode="dark"] .help-badge-danger { color: #fca5a5; }

/* Tabla dentro de una ayuda. Estaba repetida en dos hojas aisladas, asi que en
   las demas pantallas salia sin formato. */
.help-table { width: 100%; border-collapse: collapse; font-size: .8rem; margin-top: .25rem; }
.help-table th { background: var(--rg-bg-subtle); font-weight: 600; text-align: left; padding: .4rem .6rem;
    border-bottom: 2px solid var(--rg-border); font-size: .72rem; text-transform: uppercase; color: var(--rg-text-muted); }
.help-table td { padding: .4rem .6rem; border-bottom: 1px solid var(--rg-border); color: var(--rg-text-secondary); vertical-align: top; }

/* Hint de validacion RNC/DGII bajo el input */
/* Aviso corto bajo un campo. NO es flex: siéndolo, cada etiqueta interna
   —un <strong>, un <a>— se convertía en una columna propia y el aviso largo
   salía partido en bloques sueltos en vez de leerse como una frase. Siendo
   bloque, el texto fluye y el icono va como un caracter mas al principio. */
.rnc-hint { display: block; font-size: .74rem; margin-top: .25rem; line-height: 1.35; }
.rnc-hint > i:first-child { margin-right: .35rem; }
.rnc-hint.ok { color: var(--rg-success); }
.rnc-hint.warn { color: var(--rg-warning); }
.rnc-hint.err { color: var(--rg-danger); }
.rnc-hint.muted { color: var(--rg-text-muted); }

/* Boton "capturar en el padron local" bajo el hint del comprador */
.rnc-capturar { display: inline-flex; align-items: center; gap: .35rem; margin-top: .35rem;
    padding: .3rem .6rem; font-size: .74rem; font-weight: 600; cursor: pointer;
    color: var(--rg-primary); background: var(--rg-bg-input);
    border: 1px solid var(--rg-primary); border-radius: .4rem; }
.rnc-capturar:hover { background: var(--rg-primary); color: #fff; }

/* Aviso dentro del modal de captura: descargo de responsabilidad */
.cap-aviso { display: flex; gap: .55rem; align-items: flex-start; font-size: .8rem;
    line-height: 1.35; color: var(--rg-text-secondary); background: rgba(217,119,6,.10);
    border: 1px solid rgba(217,119,6,.35); border-radius: .5rem; padding: .6rem .7rem; margin-bottom: .8rem; }
.cap-aviso > i { color: var(--rg-warning); font-size: 1.05rem; flex-shrink: 0; margin-top: .05rem; }
.cap-aviso a { color: var(--rg-primary-ink); font-weight: 600; }
.cap-links { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .5rem; }
.cap-links a { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; }

/* ── Logo de la empresa (opcional) ─────────────────────────────────────────── */
.emp-opcional { font-weight: 400; font-size: .72rem; color: var(--rg-text-muted); }
.emp-logo-fila { display: flex; align-items: center; gap: .9rem; }
.emp-logo-caja {
    width: 84px; height: 84px; flex-shrink: 0; border-radius: .6rem;
    border: 1px dashed var(--rg-border); background: #fff;
    display: grid; place-items: center; overflow: hidden;
}
.emp-logo-caja img { max-width: 100%; max-height: 100%; object-fit: contain; }
.emp-logo-caja > i { font-size: 1.6rem; color: #b9c2cf; }
.emp-logo-acciones { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.emp-logo-input { font-size: .8rem; color: var(--rg-text-secondary); }

/* ── Empresas asignadas a un usuario ──────────────────────────────────────── */
.usr-empresas { display: flex; flex-direction: column; gap: .35rem; max-height: 220px; overflow-y: auto;
    border: 1px solid var(--rg-border); border-radius: .5rem; padding: .5rem; background: var(--rg-bg-input); }
.usr-empresa { display: flex; align-items: center; gap: .55rem; padding: .35rem .5rem; border-radius: .4rem;
    cursor: pointer; border: 1px solid transparent; }
.usr-empresa:hover { background: var(--rg-bg-hover); }
.usr-empresa.sel { background: rgba(37,99,235,.10); border-color: rgba(37,99,235,.35); }
.usr-empresa input { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.usr-empresa-txt { display: flex; flex-direction: column; line-height: 1.25; }
.usr-empresa-txt strong { font-size: .85rem; color: var(--rg-text-primary); font-weight: 600; }
.usr-empresa-txt em { font-size: .72rem; color: var(--rg-text-muted); font-style: normal; }

/* Lista de motivos del rechazo */
.rech-lista { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.rech-item { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: .82rem; }
.rech-campo { font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em;
    color: var(--rg-danger); background: rgba(192,38,38,.12); border-radius: 1rem; padding: .1rem .5rem; }

/* ── Anulacion: diagnostico de la via segun estado ─────────────────────────── */
.anu-via { border-radius: .6rem; padding: .7rem .85rem; margin-bottom: .8rem; border: 1px solid var(--rg-border); }
.anu-via-titulo { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; margin-bottom: .3rem; }
.anu-via p { font-size: .84rem; line-height: 1.4; color: var(--rg-text-secondary); margin: 0; }
/* Aceptado → NC obligatoria (rojo): es lo mas serio */
.anu-via-notacredito { background: rgba(192,38,38,.07); border-color: rgba(192,38,38,.3); }
.anu-via-notacredito .anu-via-titulo { color: var(--rg-danger); }
/* Secuencia → anulable directo (ambar) */
.anu-via-secuencia { background: rgba(217,119,6,.08); border-color: rgba(217,119,6,.3); }
.anu-via-secuencia .anu-via-titulo { color: var(--rg-warning); }
/* Esperar / no aplica (neutro info) */
.anu-via-esperar, .anu-via-noaplica { background: var(--rg-bg-subtle); }
.anu-via-esperar .anu-via-titulo, .anu-via-noaplica .anu-via-titulo { color: var(--rg-text-secondary); }

.anu-dato { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .35rem 0; border-bottom: 1px dashed var(--rg-border); font-size: .85rem; }
.anu-dato > span { color: var(--rg-text-secondary); }
.anu-nota-plazo { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--rg-success); margin-top: .5rem; }

/* Anulacion parcial: tabla de lineas del origen (descripcion/precio solo lectura) */
.anu-lineas-titulo { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    margin: .9rem 0 .4rem; font-weight: 600; font-size: .88rem; color: var(--rg-text-primary); }
.anu-link { background: none; border: none; cursor: pointer; color: var(--rg-primary); font-size: .78rem;
    display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .3rem; }
.anu-link:hover { text-decoration: underline; }
.anu-tabla-wrap { overflow-x: auto; border: 1px solid var(--rg-border); border-radius: .5rem; }
.anu-tabla { width: 100%; border-collapse: collapse; font-size: .82rem; }
.anu-tabla th { background: var(--rg-bg-subtle); color: var(--rg-text-muted); font-weight: 600;
    text-transform: uppercase; font-size: .68rem; letter-spacing: .03em; padding: .45rem .6rem; text-align: left; }
.anu-tabla td { padding: .4rem .6rem; border-top: 1px solid var(--rg-border); color: var(--rg-text-primary); vertical-align: middle; }
.anu-tabla .tr { text-align: right; }
.anu-tabla tfoot td { border-top: 2px solid var(--rg-border); background: var(--rg-bg-subtle); }
.anu-tabla tr.anu-agotada td { color: var(--rg-text-muted); }
.anu-cant { width: 88px; text-align: right; background: var(--rg-bg-input); color: var(--rg-text-primary);
    border: 1px solid var(--rg-border); border-radius: .35rem; padding: .25rem .4rem; }
.anu-cant:focus { border-color: var(--rg-primary); outline: none; }
.anu-cant:disabled { background: var(--rg-bg-subtle); color: var(--rg-text-muted); }

/* Totales de emision */
.btn-sm { padding: .3rem .6rem; font-size: .78rem; }
.em-tot { display: flex; flex-direction: column; align-items: flex-end; gap: .1rem; }
.em-tot span { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rg-text-muted); }
.em-tot b { font-size: 1.05rem; color: var(--rg-text-primary); }
.em-total b { font-size: 1.35rem; color: var(--rg-primary-ink); }
.em-ok { border-color: var(--rg-success); }
.ps-info { display: flex; gap: 1.5rem; background: var(--rg-bg-subtle); border: 1px solid var(--rg-border); border-radius: 8px; padding: .7rem .9rem; }

/* Cuentas contables: tabs, buscador inline, visor */
/* ── Pestanas ────────────────────────────────────────────────────────────────
   Este es el UNICO estilo de pestanas de la aplicacion. Antes convivian tres
   nombres distintos y uno de ellos —el de Secuencias— no tenia CSS en ninguna
   parte, asi que salia sin formato. Cualquier pantalla que necesite pestanas usa
   ct-tabs/ct-tab; el contador opcional va en ct-tab-badge.                    */
.ct-tabs { display: flex; gap: .3rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rg-border); }
.ct-tab {
    background: none; border: none; padding: .6rem 1rem; cursor: pointer;
    color: var(--rg-text-secondary); font-size: .85rem; font-weight: 600;
    border-bottom: 2px solid transparent;
    /* Monta la linea de la pestana ACTIVA sobre la del contenedor, en vez de
       dejarlas una encima de otra separadas por un pixel. */
    margin-bottom: -1px;
    display: inline-flex; gap: .4rem; align-items: center; white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.ct-tab:hover { color: var(--rg-primary); }
.ct-tab.active { color: var(--rg-primary); border-bottom-color: var(--rg-primary); }
/* En oscuro el primario es un azul marino que no se ve sobre el fondo; se usa
   el mismo celeste con que ya se marcan los iconos de ayuda y el boton «?». */
[data-mode="dark"] .ct-tab:hover,
[data-mode="dark"] .ct-tab.active { color: var(--rg-info); }
[data-mode="dark"] .ct-tab.active { border-bottom-color: var(--rg-info); }

/* Contador de la pestana: cuantos elementos hay detras de ella. Discreto
   mientras la pestana esta en reposo y del color de la marca cuando manda. */
.ct-tab-badge {
    min-width: 1.35rem; padding: 0 .35rem;
    font-size: .7rem; font-weight: 700; line-height: 1.35rem;
    text-align: center; border-radius: 1rem;
    background: var(--rg-bg-subtle); color: var(--rg-text-muted);
    border: 1px solid var(--rg-border);
}
/* El contador de la pestana activa se tine del MISMO color que la pestana, sea
   cual sea el modo: fijarlo a un azul dejaba el numero peleando con el color de
   la pestana cuando el tema cambia. */
.ct-tab.active .ct-tab-badge {
    color: currentColor;
    background: color-mix(in srgb, currentColor 14%, transparent);
    border-color: color-mix(in srgb, currentColor 35%, transparent);
}
.ct-search { width: 100%; background: var(--rg-bg-input); color: var(--rg-text-primary); border: 1px solid var(--rg-border); border-radius: 7px; padding: .4rem .6rem; font-size: .85rem; }
.ct-drop { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; background: var(--rg-bg-card); border: 1px solid var(--rg-border); border-radius: 8px; box-shadow: var(--rg-shadow-md); max-height: 220px; overflow-y: auto; margin-top: 2px; }
.ct-drop-item { padding: .45rem .65rem; cursor: pointer; font-size: .82rem; color: var(--rg-text-secondary); }
.ct-drop-item:hover { background: var(--rg-bg-hover); color: var(--rg-primary); }
.crud-table th.text-center, .fe-table th.text-center { text-align: center; }
.crud-table th.text-right,  .fe-table th.text-right  { text-align: right; }
.crud-table td.text-right,  .fe-table td.text-right  { text-align: right; }

.pn-acciones { display:inline-flex; gap:.15rem; }
.text-right { text-align: right; }

.est-badge { display:inline-block; padding:.15rem .5rem; border-radius:1rem; font-size:.72rem;
    font-weight:700; white-space:nowrap; }

.ct-drop-empty { padding: .45rem .65rem; font-size: .8rem; color: var(--rg-text-muted); font-style: italic; }
.ct-solo-pend { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem;
    color: var(--rg-text-secondary); white-space: nowrap; padding-right: .6rem; cursor: pointer; }
.ct-solo-pend input { width: auto; margin: 0; cursor: pointer; }
.ct-pend { padding: .5rem .65rem; border-radius: 7px; cursor: pointer; font-size: .82rem; border: 1px solid transparent; margin-bottom: 2px; }
.ct-pend:hover { background: var(--rg-bg-hover); }
.ct-pend.sel { background: var(--rg-primary-light); border-color: var(--rg-primary); }
.cs-json { flex:1; min-height:260px; font-family: var(--mono); font-size:.8rem; background: var(--rg-bg-input); color: var(--rg-text-primary); border:1px solid var(--rg-border); border-radius:8px; padding:.6rem; resize:vertical; }

/* Consola de pruebas — pasos del ensayo de firma */
.cs-pasos { list-style:none; margin:0 0 .8rem; padding:0; display:flex; flex-direction:column; gap:.35rem; }
.cs-pasos li { display:flex; gap:.5rem; align-items:flex-start; padding:.45rem .6rem; border-radius:8px;
    background: var(--rg-bg-subtle); border:1px solid var(--rg-border); }
.cs-pasos li i { font-size:.95rem; flex-shrink:0; margin-top:.1rem; }
.cs-pasos li.ok i { color: var(--rg-success); }
.cs-pasos li.fail i { color: var(--rg-danger); }
.cs-pasos li.fail { border-color: rgba(192,38,38,.35); background: rgba(192,38,38,.06); }
.cs-pasos li div { display:flex; flex-direction:column; gap:.1rem; }
.cs-pasos li strong { font-size:.82rem; color: var(--rg-text-primary); }
.cs-pasos li span { font-size:.76rem; color: var(--rg-text-secondary); word-break:break-word; }

.cs-evidencia { display:flex; flex-direction:column; gap:.3rem; padding:.6rem .7rem; border-radius:8px;
    background: var(--rg-bg-subtle); border:1px solid var(--rg-border); }
.cs-evidencia > div { display:flex; gap:.6rem; align-items:baseline; }
.cs-evidencia span { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color: var(--rg-text-muted); min-width:150px; flex-shrink:0; }
.cs-evidencia strong { font-size:.8rem; color: var(--rg-text-primary); }

.cs-xml { margin-top:.6rem; max-height:320px; overflow:auto; font-family: var(--mono); font-size:.68rem;
    background: var(--rg-bg-input); color: var(--rg-text-secondary); border:1px solid var(--rg-border);
    border-radius:8px; padding:.6rem; white-space:pre-wrap; word-break:break-all; }

/* ── Guia de integracion: endpoint que despliega su respuesta ──────────────── */
/* La fila entera es el disparador para que en tableta sea facil de tocar. */
.ep-fila { cursor: pointer; }
.ep-fila:hover { background: var(--rg-bg-hover); }
.ep-ruta { font-size:.78rem; word-break: break-all; }
.ep-resp { white-space: nowrap; color: var(--rg-text-secondary); font-size:.75rem; }
.ep-resp i { color: var(--rg-accent); margin-right:.3rem; }
.ep-detalle > td { background: var(--rg-bg-subtle); padding:.4rem .6rem !important; }
.ep-detalle .cs-xml { margin-top:0; max-height:none; }

/* Bloque secundario dentro de una tarjeta */
.fe-sub { border-top:1px solid var(--rg-border); padding-top:.9rem; }

/* Incumplimientos del esquema explicados en lenguaje de negocio */
.cs-fix-list { display:flex; flex-direction:column; gap:.5rem; }
.cs-fix { border:1px solid rgba(192,38,38,.3); border-left:3px solid var(--rg-danger);
    background: rgba(192,38,38,.05); border-radius:8px; padding:.6rem .7rem; }
.cs-fix-campo { display:flex; align-items:center; gap:.4rem; font-size:.84rem; font-weight:700;
    color: var(--rg-text-primary); margin-bottom:.25rem; }
.cs-fix-campo i { color: var(--rg-danger); }
.cs-fix-prob { font-size:.8rem; color: var(--rg-text-secondary); margin-bottom:.25rem; }
.cs-fix-sol { display:flex; gap:.2rem; font-size:.8rem; color: var(--rg-text-primary); margin-bottom:.35rem; }
.cs-fix-sol i { color: var(--rg-success); font-size:1.05rem; flex-shrink:0; }
.cs-fix-meta { display:flex; gap:.5rem; align-items:baseline; margin-top:.2rem; }
.cs-fix-meta span { font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;
    color: var(--rg-text-muted); min-width:120px; flex-shrink:0; }
.cs-fix-meta code { font-size:.72rem; color: var(--rg-text-secondary); word-break:break-all; }
.cs-fix-crudo { margin-top:.4rem; }
.cs-fix-crudo summary { font-size:.72rem; color: var(--rg-text-muted); cursor:pointer; }
.cs-fix-crudo code { display:block; margin-top:.25rem; font-size:.7rem; color: var(--rg-text-muted); word-break:break-word; }

.cs-obs-title { margin:.9rem 0 .3rem; font-size:.78rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.04em; color: var(--rg-text-muted); }
.cs-obs { margin:0; padding-left:1.2rem; }
.cs-obs li { margin-bottom:.2rem; font-size:.8rem; }
.cs-obs li.info { color: var(--rg-text-secondary); }
.cs-obs li.err { color: var(--rg-danger); }

/* ════════════════════════════════════════════════════════════════════════════
   MOVIL (<= 768px) — regla global, aplica a TODAS las pantallas.

   1. Todo campo ocupa la linea completa. En escritorio los formularios usan
      max-width por campo; en un telefono eso deja anchos disparejos y se ve mal.
   2. Las tablas dejan de ser grid y pasan a TARJETAS: cada fila es una tarjeta y
      cada celda muestra su etiqueta (atributo data-label) a la izquierda y el
      valor a la derecha. Asi no hay scroll horizontal.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── 1. Campos a ancho completo ─────────────────────────────────────── */
    .form-row { flex-direction: column; gap: 0; }
    .form-group { max-width: none !important; width: 100%; flex: 1 1 100% !important; min-width: 0; }

    /* Gana sobre los max-width en linea de las pantallas */
    .crud-container input:not([type="checkbox"]):not([type="radio"]),
    .crud-container select,
    .crud-container textarea,
    .modal-dialog input:not([type="checkbox"]):not([type="radio"]),
    .modal-dialog select,
    .modal-dialog textarea {
        width: 100% !important;
        max-width: none !important;
    }

    /* Botones de accion: uno por linea y centrados (los pequenos se respetan) */
    .form-group .btn-crud,
    .fe-card .btn-crud:not(.btn-sm) { width: 100%; justify-content: center; }

    /* Pestanas: se deslizan en vez de desbordar */
    .ct-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .ct-tab { white-space: nowrap; flex-shrink: 0; }

    /* La barra de busqueda mantiene su forma; el contador baja de linea */
    .crud-search-bar { flex-wrap: wrap; }
    .crud-search-bar input { flex: 1 1 100%; order: 2; }
    .crud-count { order: 3; width: 100%; text-align: right; }

    /* Cabecera compacta */
    .crud-header { flex-direction: column; align-items: flex-start; gap: .6rem; }
    .crud-header-actions { width: 100%; justify-content: flex-end; }

    /* Los KPI en una sola columna */
    .fe-kpis { grid-template-columns: 1fr; }

    /* Cabeceras de pagina y de tarjeta: se apilan en vez de desbordar. Los
       controles que las acompanan (filtros, buscador, refrescar) pasan debajo
       del titulo y a lo ancho, que es donde se pueden usar con el pulgar. */
    .fe-page-head { flex-direction: column; align-items: stretch; gap: .6rem; }
    .fe-page-head > div { display: flex; flex-wrap: wrap; gap: .5rem; }
    .fe-card-title { flex-wrap: wrap; }
    .fe-card-tools { margin-left: 0; width: 100%; flex-wrap: wrap; }

    /* Las pantallas .fe-page fijan anchos en linea pensando en el escritorio */
    .fe-page input:not([type="checkbox"]):not([type="radio"]),
    .fe-page select,
    .fe-page textarea { width: 100% !important; max-width: none !important; }

    /* Modales a pantalla casi completa */
    .modal-dialog { width: 100%; max-width: 100%; max-height: 94vh; border-radius: .6rem; }

    /* ── 2. Tablas como tarjetas ────────────────────────────────────────── */
    .crud-grid-wrapper, .fe-tabla-wrap { overflow: visible; max-height: none; }
    /* tfoot entra en la conversion junto con tbody: si se queda como pie de
       tabla mientras sus filas ya son bloques, la fila de totales aparece
       encogida a un lado con el resto de la tarjeta vacio. */
    .crud-table, .crud-table tbody, .crud-table tfoot, .crud-table tr, .crud-table td { display: block; width: 100%; }
    .crud-table thead { display: none; }

    .crud-table tr {
        background: var(--rg-bg-card);
        border: 1px solid var(--rg-border);
        border-radius: 10px;
        padding: .6rem .75rem;
        margin-bottom: .6rem;
        box-shadow: var(--rg-shadow-sm);
    }

    .crud-table td {
        border: none !important;
        padding: .3rem 0;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: .75rem;
        text-align: right !important;
        font-size: .85rem;
    }

    /* La etiqueta de la columna viaja en data-label */
    .crud-table td::before {
        content: attr(data-label);
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .04em;
        color: var(--rg-text-muted);
        text-align: left;
        flex-shrink: 0;
    }

    /* Celda que contiene un control: etiqueta arriba y control a lo ancho */
    .crud-table td:has(input, select, textarea) {
        flex-direction: column;
        align-items: stretch;
        text-align: left !important;
    }
    .crud-table td:has(input, select, textarea)::before { margin-bottom: .25rem; }

    /* Celda de TEXTO LARGO (data-ancho): el mensaje del registro, la respuesta
       del regulador, un detalle tecnico. En el par etiqueta-valor de la derecha
       queda ilegible —una columna de dos palabras por linea—, asi que toma la
       tarjeta entera con la etiqueta encima. */
    .crud-table td[data-ancho] {
        flex-direction: column;
        align-items: stretch;
        text-align: left !important;
        padding-top: .4rem;
    }
    .crud-table td[data-ancho]::before { margin-bottom: .2rem; }

    /* Encabezado de la tarjeta: los datos cortos que la identifican (hora,
       origen) van en una sola linea, sin etiqueta, en vez de gastar un renglon
       cada uno. */
    .crud-table td[data-jefe] {
        display: inline-flex;
        width: auto;
        justify-content: flex-start;
        text-align: left !important;
        padding: 0 .5rem .1rem 0;
    }
    .crud-table td[data-jefe]::before { content: none; }

    /* Celda que TITULA su tarjeta (el «Totales» de una fila de pie): ocupa el
       ancho, sin par etiqueta-valor, y separa lo que viene debajo. */
    .crud-table td[data-titulo] {
        justify-content: flex-start; text-align: left !important;
        font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
        color: var(--rg-text-muted);
        padding: 0 0 .35rem; margin-bottom: .35rem;
        border-bottom: 1px solid var(--rg-border) !important;
    }
    .crud-table td[data-titulo]::before { content: none; }

    /* La tarjeta de totales se distingue de las de datos. */
    .crud-table tfoot tr { background: var(--rg-bg-subtle); border-color: var(--rg-text-faint); }
    .crud-table tfoot td { font-weight: 600; }

    /* Celda sin etiqueta (acciones): ocupa la linea y se centra */
    /* Celda sin etiqueta (acciones): ocupa la linea y se centra. Se excluyen las
       que ya tienen un papel propio —titular la tarjeta o formar su encabezado—
       o esta regla se lo pisaria por ser mas especifica. */
    .crud-table td:not([data-label]):not([data-titulo]):not([data-jefe]) {
        justify-content: center; text-align: center !important;
    }
    .crud-table td[data-label=""]::before { content: none; }

    /* Fila de "sin datos" o totales: sin formato de par etiqueta-valor */
    /* Una celda que abarca varias columnas se centra... salvo que este titulando
       su tarjeta, que es el caso del «Totales» de un pie de tabla. */
    .crud-table td[colspan]:not([data-titulo]) { justify-content: center; text-align: center !important; }
    .crud-table td[colspan]::before { content: none; }

    .pn-acciones { width: 100%; justify-content: space-around; padding-top: .35rem;
                   border-top: 1px solid var(--rg-border-light); margin-top: .3rem; }
    .pn-acciones .btn-icon { font-size: 1.05rem; padding: .35rem .5rem; }
}

/* Panel: motivo del regulador y bitacora de eventos */
.pn-motivo { margin-top: .25rem; font-size: .7rem; color: var(--rg-danger); line-height: 1.25;
    display: flex; gap: .25rem; align-items: flex-start; text-align: left; }
.pn-motivo i { flex-shrink: 0; margin-top: .1rem; }

.pn-timeline { display: flex; flex-direction: column; gap: .4rem; }
.pn-ev { border: 1px solid var(--rg-border); border-left: 3px solid var(--rg-info);
    background: var(--rg-bg-subtle); border-radius: 8px; padding: .5rem .65rem; }
.pn-ev.malo { border-left-color: var(--rg-danger); background: rgba(192,38,38,.05); }
.pn-ev-cab { display: flex; justify-content: space-between; gap: .6rem; font-size: .8rem; flex-wrap: wrap; }
.pn-ev-est { font-size: .76rem; color: var(--rg-text-secondary); margin-top: .15rem; }
.pn-ev-msg { font-size: .78rem; color: var(--rg-text-primary); margin-top: .2rem; word-break: break-word; }
.pn-ev-crudo { margin-top: .35rem; }
.pn-ev-crudo > summary { cursor: pointer; font-size: .74rem; color: var(--rg-text-secondary); user-select: none; }
.pn-ev-crudo > summary:hover { color: var(--rg-text-primary); }
.pn-ev-crudo > pre { margin: .35rem 0 0; max-height: 240px; overflow: auto; font-size: .72rem;
    white-space: pre-wrap; word-break: break-word; background: var(--rg-bg-input);
    color: var(--rg-text-primary); border: 1px solid var(--rg-border); border-radius: .4rem; padding: .55rem; }
.cs-link { color: var(--rg-primary-ink); text-decoration: none; word-break: break-all; }
.cs-link:hover { text-decoration: underline; }

/* Panel: sugerencias de estandarizacion */
.btn-sugerencia { color: var(--rg-warning) !important; position: relative; }
.pn-badge-num { display:inline-block; margin-left:.2rem; min-width:1.05rem; padding:0 .25rem;
    background: var(--rg-warning); color:#fff; border-radius:1rem; font-size:.62rem;
    font-weight:700; line-height:1.05rem; text-align:center; vertical-align:top; }

.pn-sug-list { display:flex; flex-direction:column; gap:.45rem; }
.pn-sug { border:1px solid var(--rg-border); border-left:3px solid var(--rg-text-muted);
    background: var(--rg-bg-subtle); border-radius:8px; padding:.5rem .65rem; }
.pn-sug.normalizado { border-left-color: var(--rg-warning); background: rgba(217,119,6,.06); }
.pn-sug.malo { border-left-color: var(--rg-danger); background: rgba(192,38,38,.05); }
.pn-sug-cab { display:flex; align-items:baseline; gap:.4rem; flex-wrap:wrap; font-size:.82rem; }
.pn-sug-tag { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
    color: var(--rg-text-muted); }
.pn-sug.normalizado .pn-sug-tag { color: var(--rg-warning); }
.pn-sug.malo .pn-sug-tag { color: var(--rg-danger); }
.pn-sug-msg { font-size:.79rem; color: var(--rg-text-secondary); margin-top:.2rem; }

/* Las columnas se dimensionan por su CONTENIDO y el sobrante se reparte.
   Antes iban con ancho fijo repartido por igual, asi que un nombre de
   comprobante o un rango de eNCF se cortaba con puntos suspensivos mientras
   quedaba media pantalla vacia a la derecha. Un dato a medias no sirve: si de
   verdad no cabe, el contenedor desplaza en horizontal. */
.crud-grid-wrapper { overflow-x: auto; }
.crud-table { width: 100%; table-layout: auto; }

/* Panel: una fila = una linea (mas registros visibles, mejor lectura) */
.crud-table tbody td { white-space: nowrap; }
/* El seguimiento se muestra ENTERO. Antes se recortaba con puntos suspensivos y
   el numero de seguimiento quedaba a medias — justo el dato que hace falta leer
   completo para reclamar ante el regulador. Se deja fluir en dos lineas. */
.pn-linea { white-space: normal; line-height: 1.35; }

.pn-motivo { display: inline-block; margin-left: .3rem; color: var(--rg-danger); cursor: help; }

/* En movil las tarjetas necesitan que el texto fluya (anula el nowrap de arriba) */
@media (max-width: 768px) {
    .crud-table tbody td { white-space: normal; }
    .pn-linea { max-width: none; overflow: visible; }
}

/* Resaltado de sintaxis (JSON / XML) */
.tk-key  { color: #7dd3fc; }
.tk-str  { color: #86efac; }
.tk-num  { color: #fdba74; }
.tk-lit  { color: #c4b5fd; }
.tk-tag  { color: #93c5fd; }
.tk-attr { color: #fcd34d; }
.tk-com  { color: var(--rg-text-muted); font-style: italic; }
[data-mode="light"] .tk-key  { color: #0369a1; }
[data-mode="light"] .tk-str  { color: #15803d; }
[data-mode="light"] .tk-num  { color: #b45309; }
[data-mode="light"] .tk-lit  { color: #6d28d9; }
[data-mode="light"] .tk-tag  { color: #1d4ed8; }
[data-mode="light"] .tk-attr { color: #a16207; }

/* ── Editor de codigo con resaltado (sin JavaScript) ─────────────────────────
   El <pre> coloreado y el <textarea> transparente comparten la misma celda de
   grilla: la fila toma la altura del contenido y el scroll lo hace el contenedor,
   asi el texto y su color nunca se desalinean.                                */
.cs-editor {
    display: grid;
    position: relative;
    flex: 1;
    min-height: 320px;
    max-height: 60vh;
    overflow: auto;
    background: var(--rg-bg-input);
    border: 1px solid var(--rg-border);
    border-radius: 8px;
}
.cs-editor > .cs-editor-hl,
.cs-editor > .cs-editor-ta {
    grid-area: 1 / 1;
    margin: 0;
    padding: .6rem;
    border: 0;
    font-family: var(--mono);
    font-size: .8rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
    tab-size: 2;
}
.cs-editor > .cs-editor-hl { pointer-events: none; color: var(--rg-text-primary); }
.cs-editor > .cs-editor-ta {
    color: transparent;
    background: transparent;
    caret-color: var(--rg-accent);
    resize: none;
    overflow: hidden;
    outline: none;
}
.cs-editor > .cs-editor-ta::selection { background: rgba(37,99,235,.35); color: transparent; }
.cs-editor:focus-within { border-color: var(--rg-primary); box-shadow: 0 0 0 3px rgba(20,58,107,.15); }

/* Seleccion de adjuntos del envio (consola) */
.cs-adjuntos { position: fixed; z-index: 1302; left: 50%; transform: translateX(-50%);
    bottom: 22vh; display: flex; gap: 1rem; background: var(--rg-bg-card);
    border: 1px solid var(--rg-border); border-radius: 8px; padding: .5rem .8rem;
    box-shadow: var(--rg-shadow-md); font-size: .82rem; }
.cs-adjuntos label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; }
.cs-adjuntos input { width: auto; margin: 0; }

/* Autorizaciones: fila seleccionada y vencimiento */
.crud-table tbody tr.sel { background: var(--rg-primary-light); }
[data-mode="dark"] .crud-table tbody tr.sel { background: rgba(29,78,216,.15); }
.crud-table td.vencido { color: var(--rg-danger); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════════════
   LEGIBILIDAD — el navegador pinta algunos controles con sus propios colores y
   en tema oscuro quedan textos casi invisibles. Aqui se fuerza el contraste.
   ════════════════════════════════════════════════════════════════════════════ */

/* Las opciones de un <select> se dibujan fuera del documento: sin esto heredan
   el fondo blanco del sistema y el texto claro del tema se pierde. */
select option,
select optgroup {
    background: var(--rg-bg-card);
    color: var(--rg-text-primary);
}
[data-mode="dark"] select option:checked,
[data-mode="dark"] select option:hover { background: var(--rg-primary); color: #fff; }

/* Campos de la tabla de detalle: mismo contraste que el resto del formulario */
.crud-table input,
.crud-table select,
.crud-table textarea,
.em-tabla input,
.em-tabla select {
    background: var(--rg-bg-input);
    color: var(--rg-text-primary);
    border: 1px solid var(--rg-border);
    border-radius: 6px;
    padding: .3rem .45rem;
}
.crud-table input::placeholder,
.em-tabla input::placeholder { color: var(--rg-text-muted); opacity: 1; }

/* El total en cero seguia con el color primario sobre fondo oscuro: se apaga
   solo cuando no hay importe, pero sin desaparecer. */
.em-total b { color: var(--rg-text-primary); }
.em-total b.cero { color: var(--rg-text-muted); }

/* El pie de los indicadores era demasiado tenue en oscuro */
[data-mode="dark"] .fe-kpi-foot { color: var(--rg-text-muted); }

/* Texto deshabilitado legible (antes se leia como "apagado del todo") */
input:disabled, select:disabled, textarea:disabled {
    color: var(--rg-text-secondary);
    background: var(--rg-bg-subtle);
    opacity: 1;
}

/* Tabla de detalle: los controles se ajustan a su columna. Sin esto el input de
   precio conserva su ancho por defecto y desborda, y el de item queda angosto.
   El layout fijo se limita a las tablas EDITABLES: en las de solo lectura hace
   que las columnas no cedan y aparezca scroll horizontal. */
.crud-table:has(td input, td select, td textarea) { table-layout: fixed; }
.crud-table td input,
.crud-table td select,
.crud-table td textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Acciones compactas: cinco iconos sin separacion inutil */
.pn-acciones { gap: 0; }
.pn-acciones .btn-icon { padding: .25rem .3rem; }

/* Fila del historial cuyo detalle esta desplegado. */
.crud-table tr.fila-abierta > td { background: var(--rg-bg-subtle); font-weight: 600; }

/* Cronometro del despachador: cuenta regresiva al proximo intento de consulta. */
.cd-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .15rem .5rem; border-radius: 1rem;
    background: rgba(37,99,235,.1); color: var(--rg-info);
    font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums;
    border: 1px solid rgba(37,99,235,.25);
}
.cd-badge.cd-due { background: rgba(217,119,6,.12); color: var(--rg-warning); border-color: rgba(217,119,6,.3); }
[data-mode="dark"] .cd-badge { background: rgba(37,99,235,.18); }
[data-mode="dark"] .cd-badge.cd-due { background: rgba(217,119,6,.18); }

/* Badge del ambiente de la instalacion (Pruebas / Produccion). */
.amb-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .3rem .75rem; border-radius: 1rem;
    font-size: .85rem; font-weight: 700; letter-spacing: .02em;
    border: 1px solid transparent;
}
.amb-badge.amb-prueba { background: rgba(37,99,235,.12); color: var(--rg-info);    border-color: rgba(37,99,235,.3); }
.amb-badge.amb-prod   { background: rgba(22,163,74,.12); color: var(--rg-success); border-color: rgba(22,163,74,.3); }
[data-mode="dark"] .amb-badge.amb-prueba { background: rgba(37,99,235,.2); }
[data-mode="dark"] .amb-badge.amb-prod   { background: rgba(22,163,74,.2); }