/* ════════════════════════════════════════════════════════════════════════════
   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;
    --rg-text-muted: #64748b;
    --rg-text-faint: #94a3b8;
    --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;
}

[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;
}

/* ── 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); }
.num, .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); }
.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; }
.fe-card-title i { color: var(--rg-primary); }
.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); } }
.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); }
.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); color: var(--rg-primary); }
.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; }
.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-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); }
.col-actions { text-align: right; 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; }
.badge-yes { background: rgba(21,128,61,.12); color: var(--rg-success); }
.badge-no { background: rgba(192,38,38,.1); color: var(--rg-danger); }

.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); }

.form-row { display: flex; gap: .8rem; flex-wrap: wrap; }
.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); }
.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); }

/* Hint de validacion RNC/DGII bajo el input */
.rnc-hint { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem; margin-top: .25rem; }
.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); }

/* 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); }
.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 */
.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; display: inline-flex; gap: .4rem; align-items: center; }
.ct-tab:hover { color: var(--rg-primary); }
.ct-tab.active { color: var(--rg-primary); border-bottom-color: var(--rg-primary); }
.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; }

    /* 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 { overflow: visible; max-height: none; }
    .crud-table, .crud-table tbody, .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 sin etiqueta (acciones): ocupa la linea y se centra */
    .crud-table td:not([data-label]) { 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 */
    .crud-table td[colspan] { 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; }

/* 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; }

/* Sin scroll horizontal: con layout fijo la tabla respeta los anchos declarados
   y reparte el sobrante en la columna libre, en vez de crecer por el contenido.
   Lo que no cabe se recorta con puntos suspensivos. */
.crud-grid-wrapper { overflow-x: auto; }
.crud-table { width: 100%; max-width: 100%; table-layout: fixed; }
.crud-table thead th { overflow: hidden; text-overflow: ellipsis; }
.crud-table tbody td { overflow: hidden; text-overflow: ellipsis; }

/* Panel: una fila = una linea (mas registros visibles, mejor lectura) */
.crud-table tbody td { white-space: nowrap; }
.pn-linea { max-width: 1px; overflow: hidden; text-overflow: ellipsis; }

.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; }