:root {
    /* Superficies */
    --g-bg: #f4f5f7;
    --g-surface: #ffffff;
    --g-surface-2: #f8f9fb;
    --g-hover: #f1f3f6;
    --g-border: #e4e7ec;
    --g-border-strong: #d0d5dd;

    /* Texto (contraste AA sobre --g-surface y --g-bg) */
    --g-text: #101828;
    --g-text-2: #475467;
    --g-text-3: #667085;

    /* Marca (azul Galgo) */
    --g-brand: #102a5c;
    --g-brand-hover: #0a1d42;
    --g-brand-tint: #eaeff8;
    --g-brand-border: #c5d0e6;
    --g-navy: #101828;
    --g-navy-2: #1d2939;

    /* Estados */
    --g-success: #067647; --g-success-tint: #ecfdf3; --g-success-border: #abefc6;
    --g-warning: #b54708; --g-warning-tint: #fffaeb; --g-warning-border: #fedf89;
    --g-danger: #b42318;  --g-danger-tint: #fef3f2;  --g-danger-border: #fecdca;
    --g-info: #175cd3;    --g-info-tint: #eff8ff;    --g-info-border: #b2ddff;
    --g-violet: #6941c6;  --g-violet-tint: #f4f3ff;  --g-violet-border: #d9d6fe;

    /* Forma */
    --g-radius-sm: 8px;
    --g-radius: 12px;
    --g-radius-lg: 16px;
    --g-radius-xl: 20px;
    --g-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
    --g-shadow-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
    --g-shadow-md: 0 12px 24px -8px rgba(16, 24, 40, .16), 0 4px 8px -4px rgba(16, 24, 40, .06);
    --g-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, .28);
    --g-ring: 0 0 0 4px rgba(16, 42, 92, .16);

    /* Movimiento */
    --g-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --g-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --g-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --g-fast: 150ms;
    --g-base: 220ms;
    --g-slow: 300ms;

    /* Layout */
    --g-capsula: 60px;
    --g-topbar: 72px;                 /* cápsula + separación superior (lo usan los elementos fijos) */
    --g-gutter: clamp(12px, 2vw, 28px);

    --g-font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    --g-mono: "Cascadia Mono", "Consolas", ui-monospace, "SF Mono", Menlo, monospace;
}

/* =====================================================================
   Base
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; min-height: 100dvh; background: var(--g-bg); color: var(--g-text);
    font-family: var(--g-font); font-size: 15px; line-height: 1.5;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 { color: var(--g-text); letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--g-brand); outline-offset: 2px; }
::selection { background: var(--g-brand-tint); color: var(--g-brand-hover); }
.g-saltar { position: absolute; left: 12px; top: -48px; z-index: 2000; padding: 8px 14px; border-radius: var(--g-radius-sm);
    background: var(--g-navy); color: #fff; text-decoration: none; font-weight: 600; transition: transform var(--g-fast) var(--g-ease-out); }
.g-saltar:focus { transform: translateY(60px); }

/* Bootstrap: alinear con la marca */
.btn-close:focus { box-shadow: var(--g-ring); }
.form-control:focus, .form-select:focus { border-color: var(--g-brand); box-shadow: var(--g-ring); }
.form-control, .form-select { border-radius: 10px; border-color: var(--g-border-strong); min-height: 42px; }
.text-primary { color: var(--g-brand) !important; }

/* =====================================================================
   App shell: barra superior + contenido a todo lo ancho
   ===================================================================== */
.g-app { min-height: 100dvh; display: flex; flex-direction: column; }

/* Barra flotante en cápsula (azul Galgo), fija arriba y a todo lo ancho */
.g-topbar {
    position: sticky; top: 0; z-index: 1030; flex: 0 0 auto;
    padding: 12px var(--g-gutter) 0; pointer-events: none;          /* el hueco alrededor no bloquea clics */
}
/* Velo arriba de la cápsula: al hacer scroll el contenido no se asoma por encima */
.g-topbar::before { content: ''; position: absolute; inset: 0 0 calc(var(--g-capsula) / 2) 0; z-index: -1;
    background: linear-gradient(var(--g-bg) 55%, rgba(244, 245, 247, 0)); }
.g-capsula {
    pointer-events: auto; height: var(--g-capsula); display: flex; align-items: center; gap: 14px;
    padding: 0 8px 0 8px; border-radius: 999px; color: #fff;
    background: rgba(16, 42, 92, .96); border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 36px -18px rgba(16, 42, 92, .65), 0 4px 10px -4px rgba(16, 24, 40, .18);
    -webkit-backdrop-filter: saturate(160%) blur(12px); backdrop-filter: saturate(160%) blur(12px);
    animation: g-capsula-entra 420ms var(--g-ease-out) both;
}
@keyframes g-capsula-entra { from { opacity: 0; transform: translateY(-8px) scale(.985); } }

.g-marca { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; flex-shrink: 0; }
.g-marca-logo { height: 44px; padding: 0 16px; border-radius: 999px;  display: grid; place-items: center;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .2); transition: transform var(--g-fast) var(--g-ease-out); }
.g-marca:active .g-marca-logo { transform: scale(.96); }
.g-marca img { height: 22px; width: auto; display: block; }
.g-marca-txt { font-weight: 600; font-size: .9rem; color: rgba(255, 255, 255, .78); white-space: nowrap; }

.g-nav { position: relative; display: flex; gap: 2px; isolation: isolate; margin-left: 4px; }
.g-nav a {
    position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 999px;
    font-size: .875rem; font-weight: 600; color: rgba(255, 255, 255, .72); text-decoration: none;
    transition: color var(--g-base) var(--g-ease-out);
}
.g-nav a i { font-size: 1rem; }
.g-nav a.activo { color: #fff; }
/* Cápsula translúcida que se desliza a la sección activa (la mueve el JS de base.html) */
.g-nav-pulgar { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; width: 0; border-radius: 999px;
    background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.g-nav.listo .g-nav-pulgar { transition: transform var(--g-slow) var(--g-ease-out), width var(--g-slow) var(--g-ease-out); }

/* Cápsula blanca del usuario (abre el menú) */
.g-topbar-derecha { margin-left: auto; display: flex; align-items: center; min-width: 0; }
.g-usuario {
    display: flex; align-items: center; gap: 10px; min-width: 0; height: 44px; padding: 0 14px 0 5px; border: 0; border-radius: 999px;
    background: #fff; color: var(--g-text); cursor: pointer; font: inherit;
    transition: transform var(--g-fast) var(--g-ease-out), box-shadow var(--g-fast) var(--g-ease-out);
}
.g-usuario:active { transform: scale(.97); }
.g-usuario:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.g-avatar {
    width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; display: grid; place-items: center;
    font-size: .74rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--g-brand);
}
.g-usuario-txt { min-width: 0; line-height: 1.15; text-align: left; }
.g-usuario-txt strong { display: block; font-size: .85rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.g-usuario-txt small { color: var(--g-text-3); font-size: .72rem; }
.g-usuario .bi-chevron-down { font-size: .75rem; color: var(--g-text-3); transition: transform var(--g-base) var(--g-ease-out); }
.g-usuario[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }

/* Menú del usuario: crece desde la cápsula (esquina superior derecha) */
.g-menu { min-width: 240px; padding: 6px; margin-top: 8px !important; border: 1px solid var(--g-border); border-radius: 16px;
    box-shadow: var(--g-shadow-lg); transform-origin: top right; }
.g-menu.show { animation: g-menu-entra 180ms var(--g-ease-out); }
@keyframes g-menu-entra { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
.g-menu-cab { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--g-border); margin-bottom: 6px; }
.g-menu-cab strong { display: block; font-size: .88rem; }
.g-menu-cab small { color: var(--g-text-3); font-size: .76rem; }
.g-menu .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 9px 10px; font-size: .88rem; font-weight: 550; color: var(--g-text);
    transition: background-color var(--g-fast) var(--g-ease-out); }
.g-menu .dropdown-item:active { background: var(--g-hover); color: var(--g-text); }
.g-menu .dropdown-item.g-peligro { color: var(--g-danger); }

.g-contenido { flex: 1; min-width: 0; padding: 20px var(--g-gutter) var(--g-gutter); }

/* =====================================================================
   Botones
   ===================================================================== */
.g-btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
    font: inherit; font-size: .875rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none;
    transition: transform var(--g-fast) var(--g-ease-out), background-color var(--g-fast) var(--g-ease-out),
                border-color var(--g-fast) var(--g-ease-out), color var(--g-fast) var(--g-ease-out), box-shadow var(--g-fast) var(--g-ease-out);
}
.g-btn:active:not(:disabled) { transform: scale(.97); }
.g-btn:disabled { opacity: .55; cursor: not-allowed; }
.g-btn-primario { background: var(--g-brand); color: #fff; box-shadow: 0 1px 2px rgba(16, 42, 92, .3), inset 0 1px 0 rgba(255, 255, 255, .14); }
.g-btn-secundario { background: var(--g-surface); color: var(--g-text); border-color: var(--g-border-strong); box-shadow: var(--g-shadow-xs); }
.g-btn-fantasma { background: transparent; color: var(--g-text-2); }
.g-btn-icono { width: 40px; padding: 0; }
.g-btn-sm { min-height: 34px; padding: 0 12px; font-size: .82rem; border-radius: 9px; }

@media (hover: hover) and (pointer: fine) {
    .g-btn-primario:hover:not(:disabled) { background: var(--g-brand-hover); }
    .g-btn-secundario:hover:not(:disabled) { background: var(--g-surface-2); border-color: var(--g-text-3); }
    .g-btn-fantasma:hover:not(:disabled) { background: var(--g-hover); color: var(--g-text); }
    .g-nav a:not(.activo):hover { color: #fff; }
    .g-usuario:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, .18); }
    .g-menu .dropdown-item:hover { background: var(--g-hover); }
    .g-menu .dropdown-item.g-peligro:hover { background: var(--g-danger-tint); }
}

/* =====================================================================
   SweetAlert2 con la marca (alertas, confirmaciones y formularios)
   ===================================================================== */
.swal2-popup { font-family: var(--g-font) !important; border-radius: var(--g-radius-xl) !important; padding: 1.5rem 1.25rem 1.25rem !important; }
.swal2-popup.swal2-toast { border-radius: var(--g-radius) !important; padding: .75rem 1rem !important; box-shadow: var(--g-shadow-md) !important; }
.swal2-title { font-size: 1.2rem !important; font-weight: 700 !important; color: var(--g-text) !important; }
.swal2-html-container { color: var(--g-text-2) !important; font-size: .92rem !important; }
.swal2-actions { gap: 8px; }
.swal2-styled { border-radius: 10px !important; font-weight: 600 !important; font-size: .9rem !important; padding: .65em 1.2em !important; margin: 0 !important;
    transition: transform var(--g-fast) var(--g-ease-out), filter var(--g-fast) var(--g-ease-out) !important; }
.swal2-styled:active { transform: scale(.97); }
.swal2-styled.swal2-confirm { background-color: var(--g-brand); }
.swal2-styled.swal2-cancel { background: var(--g-surface) !important; color: var(--g-text) !important; border: 1px solid var(--g-border-strong) !important; }
.swal2-styled:focus { box-shadow: var(--g-ring) !important; }
.swal2-overflow-visible { overflow: visible !important; }
/* Entrada / salida (más rápida la salida) */
.swal2-show { animation: g-swal-entra 240ms var(--g-ease-out) !important; }
.swal2-hide { animation: g-swal-sale 140ms var(--g-ease-in-out) forwards !important; }
@keyframes g-swal-entra { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes g-swal-sale { to { opacity: 0; transform: scale(.97); } }
/* Fondo oscuro SOLO para alertas modales; los avisos (toast) no oscurecen la pantalla */
.swal2-container.swal2-backdrop-show:not(.swal2-top-end):not(.swal2-top-start):not(.swal2-top):not(.swal2-bottom-end):not(.swal2-bottom-start):not(.swal2-bottom) {
    background: rgba(16, 24, 40, .45) !important;
}
body.swal2-toast-shown .swal2-container { background: transparent !important; }

/* =====================================================================
   Utilidades de movimiento
   ===================================================================== */
@keyframes g-entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes g-aparece { from { opacity: 0; } }
.g-entra { animation: g-entra var(--g-slow) var(--g-ease-out) both; animation-delay: calc(min(var(--i, 0), 14) * 28ms); }

@media (max-width: 1099.98px) { .g-marca-txt { display: none; } }
@media (max-width: 767.98px) {
    :root { --g-capsula: 56px; --g-topbar: 64px; }
    .g-topbar { padding-top: 8px; }
    .g-capsula { gap: 6px; padding: 0 6px; }
    .g-marca-txt, .g-usuario-txt { display: none; }
    .g-marca-logo { height: 42px; padding: 0 12px; }
    .g-marca img { height: 18px; }
    .g-nav { margin-left: 0; }
    .g-nav a { padding: 0 13px; height: 40px; }
    .g-nav a span { display: none; }
    .g-usuario { padding: 0 8px 0 4px; gap: 6px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
}
/* =====================================================================
   Marca de agua: logo grande y tenue detrás del contenido (lo pone base.html)
   ===================================================================== */
.g-marca-agua {
    position: fixed; inset: var(--g-topbar) 0 0 0; z-index: -1; pointer-events: none;   /* detrás de todo, sin crear capas */
    background: url('../img/galgo_logo.png') center 55% / min(78vw, 1100px) auto no-repeat;
    opacity: .06; filter: grayscale(.2);
}
@media (max-width: 767.98px) { .g-marca-agua { background-size: 92vw auto; opacity: .05; } }
@media print { .g-marca-agua { display: none; } }