/* ============================================================================
   SPARTA GYM · Identidad visual
   ----------------------------------------------------------------------------
   Paleta extraída del logo (app/images/sparta.png):
     · Laurel / oliva   #788830  (color exacto de las hojas del logo)
     · Negro espartano  #171915  (trazo del casco y la tipografía)
     · Blanco hueso     #F5F6EF
   Este archivo se carga DESPUES de theme.css, por lo que el tema base de
   Adianti queda intacto y sobrevive a las actualizaciones del framework.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
    /* Oliva de marca (rampa generada sobre el H=71 grados del logo) */
    --sg-olive-50:  #F8F9F1;
    --sg-olive-100: #EDF1DA;
    --sg-olive-200: #D8E1B2;
    --sg-olive-300: #C1CF81;
    --sg-olive-400: #ABBF4F;
    --sg-olive-500: #93A739;
    --sg-olive-600: #788830;   /* color literal del laurel */
    --sg-olive-700: #616F25;   /* accion principal (5.5:1 sobre blanco) */
    --sg-olive-800: #4B551B;
    --sg-olive-900: #343B11;

    /* Grafito espartano */
    --sg-ink-50:  #F7F8F7;
    --sg-ink-100: #F0F1EE;
    --sg-ink-200: #DEE0DC;
    --sg-ink-300: #BFC3BB;
    --sg-ink-400: #949A8D;
    --sg-ink-500: #707769;
    --sg-ink-600: #52574C;
    --sg-ink-700: #383D34;
    --sg-ink-800: #262A23;
    --sg-ink-900: #171915;

    /* Superficies */
    --sg-surface:      #F2F3EC;
    --sg-surface-card: #FFFFFF;
    --sg-border:       #E3E5D9;

    /* Radios y sombras */
    --sg-radius-sm: 8px;
    --sg-radius:    12px;
    --sg-radius-lg: 16px;
    --sg-shadow-xs: 0 1px 2px rgba(23, 25, 21, .06);
    --sg-shadow-sm: 0 1px 3px rgba(23, 25, 21, .07), 0 1px 2px rgba(23, 25, 21, .04);
    --sg-shadow:    0 4px 14px rgba(23, 25, 21, .08), 0 1px 3px rgba(23, 25, 21, .05);
    --sg-shadow-lg: 0 14px 34px rgba(23, 25, 21, .14), 0 3px 8px rgba(23, 25, 21, .07);

    /* Overrides del tema base */
    --ad-menu-size: 320px;
    --ad-menu-item-color: var(--sg-olive-700);
    --bs-dark: var(--sg-ink-900);

    /* Alto de la barra superior: la cabecera del menú lo copia para que
       ambas bandas queden al mismo nivel y no se forme un escalón. */
    --sg-topbar-h: 63px;
}

/* Bootstrap: azul -> oliva --------------------------------------------------*/
/* --sg-accent / --sg-hairline / --sg-thead-bg cambian con el tema, y son los
   que deben usarse en el resto del archivo. Nunca un color claro fijo. */
[data-bs-theme=light] {
    --bs-primary:        var(--sg-olive-700);
    --bs-primary-rgb:    97, 111, 37;
    --bs-primary-text-emphasis: var(--sg-olive-800);
    --bs-primary-bg-subtle:     var(--sg-olive-100);
    --bs-primary-border-subtle: var(--sg-olive-200);
    --bs-link-color:       var(--sg-olive-700);
    --bs-link-color-rgb:   97, 111, 37;
    --bs-link-hover-color: var(--sg-olive-900);
    --bs-border-color:     var(--sg-border);
    --bs-dark-bg-subtle:   var(--sg-surface);
    --bs-light-bg-subtle:  var(--sg-surface);
    --bs-body-color:       var(--sg-ink-800);
    --bs-emphasis-color:   var(--sg-ink-900);
    --bs-secondary-color:  var(--sg-ink-500);

    --sg-accent:     var(--sg-olive-700);
    --sg-hairline:   var(--sg-border);
    --sg-thead-bg:   #F1F3E7;
    --sg-thead-rule: var(--sg-olive-300);
    --sg-group-bg:   var(--sg-olive-100);
    --sg-group-fg:   var(--sg-olive-900);
}

[data-bs-theme=dark] {
    --bs-primary:          var(--sg-olive-500);
    --bs-primary-rgb:      147, 167, 57;
    --bs-primary-text-emphasis: var(--sg-olive-300);
    --bs-primary-bg-subtle:     #2A3010;
    --bs-primary-border-subtle: #4B551B;
    --bs-link-color:       var(--sg-olive-400);
    --bs-link-color-rgb:   171, 191, 79;
    --bs-link-hover-color: var(--sg-olive-300);
    --bs-dark-bg-subtle:   #14160F;

    --sg-accent:     var(--sg-olive-400);
    --sg-hairline:   rgba(255, 255, 255, .10);
    --sg-thead-bg:   rgba(255, 255, 255, .07);
    --sg-thead-rule: var(--sg-olive-700);
    --sg-group-bg:   rgba(147, 167, 57, .16);
    --sg-group-fg:   var(--sg-olive-300);
}

/* ------------------------------------------------------------ 2. TIPOGRAFIA */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: .005em;
}

h1, h2, h3, h4, h5, .card-title, .panel-title {
    letter-spacing: -.015em;
    font-weight: 700;
}

/* Micro-etiquetas en mayuscula: dan el tono atletico del logo */
.sidebar-menu-title .name,
.tdatagrid_head th,
.table thead th,
.card-metric-label {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
}

/* --------------------------------------------------------------- 3. SIDEBAR */
/* El menú tiene su propio interruptor de tema (data-menu-theme), independiente
   del data-bs-theme del resto de la app. Cada uno se define por separado para
   que ese interruptor siga funcionando. */
#sidebar {
    --sg-menu-fg:        #E6EADD;
    --sg-menu-fg-sub:    #CDD3C2;
    --sg-menu-fg-strong: #FFFFFF;
    --sg-menu-icon:      var(--sg-olive-400);
    --sg-menu-hover:     rgba(147, 167, 57, .16);
    --sg-menu-open:      rgba(255, 255, 255, .06);
    --sg-menu-rule:      rgba(255, 255, 255, .10);
    --sg-menu-title:     var(--sg-ink-400);
}

[data-menu-theme=dark] #sidebar {
    background: var(--sg-ink-900);
    border-right: 1px solid rgba(255, 255, 255, .06);
}

[data-menu-theme=light] #sidebar {
    --sg-menu-fg:        var(--sg-ink-700);
    --sg-menu-fg-sub:    var(--sg-ink-600);
    --sg-menu-fg-strong: var(--sg-olive-900);
    --sg-menu-icon:      var(--sg-olive-700);
    --sg-menu-hover:     var(--sg-olive-100);
    --sg-menu-open:      var(--sg-olive-50);
    --sg-menu-rule:      var(--sg-border);
    --sg-menu-title:     var(--sg-ink-500);

    background: #FFFFFF;
    border-right: 1px solid var(--sg-border);
}

/* Masthead claro: el logo original conserva su negro y su laurel.
   Su alto es exactamente el del navbar para que las dos bandas superiores
   queden alineadas (antes medía 79px contra 63px y se veía un escalón). */
.sidebar-system-name,
[data-menu-theme=dark] .sidebar-system-name,
[data-menu-theme=light] .sidebar-system-name {
    height: var(--sg-topbar-h);
    padding: 0 14px;
    font-size: 1rem;
    line-height: 1.2;
    background: #FFFFFF;
    color: var(--sg-ink-900);
    border-bottom: 3px solid var(--sg-olive-600) !important;
    display: flex;
    align-items: center;
    justify-content: center;   /* logo + titulo centrados, como en el tema original */
    gap: 10px;
    text-align: center;
    overflow: hidden;
}

/* La banda del logo sigue al interruptor del menú lateral (data-menu-theme),
   no al tema global: con el menú en oscuro toda la columna queda oscura y el
   logo pasa a la variante con los trazos negros en blanco. */
[data-menu-theme=dark] .sidebar-system-name {
    background: #1E211A;
    color: #EDEFE6;
}

[data-menu-theme=light] .sidebar-system-name {
    background: #FFFFFF;
    color: var(--sg-ink-900);
}

.main > .navbar {
    min-height: var(--sg-topbar-h);
}

/* El tamaño va también en el atributo width/height del <img> en layout.html:
   si esta hoja no llega a aplicarse (caché, deploy incompleto), el PNG de
   446x512 se dibujaba a tamaño natural y quedaba de marca de agua detrás del
   menú. */
.sidebar-system-name .sidebar-logo {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 0;
    line-height: 0;
    margin: 0 !important;
    overflow: hidden;
}

.sidebar-system-name .sidebar-logo img {
    width: 100% !important;
    height: 100% !important;
    max-width: 32px;
    max-height: 32px;
    object-fit: contain;
    margin: 0 !important;
}

#sidebar .sidebar-system-name .name {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--sg-ink-900);
}

[data-menu-theme=dark] #sidebar .sidebar-system-name .name {
    color: #EDEFE6;
}

/* El <img> claro es el que viene visible por defecto en el HTML: si esta hoja
   no llega a aplicarse, se ve el logo normal y nunca los dos a la vez. */
[data-menu-theme=dark] .sidebar-logo .sg-logo-on-light {
    display: none !important;
}

[data-menu-theme=dark] .sidebar-logo .sg-logo-on-dark {
    display: block !important;
}

/* El navbar acompaña al fondo oscuro del área de contenido */
[data-bs-theme=dark] .main > .navbar {
    background: #1B1E17;
}

.sidebar-menu-title {
    margin: 12px 14px 4px;
    padding: 0;
    text-align: left;
    position: relative;   /* ancla el switch de modo oscuro */
}

[data-menu-theme=dark] .sidebar-menu-title,
[data-menu-theme=light] .sidebar-menu-title {
    color: var(--sg-menu-title);
}

.sidebar-menu-title .name {
    font-size: .68rem;
}

/* Items del menu.
   Flex + align-items:center en lugar de la alineación por línea base del tema:
   con la línea base los iconos de Font Awesome quedaban colgando por debajo
   del texto. */
[data-menu-theme=dark] a.sidebar-link,
[data-menu-theme=light] a.sidebar-link {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--sg-menu-fg);
    font-weight: 500;
    border-radius: var(--sg-radius-sm);
    padding: 8px 34px 8px 12px;   /* espacio a la derecha para el chevron */
    margin: 1px 10px;
    transition: background-color .15s ease, color .15s ease;
}

#sidebar a.sidebar-link > i {
    flex: 0 0 20px;
    width: 20px;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
}

#sidebar a.sidebar-link > span {
    line-height: 1.25;
}

/* Los items de primer nivel pesan un poco más que los de submenú */
#sidebar > #menu-wrapper > .sidebar-nav > .sidebar-item > a.sidebar-link {
    font-weight: 600;
}

[data-menu-theme=dark] .sidebar-dropdown a.sidebar-link,
[data-menu-theme=light] .sidebar-dropdown a.sidebar-link {
    color: var(--sg-menu-fg-sub);
}

[data-menu-theme=dark] a.sidebar-link:hover,
[data-menu-theme=light] a.sidebar-link:hover,
[data-menu-theme=dark] .sidebar-dropdown a.sidebar-link:hover,
[data-menu-theme=light] .sidebar-dropdown a.sidebar-link:hover {
    background: var(--sg-menu-hover);
    color: var(--sg-menu-fg-strong);
}

a.sidebar-link.active,
a.sidebar-link.active:hover {
    background: linear-gradient(90deg, var(--sg-olive-700) 0%, var(--sg-olive-600) 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 10px rgba(97, 111, 37, .45);
}

[data-menu-theme=dark] a.sidebar-link[aria-expanded=true],
[data-menu-theme=light] a.sidebar-link[aria-expanded=true] {
    background: var(--sg-menu-open);
    color: var(--sg-menu-fg-strong);
}

/* Iconos del menu con el acento de marca */
#sidebar a.sidebar-link i,
#sidebar a.sidebar-link .fa,
#sidebar a.sidebar-link .fas,
#sidebar a.sidebar-link .far {
    color: var(--sg-menu-icon);
    transition: color .15s ease;
}

#sidebar a.sidebar-link.active i,
#sidebar a.sidebar-link:hover i,
#sidebar a.sidebar-link.active .fa,
#sidebar a.sidebar-link:hover .fa {
    color: var(--sg-menu-fg-strong);
}

#sidebar a.sidebar-link.active i,
#sidebar a.sidebar-link.active .fa {
    color: #FFFFFF;
}

/* Submenus con guia vertical */
.sidebar-dropdown {
    margin-left: 22px;
    padding-left: 8px;
    border-left: 1px solid var(--sg-menu-rule);
}

.sidebar-user-wrapper {
    background: var(--sg-menu-open);
    border: 1px solid var(--sg-menu-rule);
    border-radius: var(--sg-radius);
}

/* Caja de busqueda del menu */
#search-box input {
    background: var(--sg-menu-open);
    border: 1px solid var(--sg-menu-rule);
    color: var(--sg-menu-fg);
    border-radius: var(--sg-radius-sm);
}

#search-box input::placeholder { color: var(--sg-ink-400); }

#search-box input:focus {
    border-color: var(--sg-olive-500);
    box-shadow: 0 0 0 .2rem rgba(147, 167, 57, .25);
}

/* -------------------------------------------------------- 4. NAVBAR SUPERIOR */
[data-bs-theme=light] .navbar {
    background: #FFFFFF;
    box-shadow: var(--sg-shadow-xs);
}

.navbar .username {
    font-weight: 600;
    color: var(--bs-body-color);
}

#sidebar-toggle {
    border-radius: var(--sg-radius-sm);
}

/* ------------------------------------------------------------- 5. SUPERFICIE */
[data-bs-theme=light] .main {
    background: var(--sg-surface);
}

[data-bs-theme=dark] .main {
    background: #14160F;
}

/* -------------------------------------------------------------- 6. TARJETAS */
.card,
.panel {
    border-radius: var(--sg-radius-lg);
    border: 1px solid var(--sg-hairline);
}

.container-fluid .card {
    box-shadow: var(--sg-shadow-sm);
    transition: box-shadow .2s ease;
}

.container-fluid .card:hover {
    box-shadow: var(--sg-shadow);
}

.card-header,
.panel-heading {
    border-radius: var(--sg-radius-lg) var(--sg-radius-lg) 0 0 !important;
    border-bottom: 1px solid var(--sg-hairline);
    font-weight: 700;
    color: var(--bs-emphasis-color);
    gap: 8px;
}

[data-bs-theme=light] .card > .card-header,
[data-bs-theme=light] .panel > .panel-heading {
    background: linear-gradient(180deg, #FFFFFF 0%, var(--sg-ink-50) 100%);
}

[data-bs-theme=dark] .card > .card-header,
[data-bs-theme=dark] .panel > .panel-heading {
    background: rgba(255, 255, 255, .035);
}

/* Filete oliva que identifica el encabezado de cada panel */
.card > .card-header::before,
.panel > .panel-heading::before {
    content: "";
    width: 4px;
    height: 20px;
    border-radius: 4px;
    background: var(--sg-accent);
    flex: 0 0 4px;
}

.card-footer,
.panel-footer {
    border-radius: 0 0 var(--sg-radius-lg) var(--sg-radius-lg) !important;
    border-top: 1px solid var(--sg-hairline);
}

/* --------------------------------------------------------------- 7. BOTONES */
.btn {
    border-radius: var(--sg-radius-sm);
    font-weight: 600;
    transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease;
}

.btn:active { transform: translateY(1px); }

.btn:focus-visible {
    box-shadow: 0 0 0 .22rem rgba(147, 167, 57, .35);
}

.btn-primary {
    --bs-btn-bg:                    var(--sg-olive-700);
    --bs-btn-border-color:          var(--sg-olive-700);
    --bs-btn-hover-bg:              var(--sg-olive-800);
    --bs-btn-hover-border-color:    var(--sg-olive-800);
    --bs-btn-active-bg:             var(--sg-olive-900);
    --bs-btn-active-border-color:   var(--sg-olive-900);
    --bs-btn-disabled-bg:           var(--sg-olive-700);
    --bs-btn-disabled-border-color: var(--sg-olive-700);
    --bs-btn-focus-shadow-rgb:      147, 167, 57;
    box-shadow: 0 1px 2px rgba(52, 59, 17, .28);
}

.btn-outline-primary {
    --bs-btn-color:               var(--sg-olive-700);
    --bs-btn-border-color:        var(--sg-olive-600);
    --bs-btn-hover-bg:            var(--sg-olive-700);
    --bs-btn-hover-border-color:  var(--sg-olive-700);
    --bs-btn-active-bg:           var(--sg-olive-800);
    --bs-btn-active-border-color: var(--sg-olive-800);
}

.btn-success {
    --bs-btn-bg: #3F7D46;
    --bs-btn-border-color: #3F7D46;
    --bs-btn-hover-bg: #336637;
    --bs-btn-hover-border-color: #336637;
    --bs-btn-active-bg: #2A542D;
    --bs-btn-active-border-color: #2A542D;
}

[data-bs-theme=light] .btn-default {
    background-color: #FFFFFF;
    border-color: var(--sg-border);
    color: var(--sg-ink-700);
}

[data-bs-theme=light] .btn-default:hover,
[data-bs-theme=light] .btn-default.hover,
[data-bs-theme=light] .btn-default:active {
    background-color: var(--sg-olive-50);
    border-color: var(--sg-olive-300);
    color: var(--sg-olive-800);
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--sg-olive-700);
}

/* Botones de accion dentro de las grillas: mas compactos */
.tdatagrid_cell.action .btn,
.tdatagrid_action .btn {
    padding: .2rem .5rem;
}

/* ---------------------------------------------------------- 8. FORMULARIOS */
.form-control,
.form-select,
.tfield,
.select2-container--bootstrap-5 .select2-selection {
    border-radius: var(--sg-radius-sm);
    border-color: var(--sg-hairline);
}

.form-control:focus,
.form-select:focus,
.tfield:focus,
.select2-container--bootstrap-5.select2-container--focus .select2-selection {
    border-color: var(--sg-olive-500);
    box-shadow: 0 0 0 .2rem rgba(147, 167, 57, .22);
}

.control-label label,
.tformrow > td > label {
    font-weight: 600;
    color: var(--bs-body-color);
}

.form-check-input:checked {
    background-color: var(--sg-olive-700);
    border-color: var(--sg-olive-700);
}

.form-check-input:focus {
    border-color: var(--sg-olive-500);
    box-shadow: 0 0 0 .2rem rgba(147, 167, 57, .25);
}

/* Seleccion de texto con el color de marca */
::selection {
    background: var(--sg-olive-200);
    color: var(--sg-ink-900);
}

/* ------------------------------------------------------------- 9. GRILLAS */
[data-bs-theme=light] .table {
    --bs-table-striped-bg:    rgba(120, 136, 48, .035);
    --bs-table-striped-color: var(--sg-ink-800);
    --bs-table-hover-bg:      rgba(120, 136, 48, .09);
    --bs-table-hover-color:   var(--sg-ink-900);
    --bs-table-border-color:  var(--sg-border);
}

.table thead th,
.tdatagrid_head th {
    background: var(--sg-thead-bg);
    color: var(--bs-secondary-color);
    font-size: var(--ad-font-size-less);
    border-bottom: 2px solid var(--sg-thead-rule) !important;
    white-space: nowrap;
    padding-top: .6rem;
    padding-bottom: .6rem;
}

/* El datagrid de Adianti trae `thead.tdatagrid_head{background:#e8e8e8}` fijo
   en components.min.css (rompe el modo oscuro) y estiliza las celdas con
   selectores de especificidad (0,3,4). Hay que igualar esa especificidad. */
table.tdatagrid_table > thead.tdatagrid_head {
    background-color: transparent;
}

table.tdatagrid_table > thead.tdatagrid_head > tr > th.tdatagrid_col,
table.tdatagrid_table > thead.tdatagrid_head > tr > th.tdatagrid_action,
table.tdatagrid_table > thead.tdatagrid_head > tr > td.tdatagrid_col {
    background-color: var(--sg-thead-bg);
    color: var(--bs-secondary-color);
    font-size: var(--ad-font-size-less);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 2px solid var(--sg-thead-rule);
}

table.tdatagrid_table > thead.tdatagrid_head > tr > th.tdatagrid_col[generator=adianti]:hover {
    background-color: var(--sg-group-bg);
    color: var(--sg-accent);
    border-left: 0;
    border-right: 0;
    padding-right: 2px;
}

.table > tbody > tr > td {
    vertical-align: middle;
}

/* Esquinas redondeadas reales en la grilla dentro de una card */
.card > .table:first-child > thead > tr:first-child > th:first-child,
.card-body > .table > thead > tr:first-child > th:first-child { border-top-left-radius: var(--sg-radius); }
.card > .table:first-child > thead > tr:first-child > th:last-child,
.card-body > .table > thead > tr:first-child > th:last-child  { border-top-right-radius: var(--sg-radius); }

.tdatagrid_group {
    background: var(--sg-group-bg) !important;
    color: var(--sg-group-fg) !important;
    font-weight: 700;
}

.tdatagrid_footer,
.tdatagrid_footer td {
    background: var(--sg-thead-bg);
    font-weight: 700;
    color: var(--bs-emphasis-color);
}

/* --------------------------------------------------- 10. ETIQUETAS / BADGES */
.badge.bg-primary,
.label-primary { background-color: var(--sg-olive-700) !important; }

.label-success   { background-color: #3F7D46 !important; }
.label-secondary { background-color: var(--sg-ink-500) !important; }
.label-warning   { background-color: #C98A15 !important; color: #fff !important; }
.label-dark, .bg-black { background-color: var(--sg-ink-900) !important; }
.bg-olive, .bg-green   { background-color: var(--sg-olive-600) !important; }
.bg-light-blue         { background-color: var(--sg-olive-600) !important; }

/* ------------------------------------------------------ 11. TABS / PESTANAS */
.nav-tabs .nav-link.active,
.nav-underline .nav-link.active {
    color: var(--sg-accent);
    border-color: var(--sg-accent);
    font-weight: 700;
}

#adianti_tab_area .nav-link.active {
    color: var(--sg-accent);
}

/* --------------------------------------------------------- 12. PIE DE PAGINA */
footer {
    color: var(--bs-secondary-color);
    border-top: 1px solid var(--sg-hairline);
}

[data-bs-theme=light] footer {
    background: #FFFFFF;
}

[data-bs-theme=dark] footer {
    background: var(--sg-ink-900);
}

/* ------------------------------------------------------- 13. VARIOS / DETALLE */
.progress-bar { background-color: var(--sg-accent); }

.dropdown-menu {
    border-radius: var(--sg-radius);
    border-color: var(--sg-hairline);
    box-shadow: var(--sg-shadow);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--sg-olive-700);
}

.modal-content,
.twindow {
    border-radius: var(--sg-radius-lg);
    box-shadow: var(--sg-shadow-lg);
}

.tooltip-inner,
.tippy-box {
    background: var(--sg-ink-900);
    border-radius: var(--sg-radius-sm);
}

/* Barra de desplazamiento con el acento de marca */
* {
    scrollbar-color: var(--sg-ink-300) transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--sg-ink-300);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sg-olive-500);
}

#sidebar { scrollbar-color: var(--sg-ink-600) transparent; }
#sidebar::-webkit-scrollbar-thumb { background: var(--sg-ink-600); }

/* -------------------------------------------------------------- 14. LOGIN */
body.sg-login .main {
    background:
        radial-gradient(1100px 620px at 50% -10%, rgba(147, 167, 57, .22) 0%, rgba(147, 167, 57, 0) 62%),
        linear-gradient(160deg, #1D2019 0%, var(--sg-ink-900) 45%, #0C0E0A 100%) !important;
    position: relative;
}

/* Textura diagonal sutil */
body.sg-login .main::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        135deg,
        rgba(255, 255, 255, .022) 0px,
        rgba(255, 255, 255, .022) 1px,
        transparent 1px,
        transparent 11px
    );
    pointer-events: none;
}

body.sg-login .modal-content {
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: 22px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
    overflow: hidden;
}

/* Cinta oliva superior de la tarjeta */
body.sg-login .modal-content::before {
    content: "";
    display: block;
    height: 5px;
    background: linear-gradient(90deg, var(--sg-olive-800) 0%, var(--sg-olive-500) 50%, var(--sg-olive-800) 100%);
}

body.sg-login .modal-header {
    padding: 2.25rem 2.5rem 1rem !important;
    justify-content: center;
}

body.sg-login .modal-header img {
    max-width: 172px !important;
    filter: drop-shadow(0 6px 14px rgba(23, 25, 21, .22));
}

body.sg-login .modal-body {
    padding: 0 2.5rem 2.25rem !important;
}

/* Solo sobre el formulario de login, no sobre 2FA / recuperar contraseña */
body.sg-login .modal-content:has(#form_login) .modal-body::before {
    content: "Acceso al sistema";
    display: block;
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--sg-olive-700);
    margin-bottom: 1.5rem;
}

body.sg-login .form-control {
    border-radius: 10px;
    border-color: var(--sg-ink-200);
    background: var(--sg-ink-50);
}

body.sg-login .form-control:focus {
    background: #FFFFFF;
}

body.sg-login .btn-primary {
    border-radius: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(97, 111, 37, .38);
}

/* Firma inferior */
body.sg-login .sg-login-footer,
[data-bs-theme=light] body.sg-login .sg-login-footer {
    background: transparent;
    border: 0;
    text-align: center;
    padding: 0 1rem 1.75rem;
    position: relative;
    z-index: 1;
}

body.sg-login .sg-login-brand {
    display: block;
    font-weight: 800;
    letter-spacing: .28em;
    font-size: .78rem;
    color: var(--sg-olive-400);
}

body.sg-login .sg-login-tag {
    display: block;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sg-ink-500);
    margin-top: 2px;
}

/* ------------------------------------------------------------ 15. MOVILES */
@media (max-width: 767.98px) {
    .card, .panel { border-radius: var(--sg-radius); }
    .card-header, .panel-heading { border-radius: var(--sg-radius) var(--sg-radius) 0 0 !important; }
    body.sg-login .modal-header { padding: 1.75rem 1.5rem .75rem !important; }
    body.sg-login .modal-body   { padding: 0 1.5rem 1.75rem !important; }
}