@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ============================================================
   SURF · Theme layer
   Paleta ORIGINAL preservada. No se inventan colores nuevos.
   Solo se añaden neutros que ya existen en SUPINA como variables
   para referenciar desde otros archivos.
   ============================================================ */

:root {
    /* Paleta original del sistema (NO tocar) */
    --surf-navy:       #192a48;   /* sidebar, header, logo */
    --surf-blue:       #006DAA;   /* primario, links, active */
    --surf-blue-alt:   #0084ff;   /* SUPINA blue secundario */
    --surf-beige:      #ebd0b2;   /* fondo body */
    --surf-orange:     #f87500;   /* accent SUPINA default */
    --surf-coral:      #fa7753;   /* accent SUPINA blue */

    /* Grises que YA existen en SUPINA (no inventados) */
    --surf-ink:        #212121;   /* texto principal (ya en SUPINA) */
    --surf-gray-700:   #2a2a2a;
    --surf-gray-500:   #7e7e7e;
    --surf-gray-400:   #adadad;
    --surf-gray-200:   #ebebeb;
    --surf-gray-100:   #f3f3f3;
    --surf-gray-50:    #f7f7f7;
    --surf-gray-25:    #fafafa;
    --surf-paper:      #ffffff;

    /* Sombra, radio, motion (presentación, no color) */
    --surf-shadow-sm:  0 1px 2px rgba(25,42,72,.06), 0 1px 1px rgba(25,42,72,.04);
    --surf-shadow-md:  0 6px 16px -4px rgba(25,42,72,.12), 0 2px 4px rgba(25,42,72,.06);
    --surf-shadow-lg:  0 24px 48px -16px rgba(25,42,72,.22), 0 8px 16px -8px rgba(25,42,72,.10);
    --surf-shadow-ring: 0 0 0 3px rgba(0,109,170,.18);

    --surf-radius-sm:  6px;
    --surf-radius-md:  10px;
    --surf-radius-lg:  14px;
    --surf-radius-pill: 999px;

    --surf-ease:       cubic-bezier(.2,.7,.2,1);
    --surf-dur:        180ms;
    --surf-dur-lg:     280ms;

    --surf-font-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
    --surf-font-ui:      'Poppins', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --surf-font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

html, body {
    font-family: var(--surf-font-ui) !important;
    color: var(--surf-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-size: 14px;
    line-height: 1.55;
}

/* ---- Override NUCLEAR: Poppins en TODO el sistema ----------
   SUPINA + Bootstrap 3 setean Helvetica/Arial/Lato. Esta capa
   los sobreescribe SIN tocar las clases de icon-font (glyph-icon
   usa FontAwesome via ::before, su font es de la pseudo no del
   contenedor, así que no rompe). Titulares quedan en Fraunces.
   ---------------------------------------------------------- */
body,
body p, body span, body div, body a, body li, body ul, body ol, body dl, body dt, body dd,
body small, body strong, body em, body b, body i:not([class*="icon"]):not([class*="fa"]):not([class*="lc"]),
body input, body select, body textarea, body button, body label, body legend, body fieldset,
body table, body thead, body tbody, body tfoot, body tr, body th, body td,
body .btn, body .form-control, body .control-label,
body .modal-content, body .modal-body, body .modal-footer,
body .dropdown-menu, body .dropdown-menu > li > a,
body .tooltip, body .tooltip-inner, body .popover, body .popover-content, body .popover-title,
body .alert, body .label, body .bs-label, body .badge,
body .nav, body .navbar, body .navbar-nav, body .navbar-nav > li > a,
body .pagination, body .pagination > li > a,
body #page-header, body #page-sidebar,
body .user-profile, body .user-profile > a,
body .page-box, body .content-box, body .button-pane,
body .ui-widget, body .ui-widget-content, body .ui-widget-header,
body .ui-datepicker, body .ui-dialog, body .ui-tabs, body .ui-accordion,
body .ui-button, body .ui-menu, body .ui-menu-item,
body blockquote, body code, body pre,
body .help-block, body .form-text,
body div.dataTables_wrapper, body div.dataTables_wrapper *,
body .DTTT_container, body .DTTT_container * {
    font-family: var(--surf-font-ui) !important;
}

/* TODOS los titulares en Poppins — Fraunces fue retirado a pedido del
   usuario. La capa de display queda solo disponible vía variable. */
body h1, body h2, body h3, body h4, body h5, body h6,
body .page-title,
body .modal-title,
body #header-logo span {
    font-family: var(--surf-font-ui) !important;
    font-weight: 600;
    letter-spacing: -.005em;
}

body h1, body .page-title { font-weight: 700; }
body #header-logo span { font-weight: 700; letter-spacing: .14em; }

/* IMPORTANTE: NO se tocan font-family de .glyph-icon, .fa, .lc ni de
   sus pseudo-elementos ::before/::after. Los icon-fonts son aplicados
   por el propio CSS de SUPINA en pseudo-elementos con su propia
   font-family — no se ven afectados por las reglas de arriba porque
   no usamos selectores universales. */

/* Fondo: se mantiene #ebd0b2 ORIGINAL, solo se añade luminosidad sutil */
body {
    background: #ebd0b2 !important;
}

h1, h2, h3, h4, .page-title {
    color: var(--surf-ink);
}

h1, .page-title { font-size: 26px; line-height: 1.25; }
h2 { font-size: 21px; line-height: 1.3; }
h3 { font-size: 17px; line-height: 1.35; }
h4 { font-size: 15px; line-height: 1.4; }

small, .small {
    font-size: 12px;
    font-weight: 500;
}

a {
    color: var(--surf-blue);
    transition: color var(--surf-dur) var(--surf-ease);
}

a:hover, a:focus {
    color: var(--surf-navy);
    text-decoration: none;
}

::selection {
    background: rgba(0,109,170,.2);
    color: var(--surf-ink);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surf-gray-400); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--surf-gray-500); background-clip: padding-box; border: 2px solid transparent; }
