/* ==========================================================================
   RADAR JUDICIAL — Sistema de diseño
   Autor del proyecto: Cesar Mejia
   Un solo archivo controla el aspecto de todo el sitio.
   Para recolorear la app entera, cambia los tokens de :root
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Marca */
    --navy-900: #08192F;
    --navy-800: #0B2545;
    --navy-700: #13315C;
    --navy-600: #1B4079;
    --navy-500: #2A5A9E;
    --navy-100: #EAF1FA;

    --gold-600: #B08D1E;
    --gold-500: #C9A227;
    --gold-400: #E2BE4E;
    --gold-100: #FBF3DC;

    /* Semánticos */
    --ok-600: #15803D;
    --ok-500: #16A34A;
    --ok-100: #E8F7EE;
    --warn-600: #B45309;
    --warn-500: #D97706;
    --warn-100: #FEF4E2;
    --danger-600: #B91C1C;
    --danger-500: #DC2626;
    --danger-100: #FEF0F0;
    --info-600: #0E7490;
    --info-100: #E4F5F9;

    /* Neutros */
    --ink: #0F172A;
    --muted: #5A6B85;
    --faint: #8FA3BD;
    --line: #E3E9F2;
    --line-soft: #EEF3F9;
    --surface: #FFFFFF;
    --bg: #F5F8FC;

    /* Forma */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(11, 37, 69, .06), 0 4px 12px rgba(11, 37, 69, .05);
    --shadow-md: 0 2px 4px rgba(11, 37, 69, .06), 0 12px 32px rgba(11, 37, 69, .09);
    --shadow-lg: 0 4px 8px rgba(11, 37, 69, .06), 0 24px 56px rgba(11, 37, 69, .14);

    /* Puente con Bootstrap */
    --bs-primary: #13315C;
    --bs-primary-rgb: 19, 49, 92;
    --bs-body-color: #0F172A;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-border-color: #E3E9F2;
    --bs-link-color: #1B4079;
    --bs-link-hover-color: #0B2545;
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    background-color: var(--bg);
    color: var(--ink);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, .serif {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    letter-spacing: -.015em;
    color: var(--navy-800);
}

main { flex: 1 0 auto; }

a { text-decoration: none; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 12px;
    z-index: 2000;
    background: var(--navy-800);
    color: #fff;
    padding: 10px 18px;
    border-radius: var(--radius-sm);
}
.skip-link:focus { left: 16px; color: #fff; }

:focus-visible {
    outline: 3px solid rgba(42, 90, 158, .45);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Icono en línea reutilizable */
.ico {
    width: 1.05em;
    height: 1.05em;
    vertical-align: -.15em;
    flex: none;
}

/* --------------------------------------------------------------------------
   3. NAVBAR
   -------------------------------------------------------------------------- */
.rj-navbar {
    background: rgba(255, 255, 255, .82);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.rj-navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.rj-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 14px 0;
}
.rj-brand svg { width: 34px; height: 34px; flex: none; }
.rj-brand-text {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 700;
    font-size: 1.28rem;
    color: var(--navy-800);
    line-height: 1;
    letter-spacing: -.02em;
}
.rj-brand-text span { color: var(--gold-600); }
.rj-brand-sub {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: .625rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
}

.rj-nav-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

/* Chip con el correo del usuario */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--navy-100);
    border: 1px solid #D8E4F3;
    color: var(--navy-700);
    font-size: .8rem;
    font-weight: 600;
    padding: 6px 13px 6px 7px;
    border-radius: 999px;
    max-width: 260px;
}
.user-chip .avatar {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--navy-600), var(--navy-800));
    color: #fff;
    display: grid;
    place-items: center;
    font-size: .68rem;
    font-weight: 700;
    flex: none;
    text-transform: uppercase;
}
.user-chip .mail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. BOTONES
   -------------------------------------------------------------------------- */
.btn {
    font-weight: 600;
    border-radius: var(--radius-sm);
    --bs-btn-focus-shadow-rgb: 42, 90, 158;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover:not(:disabled) { transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .5; transform: none; }
.btn-sm { border-radius: 9px; }

.btn-primary {
    --bs-btn-bg: var(--navy-700);
    --bs-btn-border-color: var(--navy-700);
    --bs-btn-hover-bg: var(--navy-800);
    --bs-btn-hover-border-color: var(--navy-800);
    --bs-btn-active-bg: var(--navy-900);
    --bs-btn-active-border-color: var(--navy-900);
    --bs-btn-disabled-bg: var(--navy-700);
    --bs-btn-disabled-border-color: var(--navy-700);
    box-shadow: 0 4px 12px rgba(19, 49, 92, .22);
}
.btn-success {
    --bs-btn-bg: var(--ok-600);
    --bs-btn-border-color: var(--ok-600);
    --bs-btn-hover-bg: #126A33;
    --bs-btn-hover-border-color: #126A33;
    --bs-btn-active-bg: #0F5A2B;
    --bs-btn-disabled-bg: var(--ok-600);
    --bs-btn-disabled-border-color: var(--ok-600);
}
.btn-danger {
    --bs-btn-bg: var(--danger-600);
    --bs-btn-border-color: var(--danger-600);
    --bs-btn-hover-bg: #991B1B;
    --bs-btn-hover-border-color: #991B1B;
    --bs-btn-active-bg: #7F1D1D;
    --bs-btn-disabled-bg: var(--danger-600);
    --bs-btn-disabled-border-color: var(--danger-600);
}
.btn-warning {
    --bs-btn-color: var(--navy-900);
    --bs-btn-bg: var(--gold-400);
    --bs-btn-border-color: var(--gold-500);
    --bs-btn-hover-color: var(--navy-900);
    --bs-btn-hover-bg: var(--gold-500);
    --bs-btn-hover-border-color: var(--gold-600);
    --bs-btn-active-bg: var(--gold-600);
    --bs-btn-disabled-color: var(--navy-900);
    --bs-btn-disabled-bg: var(--gold-400);
    --bs-btn-disabled-border-color: var(--gold-500);
    box-shadow: 0 4px 12px rgba(201, 162, 39, .28);
}
.btn-dark {
    --bs-btn-bg: var(--navy-800);
    --bs-btn-border-color: var(--navy-800);
    --bs-btn-hover-bg: var(--navy-900);
    --bs-btn-hover-border-color: var(--navy-900);
    --bs-btn-active-bg: #050F1E;
}
.btn-secondary {
    --bs-btn-bg: #64748B;
    --bs-btn-border-color: #64748B;
    --bs-btn-hover-bg: #526077;
    --bs-btn-hover-border-color: #526077;
}
.btn-light {
    --bs-btn-bg: #FFFFFF;
    --bs-btn-border-color: var(--line);
    --bs-btn-color: var(--navy-700);
    --bs-btn-hover-bg: #F3F7FC;
    --bs-btn-hover-border-color: #CDDAEB;
    --bs-btn-hover-color: var(--navy-800);
}

.btn-outline-primary   { --bs-btn-color: var(--navy-600); --bs-btn-border-color: #C6D5E9; --bs-btn-hover-bg: var(--navy-600); --bs-btn-hover-border-color: var(--navy-600); --bs-btn-active-bg: var(--navy-700); }
.btn-outline-secondary { --bs-btn-color: #56657D; --bs-btn-border-color: var(--line); --bs-btn-hover-bg: #56657D; --bs-btn-hover-border-color: #56657D; }
.btn-outline-success   { --bs-btn-color: var(--ok-600); --bs-btn-border-color: #B7E4C8; --bs-btn-hover-bg: var(--ok-600); --bs-btn-hover-border-color: var(--ok-600); }
.btn-outline-danger    { --bs-btn-color: var(--danger-600); --bs-btn-border-color: #F3C6C6; --bs-btn-hover-bg: var(--danger-600); --bs-btn-hover-border-color: var(--danger-600); }
.btn-outline-warning   { --bs-btn-color: var(--warn-600); --bs-btn-border-color: #F0DCA9; --bs-btn-hover-bg: var(--warn-500); --bs-btn-hover-border-color: var(--warn-500); --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; }
.btn-outline-info      { --bs-btn-color: var(--info-600); --bs-btn-border-color: #B7DDE7; --bs-btn-hover-bg: var(--info-600); --bs-btn-hover-border-color: var(--info-600); --bs-btn-hover-color: #fff; }

/* Botón fantasma de la navbar */
.btn-ghost {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--navy-700);
    font-weight: 600;
    font-size: .9rem;
    padding: 8px 18px;
    border-radius: 11px;
}
.btn-ghost:hover {
    border-color: var(--navy-500);
    color: var(--navy-800);
    box-shadow: var(--shadow-sm);
}

/* Botón principal con logo de Google */
.btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(180deg, var(--navy-700), var(--navy-800));
    color: #fff;
    font-weight: 600;
    font-size: 1.02rem;
    padding: 15px 28px 15px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--navy-800);
    box-shadow: 0 10px 26px rgba(11, 37, 69, .28);
    transition: transform .18s ease, box-shadow .18s ease;
}
.btn-cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(11, 37, 69, .34);
}
.btn-cta:active { transform: translateY(0); }
.g-badge {
    width: 34px; height: 34px;
    background: #fff;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex: none;
}
.g-badge svg { width: 18px; height: 18px; }

/* Botón cuadrado sólo-icono para tablas */
.btn-icon {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    line-height: 1;
}
.btn-icon .ico { width: 15px; height: 15px; vertical-align: middle; }

/* --------------------------------------------------------------------------
   5. TARJETAS
   -------------------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-inner-border-radius: calc(var(--radius-lg) - 1px);
    --bs-card-bg: var(--surface);
    box-shadow: var(--shadow-sm);
}
.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 16px 20px;
}
.card-header .fw-bold {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.08rem;
    color: var(--navy-800);
}

/* Tarjeta de acción del panel */
.tool-card {
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.tool-card:hover { box-shadow: var(--shadow-md); border-color: #D3DEEC; }
.tool-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.tool-ico {
    width: 40px; height: 40px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    flex: none;
    background: linear-gradient(145deg, #EEF3FA, #E2EAF6);
    border: 1px solid #DCE6F3;
    color: var(--navy-700);
}
.tool-ico .ico { width: 20px; height: 20px; }
.tool-title {
    font-family: 'Source Serif 4', Georgia, serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--navy-800);
    line-height: 1.2;
    margin: 0;
}
.tool-sub {
    font-size: .78rem;
    color: var(--muted);
    margin: 2px 0 0;
}

/* Encabezado de página */
.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}
.page-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin: 0;
    line-height: 1.15;
}
.page-sub {
    color: var(--muted);
    font-size: .93rem;
    margin: 6px 0 0;
}

/* Estado del radar.

   El color va acompañado SIEMPRE de texto que dice lo mismo. Un indicador que
   solo se distingue por el color no lo distingue quien no ve bien los colores,
   y aquí lo que se comunica es si el sistema está vigilando o no. */
.estado-radar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: .88rem;
    line-height: 1.3;
}
.estado-radar .punto {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 9px;
}
.estado-texto   { font-weight: 600; }
.estado-detalle { opacity: .75; font-size: .82rem; }

.estado-bien   { background: #e8f5ec; border-color: #b7e0c4; color: #1c6b35; }
.estado-bien   .punto { background: #23a455; }
.estado-aviso  { background: #fdf4e3; border-color: #f0d9a8; color: #8a5b0d; }
.estado-aviso  .punto { background: #d69420; }
.estado-alarma { background: #fdeaea; border-color: #f2c0c0; color: #a32d2d; }
.estado-alarma .punto { background: #d33; }

/* Tarjeta de métrica (admin) */
.stat-card {
    height: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.stat-card::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: var(--navy-600);
}
.stat-card.is-gold::after   { background: var(--gold-500); }
.stat-card.is-warn::after   { background: var(--warn-500); }
.stat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.stat-head .ico { width: 17px; height: 17px; color: var(--navy-500); }
.stat-card.is-gold .stat-head .ico { color: var(--gold-600); }
.stat-card.is-warn .stat-head .ico { color: var(--warn-600); }
.stat-value {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
    color: var(--navy-900);
    margin: 0;
}

/* Panel de consumo de radicados */
.usage-panel {
    background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    color: #fff;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 22px;
}
.usage-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .62);
    margin-bottom: 7px;
}
.usage-count {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}
.usage-count .of {
    font-size: 1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .65);
}
.usage-bar {
    height: 7px;
    width: min(320px, 60vw);
    background: rgba(255, 255, 255, .18);
    border-radius: 99px;
    overflow: hidden;
    margin-top: 12px;
}
.usage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-400), var(--gold-500));
    border-radius: 99px;
    transition: width .5s ease;
}

/* --------------------------------------------------------------------------
   6. TABLAS
   -------------------------------------------------------------------------- */
.table {
    --bs-table-hover-bg: #F5F9FE;
    --bs-table-border-color: var(--line-soft);
    margin-bottom: 0;
    color: var(--ink);
}
.table > thead th {
    background: #F7FAFD;
    color: var(--muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    padding: 13px 14px;
    white-space: nowrap;
}
.table > tbody td {
    padding: 13px 14px;
    vertical-align: middle;
    border-bottom: 1px solid var(--line-soft);
    font-size: .92rem;
}
.table > tbody tr:last-child td { border-bottom: 0; }
.table-light { --bs-table-bg: #F7FAFD; }
.table-dark  { --bs-table-bg: var(--navy-800); --bs-table-color: #fff; --bs-table-border-color: var(--navy-600); }

/* Radicado en fuente monoespaciada: 23 dígitos se leen mucho mejor */
.radicado-cell {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--navy-800);
    white-space: nowrap;
}

.cell-muted { color: var(--muted); }
.table-empty {
    text-align: center;
    padding: 48px 20px !important;
    color: var(--faint);
}
.table-empty .ico {
    width: 40px; height: 40px;
    display: block;
    margin: 0 auto 12px;
    color: #C6D3E4;
}

/* Casillas de selección */
.form-check-input, input[type="checkbox"] {
    cursor: pointer;
    border-color: #C2D0E2;
}
.form-check-input:checked, input[type="checkbox"]:checked {
    background-color: var(--navy-600);
    border-color: var(--navy-600);
}

/* --------------------------------------------------------------------------
   7. BADGES
   -------------------------------------------------------------------------- */
.badge {
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .02em;
    padding: .42em .72em;
    border-radius: 7px;
}
.badge.rounded-pill { border-radius: 99px; }

.badge.bg-success   { background-color: var(--ok-100) !important; color: var(--ok-600) !important; box-shadow: inset 0 0 0 1px #BFE7CE; }
.badge.bg-warning   { background-color: var(--warn-100) !important; color: var(--warn-600) !important; box-shadow: inset 0 0 0 1px #F2DFB4; }
.badge.bg-danger    { background-color: var(--danger-100) !important; color: var(--danger-600) !important; box-shadow: inset 0 0 0 1px #F5CACA; }
.badge.bg-info      { background-color: var(--info-100) !important; color: var(--info-600) !important; box-shadow: inset 0 0 0 1px #BEE0EA; }
.badge.bg-secondary { background-color: #EEF2F7 !important; color: #56657D !important; box-shadow: inset 0 0 0 1px #DDE4EE; }
.badge.bg-primary   { background-color: var(--navy-100) !important; color: var(--navy-700) !important; box-shadow: inset 0 0 0 1px #D3E0F1; }
.badge.bg-dark      { background-color: var(--navy-800) !important; color: #fff !important; }
.badge.text-dark    { color: inherit !important; }

/* --------------------------------------------------------------------------
   8. FORMULARIOS
   -------------------------------------------------------------------------- */
.form-control, .form-select {
    border: 1px solid #D8E1EC;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: .94rem;
    color: var(--ink);
    background-color: #fff;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.form-control::placeholder { color: var(--faint); }
.form-control:focus, .form-select:focus {
    border-color: var(--navy-500);
    box-shadow: 0 0 0 4px rgba(42, 90, 158, .13);
}
.form-control-sm { padding: 7px 11px; font-size: .86rem; border-radius: 9px; }
textarea.form-control { line-height: 1.6; }

.form-control[type="file"] { padding: 8px 12px; cursor: pointer; }
.form-control[type="file"]::file-selector-button {
    background: var(--navy-100);
    border: 0;
    border-radius: 7px;
    color: var(--navy-700);
    font-weight: 600;
    font-size: .82rem;
    padding: 6px 12px;
    margin: -2px 12px -2px -4px;
    cursor: pointer;
    transition: background-color .16s ease;
}
.form-control[type="file"]::file-selector-button:hover { background: #DBE7F7; }

.field-hint {
    font-size: .76rem;
    color: var(--faint);
    margin-top: 7px;
}

/* --------------------------------------------------------------------------
   9. ALERTAS
   -------------------------------------------------------------------------- */
.alert {
    border: 1px solid var(--line);
    border-left: 4px solid var(--navy-600);
    border-radius: 13px;
    box-shadow: var(--shadow-sm);
    font-size: .93rem;
    font-weight: 500;
    padding: 14px 18px;
}
.alert-success { background: #F2FAF5; color: #14532D; border-left-color: var(--ok-500); }
.alert-danger  { background: #FEF3F2; color: #7F1D1D; border-left-color: var(--danger-500); }
.alert-info    { background: #F1F7FD; color: var(--navy-800); border-left-color: var(--navy-500); }
.alert-warning { background: var(--warn-100); color: #7C2D12; border-left-color: var(--warn-500); }

/* --------------------------------------------------------------------------
   10. MODAL
   -------------------------------------------------------------------------- */
.modal-content {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.modal-header {
    background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
    color: #fff;
    border-bottom: 0;
    padding: 18px 22px;
}
.modal-header .modal-title {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}
.modal-body { padding: 22px; background: var(--surface); }
.modal-footer { border-top: 1px solid var(--line); background: #FAFCFE; padding: 14px 22px; }

/* Ficha de datos del expediente */
.detail-table th {
    width: 32%;
    background: #F7FAFD !important;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    vertical-align: middle;
    border-color: var(--line) !important;
}
.detail-table td {
    font-size: .92rem;
    color: var(--ink);
    border-color: var(--line) !important;
}
.detail-table { border-radius: var(--radius); overflow: hidden; border-color: var(--line) !important; }

.modal-section-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--navy-800);
    margin: 26px 0 12px;
}
.modal-section-title .ico { width: 18px; height: 18px; color: var(--gold-600); }

/* --------------------------------------------------------------------------
   Ancho de las pantallas de trabajo
   --------------------------------------------------------------------------
   `container` de Bootstrap topa en 1320 px. Está pensado para texto y ahí es
   correcto —un párrafo muy ancho se lee mal porque el ojo pierde el renglón
   al volver—, pero una tabla de siete columnas no es un párrafo. En un monitor
   de 24" ese tope dejaba 600 px muertos, casi un tercio del ancho; en uno de
   2560, la mitad.

   El tope de 1800 no es capricho: sin ninguno, en una pantalla ultrapanorámica
   la fila se estira tanto que seguirla de un extremo al otro cuesta más que
   desplazarse. Se gana espacio hasta donde sirve y no más.

   Solo va en las pantallas de trabajo —panel, administración, Corte,
   auditoría, respaldos—. Ayuda, legal y descargo son texto y se quedan con su
   ancho de lectura.
   -------------------------------------------------------------------------- */
.contenedor-trabajo {
    width: 100%;
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}
@media (min-width: 1400px) {
    .contenedor-trabajo { padding-left: 1.75rem; padding-right: 1.75rem; }
}

/* Los formularios NO se estiran con la página.
   «Agregar Radicado» y «Carga Masiva» son campos pequeños: a 900 px de ancho
   quedan perdidos en medio de un rectángulo vacío. La tabla es la que gana
   con el espacio; estas dos, no. */
.fila-herramientas { max-width: 1200px; }

.historial-scroll {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.historial-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #F7FAFD;
}
.historial-scroll table { margin-bottom: 0; }
.historial-scroll td { font-size: .85rem; }

/* El historial cabe a lo ancho -------------------------------------------
   Las «actuaciones automáticas» de la Rama traen anotaciones de diez o doce
   renglones (destino del reparto, folios, tipo de providencia, todo en un
   párrafo). Con el ancho automático esa columna estiraba la tabla y empujaba
   «Documentos» fuera de la ventana: para descargar un PDF había que arrastrar
   la barra de abajo hasta el final, y ni siquiera se veía que estuviera ahí.

   Con `table-layout: fixed` la tabla nunca pasa del ancho disponible: los
   anchos salen de la primera fila y la anotación se queda con lo que sobre,
   recortada a tres renglones. El texto entero sigue estando, a un clic. */
.tabla-historial { table-layout: fixed; width: 100%; }

/* Un radicado o una URL sin espacios no tienen por dónde partirse y se salen
   de su columna. `anywhere` los parte donde haga falta. */
.tabla-historial td,
.tabla-historial th { overflow-wrap: anywhere; }

.tabla-historial .col-fecha    { width: 96px; }
.tabla-historial .col-actuacion{ width: 140px; }
.tabla-historial .col-tramite  { width: 84px; }
.tabla-historial .col-registro { width: 96px; }
.tabla-historial .col-docs     { width: 92px; }

.tabla-historial .anotacion {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.35;
    white-space: pre-line;   /* la Rama mete saltos de línea dentro del texto */
}
.tabla-historial .anotacion.abierta {
    display: block;
    overflow: visible;
}
.tabla-historial .ver-mas {
    border: 0;
    background: none;
    padding: 0;
    margin-top: 3px;
    font-size: .74rem;
    font-weight: 600;
    color: var(--navy-800);
    cursor: pointer;
}
.tabla-historial .ver-mas:hover { text-decoration: underline; }

/* En pantallas estrechas «Inicia» y «Finaliza» sobran: casi siempre vienen
   vacías y son justo las que le roban el sitio a la anotación. Siguen en el
   ancho completo, que es donde alguien las mira. */
@media (max-width: 992px) {
    .tabla-historial .col-tramite { display: none; }
}

/* --------------------------------------------------------------------------
   11. FOOTER
   -------------------------------------------------------------------------- */
.footer {
    margin-top: auto;
    padding: 30px 0;
    background: var(--navy-900);
    color: #9FB0C7;
    font-size: .9rem;
    text-align: center;
    border-top: 3px solid var(--gold-500);
}
.footer a { color: var(--gold-400); font-weight: 600; }
.footer a:hover { text-decoration: underline; color: #F0D98A; }

/* --------------------------------------------------------------------------
   12. PORTADA (index)
   -------------------------------------------------------------------------- */
.hero-wrap { position: relative; padding: 68px 0 40px; isolation: isolate; }
.hero-wrap::before {
    content: "";
    position: absolute;
    inset: -140px 0 auto;
    height: 620px;
    z-index: -1;
    background:
        radial-gradient(760px 420px at 78% 12%, rgba(42, 90, 158, .13), transparent 62%),
        radial-gradient(620px 400px at 8% 0%, rgba(201, 162, 39, .12), transparent 60%);
}
.hero-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(19, 49, 92, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(19, 49, 92, .045) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%);
    mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 75%);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--navy-700);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 7px 15px 7px 11px;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
}
.live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ok-500);
    box-shadow: 0 0 0 0 rgba(22, 163, 74, .55);
    animation: pulseDot 2.2s infinite;
}
@keyframes pulseDot {
    70%  { box-shadow: 0 0 0 9px rgba(22, 163, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); }
}

.hero-title {
    font-size: clamp(2.15rem, 4.6vw, 3.5rem);
    font-weight: 700;
    line-height: 1.08;
    color: var(--navy-900);
    margin: 22px 0 18px;
}
.hero-title em {
    font-style: normal;
    position: relative;
    white-space: nowrap;
    color: var(--navy-800);
}
.hero-title em::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: .06em;
    height: .32em;
    background: linear-gradient(90deg, rgba(226, 190, 78, .55), rgba(226, 190, 78, .22));
    border-radius: 3px;
    z-index: -1;
}
.hero-lead {
    font-size: 1.09rem;
    line-height: 1.72;
    color: var(--muted);
    max-width: 30rem;
}

.trust-row { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 26px; }
.trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    color: var(--muted);
    font-weight: 500;
}
.trust-item .ico { width: 17px; height: 17px; color: var(--gold-600); }

/* Radar animado */
.radar-stage { position: relative; max-width: 460px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   Portada en pantallas anchas
   --------------------------------------------------------------------------
   El contenedor de Bootstrap se corta en 1320px. En un monitor de 1900 eso
   deja unos 290px muertos a cada lado y la portada parece encogida.

   Se ensancha el CONTENEDOR y crece el RADAR, que es el elemento que sostiene
   la composición. El párrafo NO se estira a propósito: por encima de unos 75
   caracteres por línea el ojo pierde el renglón al saltar de línea. Es el
   motivo por el que los periódicos usan columnas estrechas teniendo páginas
   anchas. Más ancho aquí se vería más lleno y se leería peor.

   OJO CON EL ORDEN: estas reglas tienen la misma especificidad que las de
   arriba (una sola clase), así que quien gana es la ÚLTIMA. Si este bloque se
   mueve antes de las reglas base, deja de hacer efecto sin dar ningún error.
   -------------------------------------------------------------------------- */
@media (min-width: 1400px) {
    .hero-wrap .container { max-width: 1560px; }
    .hero-wrap { padding-top: 48px; }
    .radar-stage { max-width: 620px; }
    .hero-title { font-size: clamp(3.1rem, 3.4vw, 4rem); }
    /* El párrafo respira algo, pero sigue lejos del límite de legibilidad */
    .hero-lead { max-width: 34rem; }
}

@media (min-width: 1800px) {
    .hero-wrap .container { max-width: 1720px; }
    .radar-stage { max-width: 700px; }
}
.radar-stage svg { width: 100%; height: auto; display: block; }
.radar-sweep { transform-origin: 220px 220px; animation: sweep 5s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }

.blip { animation: blipIn 5s ease-in-out infinite; transform-origin: center; }
.blip-2 { animation-delay: 1.4s; }
.blip-3 { animation-delay: 2.9s; }
.blip-4 { animation-delay: 3.9s; }
@keyframes blipIn {
    0%, 100% { opacity: .18; }
    8%       { opacity: 1; }
    45%      { opacity: .3; }
}
.ping { animation: ping 5s ease-out infinite; transform-origin: center; transform-box: fill-box; }
.ping-2 { animation-delay: 1.4s; }
.ping-3 { animation-delay: 2.9s; }
@keyframes ping {
    0%        { transform: scale(.4); opacity: .85; }
    25%, 100% { transform: scale(2.6); opacity: 0; }
}

.float-card {
    position: absolute;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 11px;
    animation: bob 6s ease-in-out infinite;
}
.float-card .fc-title { font-size: .82rem; font-weight: 700; color: var(--navy-800); line-height: 1.25; }
.float-card .fc-sub { font-size: .72rem; color: var(--muted); line-height: 1.3; }
.fc-icon {
    width: 32px; height: 32px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    flex: none;
}
.fc-green { background: var(--ok-100); color: var(--ok-500); }
.fc-gold  { background: var(--gold-100); color: var(--gold-600); }
.fc-icon .ico { width: 17px; height: 17px; }
.fc-top { top: 6%; right: -10px; }
.fc-bot { bottom: 8%; left: -14px; animation-delay: 1.6s; }
@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

.section-features { padding: 26px 0 76px; }
.section-kicker {
    text-align: center;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-600);
    margin-bottom: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.section-kicker::before,
.section-kicker::after {
    content: "";
    height: 1px;
    width: 54px;
    background: linear-gradient(90deg, transparent, var(--line));
}
.section-kicker::after { background: linear-gradient(90deg, var(--line), transparent); }

.feature-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.feature-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--navy-600), var(--gold-500));
    opacity: 0;
    transition: opacity .22s ease;
}
.feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #D3DEEC; }
.feature-card:hover::before { opacity: 1; }
.feature-icon {
    width: 54px; height: 54px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    margin-bottom: 20px;
    background: linear-gradient(145deg, #EEF3FA, #E2EAF6);
    border: 1px solid #DCE6F3;
}
.feature-icon svg { width: 27px; height: 27px; }
.feature-card h5 { font-size: 1.15rem; font-weight: 700; color: var(--navy-800); margin-bottom: 9px; }
.feature-card p { color: var(--muted); font-size: .945rem; line-height: 1.65; margin: 0; }

/* --------------------------------------------------------------------------
   13. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .hero-wrap { padding-top: 44px; text-align: center; }
    .hero-lead { margin-left: auto; margin-right: auto; }
    .trust-row { justify-content: center; }
    .radar-stage { margin-top: 46px; max-width: 380px; }
}

@media (max-width: 767.98px) {
    .modal-fullscreen-sm-down .modal-content { height: 100vh; border-radius: 0; }
    .usage-panel { padding: 18px; }
    .usage-bar { width: 100%; }
    .page-head { align-items: flex-start; }
}

@media (max-width: 575.98px) {
    .rj-brand-sub { display: none; }
    .rj-brand svg { width: 30px; height: 30px; }
    .rj-brand-text { font-size: 1.1rem; }
    .btn-cta { width: 100%; justify-content: center; }
    .user-chip { max-width: 170px; font-size: .74rem; }
    .float-card { padding: 9px 12px; }
    .float-card .fc-title { font-size: .74rem; }
    .float-card .fc-sub { font-size: .66rem; }
    .fc-top { right: -4px; }
    .fc-bot { left: -4px; }
    .stat-value { font-size: 2.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}