/* ==========================================================
   Nuclearis SGD — Custom CSS
   Design System v2026 (implementado desde nuclearis-dms-design-system handoff)

   Tipografía: Rajdhani (primaria) · Exo 2 (display/brand) · Open Sans (público)
   Paleta brand:
     Navbar/dark    #3a5353  (--nuc-primary-dark)
     Brand teal     #507070  (--nuc-primary)
     Texto oscuro   #0B2321  (--nuc-ink)
     Fondo público  #f4f6f6  (--nuc-bg)
     Verde auténtico#1b7a3c  (--nuc-success)
     Rojo inválido  #a33030  (--nuc-danger)
   El resto de la interfaz usa Bootstrap 5.3 sin personalizar.
   ========================================================== */

/* ── Variables de marca ─────────────────────────────────── */
:root {
    --nuc-primary:         #507070;
    --nuc-primary-dark:    #3a5353;
    --nuc-primary-soft:    #eef3f3;
    --nuc-ink:             #0B2321;
    --nuc-bg:              #f4f6f6;
    --nuc-surface:         #ffffff;
    --nuc-surface-muted:   #fafafa;
    --nuc-border:          #e3e5e5;
    --nuc-border-soft:     #b9c4c4;
    --nuc-success:         #1b7a3c;
    --nuc-danger:          #a33030;
    --nuc-muted:           #6c757d;

    /* Soft backgrounds para stat icons */
    --nuc-primary-soft-bg: rgba(13, 110, 253, .10);
    --nuc-warning-soft-bg: rgba(255, 193, 7, .15);
    --nuc-danger-soft-bg:  rgba(220, 53, 69, .12);
    --nuc-success-soft-bg: rgba(25, 135, 84, .10);
}

/* ── Reset tipográfico base ─────────────────────────────── */
html, body {
    font-family: 'Rajdhani', 'Exo 2', system-ui, sans-serif;
    font-weight: 500;
    color: #212529;
    background: #ffffff;
    line-height: 1.45;
}

/* ── Bootstrap Icons — animación de rotación ────────────── */
@keyframes bi-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.bi-spin {
    display: inline-block;
    animation: bi-spin 0.75s linear infinite;
}

/* ── Jerarquía tipográfica ───────────────────────────────── */
h1, .h1 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 2rem;   line-height: 1.2; }
h2, .h2 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.75rem; line-height: 1.2; }
h3, .h3 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.5rem;  line-height: 1.2; }
h4, .h4 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.5rem;  line-height: 1.2; }
h5, .h5 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
h6, .h6 { font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1rem;    line-height: 1.2; }

/* ── Navbar autenticado ─────────────────────────────────── */
.navbar-custom {
    background-color: var(--nuc-primary-dark) !important;  /* #3a5353 */
    min-height: 56px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-brand:hover,
.navbar-custom .nav-link {
    color: rgba(255, 255, 255, 0.92) !important;
    font-family: 'Rajdhani', sans-serif;
}

/* Separador "Sistema de Gestión Documental" al lado del logo */
.navbar-custom .navbar-brand span,
.navbar-title {
    font-size: 13px;
    opacity: .85;
    font-weight: 500;
    border-left: 1px solid rgba(255, 255, 255, .3);
    padding-left: 10px;
    color: rgba(255, 255, 255, .9);
}

/* Botón buscador en navbar */
.navbar-custom .btn-outline-light {
    font-family: 'Rajdhani', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85) !important;
    border-color: rgba(255, 255, 255, .35);
    background: transparent;
    transition: border-color .2s, background .2s;
}
.navbar-custom .btn-outline-light:hover {
    border-color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .08);
    color: #ffffff !important;
}

/* Dropdown usuario */
.navbar-custom .dropdown-toggle {
    font-family: 'Rajdhani', sans-serif;
    font-size: .82rem;
    font-weight: 500;
    border-color: rgba(255, 255, 255, .35);
    color: rgba(255, 255, 255, 0.88) !important;
}
.navbar-custom .dropdown-menu {
    border-color: rgba(255, 255, 255, .1);
    border-radius: 6px;
    margin-top: 4px;
}
.navbar-custom .dropdown-item {
    font-family: 'Rajdhani', sans-serif;
    font-size: .88rem;
    font-weight: 500;
}
.navbar-custom .dropdown-item.text-danger {
    color: #dc3545 !important;
}
.navbar-custom .dropdown-divider {
    border-color: rgba(0, 0, 0, .1);
}

/* Banderas de idioma */
.btn-nav-flag {
    background: transparent !important;
    border: 1px solid transparent !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    transition: border-color .15s, background .15s;
    line-height: 1;
}
.btn-nav-flag:hover,
.btn-nav-flag.flag-active {
    border-color: rgba(255, 255, 255, .45) !important;
    background: rgba(255, 255, 255, .1) !important;
}
.flag-emoji { font-size: 1.1rem; }

/* ── Layout wrapper ─────────────────────────────────────── */
#wrapper { min-height: calc(100vh - 56px); }
#main-content {
    min-height: calc(100vh - 56px);
    background: #ffffff;
}

/* ── Botones — sistema outline-only ────────────────────────
   Todos los botones son outline. Sin rellenos sólidos excepto
   .btn-accept (alias btn-outline-success, acción principal). */

.btn {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 500;
    border-radius: 6px;
    transition: background-color .18s, border-color .18s, color .18s;
}

/* .btn-accept = alias semántico para "acción principal de guardar/enviar"
   Usa el estilo de Bootstrap btn-outline-success */
.btn-accept {
    color: #198754;
    background: transparent;
    border: 1px solid #198754;
}
.btn-accept:hover {
    color: #fff;
    background: #198754;
    border-color: #198754;
}
.btn-accept:active,
.btn-accept:focus {
    box-shadow: 0 0 0 .2rem rgba(25, 135, 84, .25);
}

/* ── Soft-backgrounds para stat icons ───────────────────── */
.bg-primary-soft {
    background-color: var(--nuc-primary-soft-bg);  /* rgba(13,110,253,.10) */
    color: #0d6efd;
}
.bg-warning-soft {
    background-color: var(--nuc-warning-soft-bg);  /* rgba(255,193,7,.15) */
    color: #b98a1c;
}
.bg-danger-soft {
    background-color: var(--nuc-danger-soft-bg);   /* rgba(220,53,69,.12) */
    color: #dc3545;
}
.bg-success-soft {
    background-color: var(--nuc-success-soft-bg);  /* rgba(25,135,84,.10) */
    color: #198754;
}

/* ── Stat cards (dashboard) ─────────────────────────────── */
.stat-card {
    transition: outline .1s;
}
.stat-card.stat-clickable {
    cursor: pointer;
}
.stat-card.stat-active,
.stat-card[data-active="1"] {
    outline: 2px solid #0d6efd;
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: .5rem;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 22px;
}

.stat-number {
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--nuc-ink);   /* #0B2321 */
}

.stat-label {
    font-size: .75rem;
    color: var(--nuc-muted);
    font-weight: 500;
    margin-top: 2px;
}

/* Stat card deshabilitada */
.stat-card.disabled {
    opacity: .45;
    pointer-events: none;
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
    border-radius: 8px;
}

/* ── Formularios ─────────────────────────────────────────── */
.form-label.fw-bold {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
}

/* ── Badges ─────────────────────────────────────────────── */
.badge {
    font-weight: 500;
    font-family: 'Rajdhani', sans-serif;
}

/* ── Tablas ─────────────────────────────────────────────── */
.table thead th {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
}

/* ── DataTables overrides ───────────────────────────────── */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_paginate {
    font-family: 'Rajdhani', sans-serif;
    font-size: .88rem;
}

/* ── Modales ─────────────────────────────────────────────── */
.modal-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
}

/* ── Login page ─────────────────────────────────────────── */
.login-body {
    background-color: var(--nuc-primary-dark);
    min-height: 100vh;
}

.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: 40px 20px;
}

.login-card-wrap {
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.login-logo img {
    display: inline-block;
}

.login-logo-text {
    font-family: 'Exo 2', 'Rajdhani', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: .5px;
    color: #ffffff;
    text-transform: lowercase;
}

.login-eyebrow {
    font-family: 'Exo 2', 'Rajdhani', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}

.login-divider {
    width: 60px;
    height: 2px;
    background-color: rgba(255, 255, 255, .25);
    border: none;
    margin: 16px auto 20px;
}

.login-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 6px;
}

.login-subtitle {
    font-family: 'Rajdhani', sans-serif;
    font-size: .88rem;
    font-weight: 300;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 24px;
}

.btn-login-google {
    font-family: 'Rajdhani', sans-serif;
    font-size: .9rem;
    font-weight: 500;
    border: 1.5px solid rgba(255, 255, 255, .4);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.88);
    background: transparent;
    padding: 10px 28px;
    transition: border-color .2s, background .2s;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    width: 100%;
}
.btn-login-google:hover {
    border-color: rgba(255, 255, 255, .75);
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.login-footer-text {
    font-size: .75rem;
    color: rgba(255, 255, 255, .3);
}

/* ── Navbar brand wordmark ──────────────────────────────── */
.navbar-logo-text {
    font-family: 'Exo 2', 'Rajdhani', sans-serif;
    font-weight: 700;
    letter-spacing: .5px;
    color: #ffffff;
    text-transform: lowercase;
}

/* ── Miscelánea ─────────────────────────────────────────── */
/* Hash box (CUDs, hashes SHA-256 en verificador) */
.hash-box {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: .82rem;
    word-break: break-all;
    background: var(--nuc-surface-muted);
    border: 1px solid var(--nuc-border);
    border-radius: 8px;
    padding: .55rem .75rem;
    line-height: 1.35;
}

/* Dropzone (usa el verificador público — coincide con public.php) */
.dropzone {
    border: 2px dashed var(--nuc-border-soft);
    border-radius: 12px;
    text-align: center;
    background: #fbfcfc;
    transition: all .2s;
    cursor: pointer;
}
.dropzone.drag { border-color: #0d6efd; background: rgba(13, 110, 253, .04); }
.dropzone.ok   { border-color: var(--nuc-success); background: #e9f6ee; }
.dropzone.err  { border-color: var(--nuc-danger);  background: #fae9e9; }

/* Stamp big — usado en verificador público */
.stamp-big {
    font-family: 'Courier New', monospace;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--nuc-primary-dark);
}

/* Separador de sección */
.section-divider {
    width: 80px;
    height: 2px;
    background-color: var(--nuc-border);
    border: none;
    margin: 10px 0;
    display: block;
}

/* Título de sección con eyebrow */
.section-eyebrow {
    font-family: 'Rajdhani', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--nuc-muted);
}

/* Form — CUD preview */
#cudPreview {
    font-family: 'Courier New', monospace;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .04em;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 767px) {
    #main-content { padding: 1rem !important; }
    .stat-number  { font-size: 1.4rem; }
}