/* ==========================================================================
   fluent.css — Capa visual Fluent Design (Microsoft) para el CMS
   --------------------------------------------------------------------------
   CAPA COMPARTIDA, SOLO PRESENTACION. No cambia ids, clases ni JS: gana por
   cascada porque se enlaza DESPUES de Bootstrap y de los CSS propios
   (style.css, transparencia-fracciones.css, webcard-transparency-editor.css)
   y porque sus selectores son igual o mas especificos que los de origen.
   Donde un CSS propio ya usa `!important`, aqui tambien hace falta para
   ganarle; cada uno de esos casos lleva comentario (ver seccion 7).
   Sin emojis: solo iconos FontAwesome (los iconos los pone el HTML/JS).

   Diseno: Fluent 2 — acrilico suave, radios 4/8/12, sombras en 2 niveles,
   acento #0f6cbd, tipografia del sistema, motion corto (120-200 ms) y
   respeto a prefers-reduced-motion. Version: 2026-11-06 (Pre-alfa).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables — paleta Fluent 2 + tokens del CMS
   -------------------------------------------------------------------------- */
:root {
    /* Acento Fluent (azul Microsoft) y sus estados */
    --fluent-accent: #0f6cbd;
    --fluent-accent-hover: #115ea3;
    --fluent-accent-pressed: #0f548c;
    --fluent-accent-soft: rgba(15, 108, 189, 0.12);
    --fluent-accent-soft-hover: rgba(15, 108, 189, 0.18);
    --fluent-accent-text: #0f6cbd;

    /* Acento institucional del CMS (se conserva para fracciones/romano) */
    --cms-blue: #0056b3;
    --cms-gold: #b8860b;

    /* Neutros Fluent (texto y superficies) */
    --fluent-text: #201f1e;
    --fluent-text-secondary: #605e5c;
    --fluent-text-tertiary: #8a8886;
    --fluent-text-on-dark: #f3f2f1;
    --fluent-text-on-dark-secondary: #c8c6c4;

    /* Superficies: el acrilico es un color semitransparente + blur */
    --fluent-bg: #f3f2f1;
    --fluent-bg-gradient: linear-gradient(180deg, #faf9f8 0%, #f3f2f1 55%, #edebe9 100%);
    --fluent-surface: rgba(255, 255, 255, 0.72);
    --fluent-surface-solid: #ffffff; /* fallback sin backdrop-filter */
    --fluent-surface-strong: rgba(255, 255, 255, 0.88);
    --fluent-surface-subtle: rgba(249, 248, 247, 0.65);
    --fluent-surface-dark: rgba(32, 31, 30, 0.78);
    --fluent-surface-dark-solid: #201f1e;
    --fluent-surface-dark-strong: rgba(43, 42, 41, 0.85);

    /* Bordes semitransparentes (1px) */
    --fluent-border: rgba(0, 0, 0, 0.09);
    --fluent-border-strong: rgba(0, 0, 0, 0.14);
    --fluent-border-on-dark: rgba(255, 255, 255, 0.14);
    --fluent-border-on-dark-strong: rgba(255, 255, 255, 0.22);

    /* Radios Fluent */
    --fluent-radius-sm: 4px;   /* botones pequenos, pills internas, thumbs */
    --fluent-radius-md: 8px;   /* controles, inputs, tarjetas pequenas */
    --fluent-radius-lg: 12px;  /* tarjetas, paneles, modales */
    --fluent-radius-pill: 999px;

    /* Sombras suaves — 2 niveles: reposo y hover/elevacion */
    --fluent-shadow-rest: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 2px rgba(0, 0, 0, 0.06);
    --fluent-shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
    --fluent-shadow-flyout: 0 12px 28px rgba(0, 0, 0, 0.18), 0 4px 10px rgba(0, 0, 0, 0.10);
    --fluent-shadow-dark: 0 8px 20px rgba(0, 0, 0, 0.35);

    /* Estados semanticos */
    --fluent-success: #107c10;
    --fluent-success-soft: rgba(16, 124, 16, 0.12);
    --fluent-warning: #ca5010;
    --fluent-warning-soft: rgba(202, 80, 16, 0.12);
    --fluent-danger: #c50f1f;
    --fluent-danger-hover: #a4262c;
    --fluent-danger-soft: rgba(197, 15, 31, 0.10);
    --fluent-info: #0f6cbd;
    --fluent-info-soft: rgba(15, 108, 189, 0.10);

    /* Motion Fluent: corto, con la curva de salida estandar */
    --fluent-ease: cubic-bezier(0.1, 0.9, 0.2, 1);
    --fluent-duration: 160ms;
    --fluent-duration-fast: 120ms;
    --fluent-duration-slow: 200ms;

    /* Acrilico: blur + saturacion (el color lo pone cada superficie) */
    --fluent-acrylic: blur(20px) saturate(1.4);
    --fluent-acrylic-strong: blur(28px) saturate(1.5);
}

/* --------------------------------------------------------------------------
   2. Base — tipografia del sistema y fondo con gradiente sutil
   -------------------------------------------------------------------------- */
body {
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, -apple-system,
        "Helvetica Neue", Arial, sans-serif;
    background: var(--fluent-bg-gradient);
    background-attachment: fixed;
    color: var(--fluent-text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    color: var(--fluent-text);
    letter-spacing: -0.01em;
}

a { color: var(--fluent-accent); }
a:hover { color: var(--fluent-accent-hover); }

::selection {
    background: var(--fluent-accent-soft);
    color: var(--fluent-text);
}

/* Focus visible coherente en toda la capa (anillo de acento Fluent) */
:focus-visible {
    outline: 2px solid var(--fluent-accent);
    outline-offset: 2px;
    border-radius: var(--fluent-radius-sm);
}

/* --------------------------------------------------------------------------
   3. Acrilico — tarjetas, paneles y superficies
      Fallback: sin backdrop-filter, la superficie solida opaca cubre.
   -------------------------------------------------------------------------- */
.card,
.modal-content,
.dropdown-menu,
.popover,
.offcanvas,
.list-group-item,
.alert,
.toast,
.fraccion-card,
.fraccion-cardX,
.fraccion-cardXX,
.card-mes-item,
.panelsint,
.wb-trim-file-card,
.wb-browser-box,
.element-card,
.widget-card,
.builder-sidebar,
#softaculous-drawer,
#wb-modal-overlay .wb-modal-box {
    background-color: var(--fluent-surface);
    border: 1px solid var(--fluent-border);
    border-radius: var(--fluent-radius-lg);
    box-shadow: var(--fluent-shadow-rest);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .card,
    .modal-content,
    .dropdown-menu,
    .popover,
    .offcanvas,
    .list-group-item,
    .alert,
    .toast,
    .fraccion-card,
    .fraccion-cardX,
    .fraccion-cardXX,
    .card-mes-item,
    .panelsint,
    .wb-trim-file-card,
    .wb-browser-box,
    .element-card,
    .widget-card,
    .builder-sidebar,
    #softaculous-drawer,
    #wb-modal-overlay .wb-modal-box {
        -webkit-backdrop-filter: var(--fluent-acrylic);
        backdrop-filter: var(--fluent-acrylic);
    }
}

/* Tarjetas: radio grande, elevacion suave al hover */
.card {
    overflow: hidden;
    transition: box-shadow var(--fluent-duration) var(--fluent-ease),
        border-color var(--fluent-duration) var(--fluent-ease),
        transform var(--fluent-duration) var(--fluent-ease);
}
.card:hover { box-shadow: var(--fluent-shadow-hover); }

.card-header {
    background-color: var(--fluent-surface-subtle);
    border-bottom: 1px solid var(--fluent-border);
    border-radius: var(--fluent-radius-lg) var(--fluent-radius-lg) 0 0;
}
.card-footer {
    background-color: var(--fluent-surface-subtle);
    border-top: 1px solid var(--fluent-border);
}

/* Las tarjetas de estadisticas del admin usan bg-* de Bootstrap: se
   conserva su color pero con radio y sombra Fluent */
.card.bg-primary, .card.bg-success, .card.bg-warning, .card.bg-danger,
.card.bg-info, .card.bg-dark, .card.bg-secondary {
    border-color: transparent;
    border-radius: var(--fluent-radius-lg);
    box-shadow: var(--fluent-shadow-rest);
}

/* --------------------------------------------------------------------------
   4. Botones estilo Fluent — primario / secundario / peligro / ghost
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--fluent-radius-md);
    font-weight: 600;
    transition: background-color var(--fluent-duration-fast) var(--fluent-ease),
        border-color var(--fluent-duration-fast) var(--fluent-ease),
        color var(--fluent-duration-fast) var(--fluent-ease),
        box-shadow var(--fluent-duration-fast) var(--fluent-ease),
        transform var(--fluent-duration-fast) var(--fluent-ease);
}
.btn:active { transform: translateY(1px) scale(0.99); } /* pressed */
.btn:disabled, .btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Primario: acento Fluent (gana a Bootstrap por especificidad .btn.btn-*) */
.btn.btn-primary, .btn.btn-info {
    background-color: var(--fluent-accent);
    border-color: var(--fluent-accent);
    color: #fff;
    box-shadow: var(--fluent-shadow-rest);
}
.btn.btn-primary:hover, .btn.btn-info:hover {
    background-color: var(--fluent-accent-hover);
    border-color: var(--fluent-accent-hover);
    box-shadow: var(--fluent-shadow-hover);
}
.btn.btn-primary:active, .btn.btn-info:active {
    background-color: var(--fluent-accent-pressed);
    border-color: var(--fluent-accent-pressed);
}

/* Secundario / claro: superficie acrilica con borde */
.btn.btn-secondary, .btn.btn-light, .btn.btn-outline-secondary {
    background-color: var(--fluent-surface-strong);
    border-color: var(--fluent-border-strong);
    color: var(--fluent-text);
}
.btn.btn-secondary:hover, .btn.btn-light:hover, .btn.btn-outline-secondary:hover {
    background-color: #fff;
    border-color: var(--fluent-border-strong);
    color: var(--fluent-text);
    box-shadow: var(--fluent-shadow-hover);
}

/* Outline primario: acento suave */
.btn.btn-outline-primary, .btn.btn-outline-info {
    color: var(--fluent-accent);
    border-color: var(--fluent-accent);
    background-color: transparent;
}
.btn.btn-outline-primary:hover, .btn.btn-outline-info:hover {
    background-color: var(--fluent-accent-soft);
    color: var(--fluent-accent-hover);
    border-color: var(--fluent-accent-hover);
}

/* Peligro */
.btn.btn-danger, .btn.btn-outline-danger:hover {
    background-color: var(--fluent-danger);
    border-color: var(--fluent-danger);
    color: #fff;
}
.btn.btn-danger:hover { background-color: var(--fluent-danger-hover); border-color: var(--fluent-danger-hover); }
.btn.btn-outline-danger { color: var(--fluent-danger); border-color: var(--fluent-danger); background-color: transparent; }

/* Exito / advertencia: se conserva el color semantico, con radio Fluent */
.btn.btn-success { background-color: var(--fluent-success); border-color: var(--fluent-success); }
.btn.btn-warning { background-color: #f7630c; border-color: #f7630c; color: #fff; }

/* Botones pequenos: radio 4px */
.btn.btn-sm, .btn-sm {
    border-radius: var(--fluent-radius-sm);
    font-weight: 600;
}

/* Boton de cierre de modal: visible sobre acrilico */
.btn-close { transition: opacity var(--fluent-duration-fast) var(--fluent-ease), background-color var(--fluent-duration-fast) var(--fluent-ease); border-radius: var(--fluent-radius-sm); }
.btn-close:hover { opacity: 1; background-color: var(--fluent-danger-soft); }

/* --------------------------------------------------------------------------
   5. Formularios — inputs, selects, textarea, checks
   -------------------------------------------------------------------------- */
.form-control, .form-select, .form-check-input,
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], input[type="url"],
input[type="date"], textarea, select {
    border-radius: var(--fluent-radius-md);
    border: 1px solid var(--fluent-border-strong);
    background-color: var(--fluent-surface-strong);
    color: var(--fluent-text);
    transition: border-color var(--fluent-duration-fast) var(--fluent-ease),
        box-shadow var(--fluent-duration-fast) var(--fluent-ease),
        background-color var(--fluent-duration-fast) var(--fluent-ease);
}
.form-control:hover, .form-select:hover, textarea:hover, select:hover {
    border-color: var(--fluent-text-tertiary);
}
.form-control:focus, .form-select:focus, textarea:focus, select:focus,
input:focus-visible {
    border-color: var(--fluent-accent);
    box-shadow: 0 0 0 2px var(--fluent-accent-soft), 0 0 0 1px var(--fluent-accent);
    outline: none;
    background-color: #fff;
}
.form-control:disabled, .form-select:disabled, input:disabled, textarea:disabled, select:disabled {
    background-color: var(--fluent-bg);
    color: var(--fluent-text-tertiary);
    opacity: 0.7;
    cursor: not-allowed;
}
.form-control::placeholder, input::placeholder, textarea::placeholder {
    color: var(--fluent-text-tertiary);
}
.form-label, label.form-label, .form-check-label {
    color: var(--fluent-text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
}
.form-check-input:checked {
    background-color: var(--fluent-accent);
    border-color: var(--fluent-accent);
}
.form-check-input:focus { box-shadow: 0 0 0 2px var(--fluent-accent-soft); border-color: var(--fluent-accent); }

/* Buscador del panel (.search-box) y de fracciones */
.search-box {
    border-radius: var(--fluent-radius-pill);
    border: 1px solid var(--fluent-border-strong);
    background-color: var(--fluent-surface-strong);
}
.search-box:focus {
    border-color: var(--fluent-accent);
    box-shadow: 0 0 0 2px var(--fluent-accent-soft);
    outline: none;
}

/* --------------------------------------------------------------------------
   6. Tablas — filas con hover suave, cabecera limpia
   -------------------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    color: var(--fluent-text);
    border-color: var(--fluent-border);
}
.table thead th, .table-light {
    background-color: var(--fluent-surface-subtle);
    color: var(--fluent-text-secondary);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--fluent-border-strong);
}
.table tbody tr {
    transition: background-color var(--fluent-duration-fast) var(--fluent-ease);
}
.table-hover tbody tr:hover, .table tbody tr:hover {
    background-color: var(--fluent-accent-soft);
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 0, 0, 0.02);
}
.table-responsive {
    border-radius: var(--fluent-radius-lg);
    border: 1px solid var(--fluent-border);
    background-color: var(--fluent-surface);
    box-shadow: var(--fluent-shadow-rest);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .table-responsive {
        -webkit-backdrop-filter: var(--fluent-acrylic);
        backdrop-filter: var(--fluent-acrylic);
    }
}

/* --------------------------------------------------------------------------
   7. Modal y drawer — acrilico + animacion de entrada suave
      NOTA !important: webcard-transparency-editor.css declara
   `.wb-modal-box { background: #ffffff !important; ... }` y
   `.wb-modal-box h3 / label / .wb-form-control` con `!important`; sin
   `!important` aqui la cascada no podria ganarle a esa hoja. Solo se usa
   en los selectores .wb-modal-box de esta seccion.
   -------------------------------------------------------------------------- */
.modal-content {
    border-radius: var(--fluent-radius-lg);
    border: 1px solid var(--fluent-border);
    box-shadow: var(--fluent-shadow-flyout);
    overflow: hidden;
}
.modal-header {
    border-bottom: 1px solid var(--fluent-border);
    background-color: var(--fluent-surface-subtle);
}
.modal-footer {
    border-top: 1px solid var(--fluent-border);
    background-color: var(--fluent-surface-subtle);
}
.modal.fade .modal-dialog {
    transition: transform var(--fluent-duration-slow) var(--fluent-ease),
        opacity var(--fluent-duration-slow) var(--fluent-ease);
    transform: translateY(8px) scale(0.98);
    opacity: 0;
}
.modal.show .modal-dialog { transform: none; opacity: 1; }
.modal-backdrop.show { opacity: 0.45; }

/* Modal del editor de Transparencia (webcard): acrilico claro */
#wb-modal-overlay {
    background: rgba(32, 31, 30, 0.55);
    -webkit-backdrop-filter: blur(6px) saturate(1.2);
    backdrop-filter: blur(6px) saturate(1.2);
    animation: fluent-fade-in var(--fluent-duration-slow) var(--fluent-ease);
}
#wb-modal-overlay .wb-modal-box {
    background-color: var(--fluent-surface-strong) !important; /* gana al !important de webcard-transparency-editor.css */
    border: 1px solid var(--fluent-border) !important; /* idem */
    border-radius: var(--fluent-radius-lg);
    box-shadow: var(--fluent-shadow-flyout);
    animation: fluent-modal-in var(--fluent-duration-slow) var(--fluent-ease);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #wb-modal-overlay .wb-modal-box {
        -webkit-backdrop-filter: var(--fluent-acrylic-strong);
        backdrop-filter: var(--fluent-acrylic-strong);
    }
}
#wb-modal-overlay .wb-modal-box h3 {
    color: var(--fluent-accent) !important; /* gana al !important de webcard-transparency-editor.css */
}
#wb-modal-overlay .wb-modal-box label {
    color: var(--fluent-text-secondary) !important; /* idem */
}
#wb-modal-overlay .wb-modal-box .wb-form-control {
    background-color: var(--fluent-surface-strong) !important; /* idem */
    border: 1px solid var(--fluent-border-strong) !important; /* idem */
    color: var(--fluent-text) !important; /* idem */
    border-radius: var(--fluent-radius-md);
}
#wb-modal-overlay .wb-modal-box .wb-form-control:focus {
    border-color: var(--fluent-accent) !important; /* idem */
    box-shadow: 0 0 0 2px var(--fluent-accent-soft) !important; /* idem */
    outline: none;
}
#wb-modal-overlay .wb-modal-header { border-bottom: 1px solid var(--fluent-border); }

/* Variante oscura del modal webcard: acrilico oscuro */
#wb-modal-overlay .wb-modal-box.wb-modal-dark {
    background-color: var(--fluent-surface-dark) !important; /* gana al !important de webcard-transparency-editor.css */
    border: 1px solid var(--fluent-border-on-dark) !important; /* idem */
    color: var(--fluent-text-on-dark) !important; /* idem */
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #wb-modal-overlay .wb-modal-box.wb-modal-dark {
        -webkit-backdrop-filter: var(--fluent-acrylic-strong);
        backdrop-filter: var(--fluent-acrylic-strong);
    }
}
#wb-modal-overlay .wb-modal-box.wb-modal-dark h3 {
    color: #60cdff !important; /* gana al !important de webcard-transparency-editor.css */
}
#wb-modal-overlay .wb-modal-box.wb-modal-dark label {
    color: var(--fluent-text-on-dark-secondary) !important; /* idem */
}
#wb-modal-overlay .wb-modal-box.wb-modal-dark .wb-form-control {
    background-color: rgba(0, 0, 0, 0.35) !important; /* idem */
    border: 1px solid var(--fluent-border-on-dark-strong) !important; /* idem */
    color: var(--fluent-text-on-dark) !important; /* idem */
}
#wb-modal-overlay .wb-modal-box.wb-modal-dark .wb-modal-header {
    border-bottom: 1px solid var(--fluent-border-on-dark) !important; /* idem */
}
#wb-modal-overlay .wb-modal-box.wb-modal-dark .wb-trim-file-card {
    background: var(--fluent-surface-dark-strong);
    border-color: var(--fluent-border-on-dark);
}
#wb-modal-overlay .wb-modal-box.wb-modal-dark .wb-browser-box {
    background: rgba(0, 0, 0, 0.3);
    border-color: var(--fluent-accent);
}
#wb-modal-overlay .wb-modal-box.wb-modal-dark .wb-browser-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Drawer del builder (#softaculous-drawer, pagina.php): acrilico claro */
#softaculous-drawer {
    background-color: var(--fluent-surface-strong);
    border-right: 1px solid var(--fluent-border);
    box-shadow: var(--fluent-shadow-flyout);
    transition: left var(--fluent-duration-slow) var(--fluent-ease),
        box-shadow var(--fluent-duration) var(--fluent-ease);
}
#softaculous-drawer .soft-tab-header {
    background-color: var(--fluent-surface-subtle);
    border-bottom: 1px solid var(--fluent-border);
}

/* --------------------------------------------------------------------------
   8. Barra admin y toolbar de Transparencia — acrilico oscuro
   -------------------------------------------------------------------------- */
/* Barra admin del builder (pagina.php, #wp-admin-bar): el gradiente propio
   se conserva como base; se anade acrilico oscuro por encima */
body #wp-admin-bar {
    background-color: var(--fluent-surface-dark);
    border-bottom: 1px solid var(--fluent-border-on-dark);
    box-shadow: var(--fluent-shadow-dark);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body #wp-admin-bar {
        -webkit-backdrop-filter: var(--fluent-acrylic-strong);
        backdrop-filter: var(--fluent-acrylic-strong);
    }
}
body #wp-admin-bar .btn { border-radius: var(--fluent-radius-md); }
body.preview-mode #wp-admin-bar {
    background-color: rgba(51, 65, 85, 0.85);
    border-bottom-color: var(--fluent-success);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body.preview-mode #wp-admin-bar {
        -webkit-backdrop-filter: var(--fluent-acrylic-strong);
        backdrop-filter: var(--fluent-acrylic-strong);
    }
}

/* Toolbar del editor de Transparencia (webcard, creada por JS):
   la especificidad `body #...` gana al CSS inyectado por el JS sin !important */
body #wb-transparency-toolbar {
    background-color: var(--fluent-surface-dark);
    border-bottom: 1px solid var(--fluent-border-on-dark);
    box-shadow: var(--fluent-shadow-dark);
    border-radius: 0;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body #wb-transparency-toolbar {
        -webkit-backdrop-filter: var(--fluent-acrylic-strong);
        backdrop-filter: var(--fluent-acrylic-strong);
    }
}
body #wb-transparency-toolbar .wb-tb-container { gap: 12px; }

/* Topbar del editor a pantalla completa (pagina.php, #transparency-fullscreen) */
#transparency-fullscreen .tf-topbar {
    background-color: var(--fluent-surface-dark);
    border-bottom: 1px solid var(--fluent-border-on-dark);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    #transparency-fullscreen .tf-topbar {
        -webkit-backdrop-filter: var(--fluent-acrylic-strong);
        backdrop-filter: var(--fluent-acrylic-strong);
    }
}

/* Header institucional: solo profundidad y acrilico ligero; el color y la
   altura los sigue mandando la configuracion de la BD (header.php) */
.institutional-header {
    box-shadow: var(--fluent-shadow-rest);
    border-bottom: 1px solid var(--fluent-border);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .institutional-header {
        -webkit-backdrop-filter: var(--fluent-acrylic);
        backdrop-filter: var(--fluent-acrylic);
    }
}
.institutional-header .dropdown-menu {
    border-radius: var(--fluent-radius-lg);
    box-shadow: var(--fluent-shadow-flyout);
}
.institutional-header .dropdown-item {
    border-radius: var(--fluent-radius-md);
    transition: background-color var(--fluent-duration-fast) var(--fluent-ease);
}
.institutional-header .dropdown-item:hover { background-color: var(--fluent-accent-soft); }

/* Footer institucional: profundidad suave, sin tocar su color de fondo */
#institutional-footer { box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06); }
#institutional-footer .ft-galeria img { border-radius: var(--fluent-radius-md); }

/* --------------------------------------------------------------------------
   9. Panel admin — sidebar, tarjetas de bloque y elementos
   -------------------------------------------------------------------------- */
.sidebar {
    background-color: var(--fluent-surface-dark);
    border-right: 1px solid var(--fluent-border-on-dark);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .sidebar {
        -webkit-backdrop-filter: var(--fluent-acrylic-strong);
        backdrop-filter: var(--fluent-acrylic-strong);
    }
}
.sidebar a {
    border-radius: var(--fluent-radius-md);
    border: 1px solid transparent;
    transition: background-color var(--fluent-duration-fast) var(--fluent-ease),
        color var(--fluent-duration-fast) var(--fluent-ease),
        border-color var(--fluent-duration-fast) var(--fluent-ease);
}
.sidebar a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--fluent-text-on-dark);
}
.sidebar a.active {
    background-color: var(--fluent-accent-soft);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: inset 3px 0 0 var(--fluent-accent);
}

/* Tarjetas de bloque del builder de paginas (admin/paginas.php) */
.element-card {
    border-radius: var(--fluent-radius-md);
    background-color: var(--fluent-surface-strong);
}
.element-card:hover {
    border-color: var(--fluent-accent);
    background-color: var(--fluent-accent-soft);
    box-shadow: var(--fluent-shadow-hover);
    transform: translateY(-2px);
}
.builder-sidebar {
    border-radius: 0 var(--fluent-radius-lg) var(--fluent-radius-lg) 0;
    background-color: var(--fluent-surface);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .builder-sidebar {
        -webkit-backdrop-filter: var(--fluent-acrylic);
        backdrop-filter: var(--fluent-acrylic);
    }
}

/* Seccion Transparencia deshabilitada en paginas.php */
.transparencia-deshabilitado { border-radius: var(--fluent-radius-md); }

/* --------------------------------------------------------------------------
   10. Builder — tarjetas de widget, bloques y acciones
   -------------------------------------------------------------------------- */
.widget-card {
    border-radius: var(--fluent-radius-md);
    background-color: var(--fluent-surface-strong);
    transition: border-color var(--fluent-duration-fast) var(--fluent-ease),
        background-color var(--fluent-duration-fast) var(--fluent-ease),
        box-shadow var(--fluent-duration) var(--fluent-ease),
        transform var(--fluent-duration-fast) var(--fluent-ease);
}
.widget-card:hover {
    border-color: var(--fluent-accent);
    background-color: var(--fluent-accent-soft);
    box-shadow: var(--fluent-shadow-hover);
    transform: translateY(-1px);
}
.widget-card.active {
    border-color: var(--fluent-accent);
    background-color: var(--fluent-accent-soft);
    box-shadow: var(--fluent-shadow-rest);
}
.widget-card .icon-box {
    border-radius: 10px;
    box-shadow: var(--fluent-shadow-rest);
}

/* Etiqueta de grupo dentro del drawer */
.group-label {
    color: var(--fluent-accent);
    border-bottom-color: var(--fluent-border);
}

/* Bloque del builder en el lienzo (pagina.php) */
.builder-block-wrapper {
    border-radius: var(--fluent-radius-md);
    background-color: var(--fluent-surface-subtle);
}
.builder-block-wrapper:hover {
    border-color: var(--fluent-accent);
    background-color: var(--fluent-accent-soft);
}
.builder-block-wrapper.selected {
    border-color: var(--fluent-accent);
    background-color: var(--fluent-accent-soft);
    box-shadow: 0 0 0 2px var(--fluent-accent-soft);
}

/* Botones de accion sobre cada bloque */
.block-action-btn {
    border-radius: var(--fluent-radius-sm);
    background-color: var(--fluent-accent);
    box-shadow: var(--fluent-shadow-rest);
    transition: opacity var(--fluent-duration-fast) var(--fluent-ease),
        background-color var(--fluent-duration-fast) var(--fluent-ease),
        transform var(--fluent-duration-fast) var(--fluent-ease);
}
.block-action-btn:hover { opacity: 1; transform: translateY(-1px); }
.block-action-btn:active { transform: translateY(0) scale(0.98); }
.block-action-btn.btn-secondary-action { background-color: #605e5c; }
.block-action-btn.btn-warning-action { background-color: var(--fluent-info); }

/* Boton oscuro del servidor en el drawer */
.btn-server-dark {
    background-color: var(--fluent-surface-dark-strong);
    color: var(--fluent-text-on-dark);
    border-color: var(--fluent-border-on-dark);
    border-radius: var(--fluent-radius-md);
}
.btn-server-dark:hover {
    background-color: var(--fluent-surface-dark-solid);
    color: #fbbf24;
}

/* --------------------------------------------------------------------------
   11. Editor de Transparencia — botones, tarjetas de archivo y navegador
   -------------------------------------------------------------------------- */
.wb-btn {
    border-radius: var(--fluent-radius-md);
    font-weight: 600;
    box-shadow: var(--fluent-shadow-rest);
    transition: background-color var(--fluent-duration-fast) var(--fluent-ease),
        opacity var(--fluent-duration-fast) var(--fluent-ease),
        box-shadow var(--fluent-duration-fast) var(--fluent-ease),
        transform var(--fluent-duration-fast) var(--fluent-ease);
}
.wb-btn:hover { opacity: 1; box-shadow: var(--fluent-shadow-hover); }
.wb-btn:active { transform: translateY(1px) scale(0.99); }
.wb-btn:disabled, .wb-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}
.wb-btn-primary {
    background-color: var(--fluent-success);
    box-shadow: var(--fluent-shadow-rest);
}
.wb-btn-primary:hover { background-color: #0b5e0b; }

/* Boton Configurar de cada fraccion (creado por webcard-transparency-editor.js) */
.wb-edit-modal-btn {
    border-radius: var(--fluent-radius-sm);
    background-color: var(--fluent-warning);
}

/* Controles admin dentro de las fracciones */
.wb-admin-controls {
    border-radius: var(--fluent-radius-md);
    background-color: var(--fluent-surface-subtle);
    border: 1px dashed var(--fluent-border-strong);
}

/* Tarjeta de archivo por trimestre y navegador de carpetas del servidor */
.wb-trim-file-card {
    border-radius: var(--fluent-radius-md);
    background-color: var(--fluent-surface-strong);
}
.wb-trim-file-card:hover { box-shadow: var(--fluent-shadow-hover); }
.wb-browser-box {
    border-radius: var(--fluent-radius-md);
    background-color: var(--fluent-info-soft);
    border: 1px solid var(--fluent-accent);
}
.wb-browser-item {
    border-radius: var(--fluent-radius-sm);
    transition: background-color var(--fluent-duration-fast) var(--fluent-ease);
}
.wb-browser-item:hover { background-color: var(--fluent-accent-soft); }
.wb-browser-item:active { background-color: var(--fluent-accent-soft-hover); }

/* Tarjeta bloqueada (candado) */
.wb-locked-card { border-left: 4px solid var(--fluent-warning); border-radius: var(--fluent-radius-md); }

/* Contador de archivos reconocidos y grupos anidados */
.wb-recognized-count {
    border-radius: var(--fluent-radius-pill);
    background-color: var(--fluent-success-soft);
    color: var(--fluent-success);
    font-weight: 600;
    padding: 2px 10px;
}
.wb-nested-group {
    border: 1px solid var(--fluent-border);
    border-radius: var(--fluent-radius-md);
    background-color: var(--fluent-surface-subtle);
}

/* Login del editor webcard (si se muestra en modal) */
.wb-login-error {
    border-radius: var(--fluent-radius-md);
    background-color: var(--fluent-danger-soft);
    color: var(--fluent-danger);
}

/* --------------------------------------------------------------------------
   12. Fracciones de Transparencia y paneles (.panelsint, meses)
   -------------------------------------------------------------------------- */
.fraccion-card, .fraccion-cardX, .fraccion-cardXX {
    border-radius: var(--fluent-radius-lg);
    overflow: hidden;
    transition: box-shadow var(--fluent-duration) var(--fluent-ease),
        border-color var(--fluent-duration) var(--fluent-ease);
}
.fraccion-card:hover, .fraccion-cardX:hover, .fraccion-cardXX:hover {
    border-color: var(--fluent-border-strong);
    box-shadow: var(--fluent-shadow-hover);
}
.fraccion-trigger { transition: background-color var(--fluent-duration-fast) var(--fluent-ease); }
.fraccion-trigger:hover { background-color: var(--fluent-accent-soft); }
.fraccion-trigger:focus-visible { outline: 2px solid var(--fluent-accent); outline-offset: -2px; }

/* Cabecera premium de las paginas de Transparencia */
.header-premium {
    border-radius: var(--fluent-radius-lg);
    background-color: var(--fluent-surface-strong);
    border: 1px solid var(--fluent-border);
    box-shadow: var(--fluent-shadow-rest);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .header-premium {
        -webkit-backdrop-filter: var(--fluent-acrylic);
        backdrop-filter: var(--fluent-acrylic);
    }
}

/* Paneles Contabilidad/Disciplina y meses/trimestres internos */
.panelsint, .card-mes-item {
    border-radius: var(--fluent-radius-lg);
    background-color: var(--fluent-surface);
    transition: box-shadow var(--fluent-duration) var(--fluent-ease);
}
.panelsint:hover, .card-mes-item:hover { box-shadow: var(--fluent-shadow-hover); }
.btn-mes-trigger {
    border-radius: var(--fluent-radius-md);
    transition: background-color var(--fluent-duration-fast) var(--fluent-ease),
        color var(--fluent-duration-fast) var(--fluent-ease);
}
.btn-mes-trigger:hover { background-color: var(--fluent-accent-soft); color: var(--fluent-accent-hover); }
.body-mes-pdfs {
    transition: max-height 0.3s var(--fluent-ease), padding 0.3s var(--fluent-ease);
}

/* --------------------------------------------------------------------------
   13. Badges, pills, alertas y toasts
   -------------------------------------------------------------------------- */
.badge, .rounded-pill {
    border-radius: var(--fluent-radius-pill);
    font-weight: 600;
    letter-spacing: 0.01em;
}
.badge.bg-primary { background-color: var(--fluent-accent) !important; } /* Bootstrap 5.3 declara .bg-primary con !important; sin el, el acento Fluent no ganaria. Los demas .bg-* conservan su color Bootstrap. */

.alert {
    border-radius: var(--fluent-radius-lg);
    border: 1px solid var(--fluent-border);
    box-shadow: var(--fluent-shadow-rest);
}
.alert-info { background-color: var(--fluent-info-soft); color: #0b4a7a; border-color: rgba(15, 108, 189, 0.25); }
.alert-success { background-color: var(--fluent-success-soft); color: var(--fluent-success); border-color: rgba(16, 124, 16, 0.25); }
.alert-warning { background-color: var(--fluent-warning-soft); color: #8a3a00; border-color: rgba(202, 80, 16, 0.25); }
.alert-danger { background-color: var(--fluent-danger-soft); color: var(--fluent-danger); border-color: rgba(197, 15, 31, 0.25); }

/* Toasts del builder (#toast-container / .builder-toast, pagina.php) */
#toast-container { gap: 8px; }
.builder-toast, .toast {
    border-radius: var(--fluent-radius-md);
    background-color: var(--fluent-surface-dark);
    color: var(--fluent-text-on-dark);
    border: 1px solid var(--fluent-border-on-dark);
    box-shadow: var(--fluent-shadow-dark);
    animation: fluent-toast-in var(--fluent-duration-slow) var(--fluent-ease);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .builder-toast, .toast {
        -webkit-backdrop-filter: var(--fluent-acrylic-strong);
        backdrop-filter: var(--fluent-acrylic-strong);
    }
}
.builder-toast.toast-ok { border-left: 4px solid var(--fluent-success); }
.builder-toast.toast-error { border-left: 4px solid var(--fluent-danger); }
.builder-toast.toast-info { border-left: 4px solid var(--fluent-accent); }

/* --------------------------------------------------------------------------
   14. Dropdowns, listas y paginacion
   -------------------------------------------------------------------------- */
.dropdown-menu {
    border-radius: var(--fluent-radius-lg);
    box-shadow: var(--fluent-shadow-flyout);
    padding: 6px;
}
.dropdown-item {
    border-radius: var(--fluent-radius-md);
    transition: background-color var(--fluent-duration-fast) var(--fluent-ease);
}
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--fluent-accent-soft); color: var(--fluent-text); }
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--fluent-accent);
    color: #fff;
}
.list-group-item { transition: background-color var(--fluent-duration-fast) var(--fluent-ease); }
.list-group-item:hover { background-color: var(--fluent-accent-soft); }
.list-group-item.active { background-color: var(--fluent-accent); border-color: var(--fluent-accent); }

.page-link {
    border-radius: var(--fluent-radius-md);
    color: var(--fluent-accent);
    border-color: var(--fluent-border);
    transition: background-color var(--fluent-duration-fast) var(--fluent-ease);
}
.page-link:hover { background-color: var(--fluent-accent-soft); color: var(--fluent-accent-hover); }
.page-item.active .page-link { background-color: var(--fluent-accent); border-color: var(--fluent-accent); }

/* --------------------------------------------------------------------------
   15. Scrollbar fina (Fluent)
   -------------------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.25) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.25);
    border-radius: var(--fluent-radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.40); background-clip: content-box; }
#softaculous-drawer .drawer-scroll::-webkit-scrollbar { width: 6px; }
#softaculous-drawer .drawer-scroll::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.25); border-radius: var(--fluent-radius-pill); }
.wb-modal-box::-webkit-scrollbar { width: 8px; }

/* --------------------------------------------------------------------------
   16. Animaciones de entrada (120-200 ms, transform + opacity)
   -------------------------------------------------------------------------- */
@keyframes fluent-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fluent-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fluent-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   17. Accesibilidad — movimiento reducido y alto contraste
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    /* !important aqui es intencional: es el unico modo de anular las
       animaciones/transiciones que vienen de Bootstrap y de los CSS propios
       cuando el usuario pide movimiento reducido. */
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .modal.fade .modal-dialog { transform: none; opacity: 1; }
    #wb-modal-overlay .wb-modal-box { animation: none; }
}

@media (prefers-contrast: more) {
    :root {
        --fluent-border: rgba(0, 0, 0, 0.45);
        --fluent-border-strong: rgba(0, 0, 0, 0.65);
        --fluent-surface: #ffffff;
        --fluent-surface-strong: #ffffff;
    }
}

/* --------------------------------------------------------------------------
   18. Responsive — el acrilico y los radios se mantienen; solo se ajusta
       el drawer a pantalla completa en movil (coherente con pagina.php)
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    #softaculous-drawer {
        border-right: none;
        border-radius: 0;
    }
    .card, .modal-content { border-radius: var(--fluent-radius-md); }
    .search-box { width: 100%; }
}

/* --------------------------------------------------------------------------
   19. Densidad general (2026-11-07, v2.3-2.4): los títulos display de
       Bootstrap se veían enormes en pantallas grandes (el banner display-5
       a 48px, las cifras display-4 a 56px, el teléfono display-6 a 40px).
       Se bajan en todo el sitio. El panel admin ya fija sus propios
       tamaños en admin.css y el builder en pagina.php, así que esto no
       los toca.
   -------------------------------------------------------------------------- */
.display-4 { font-size: 2.25rem !important; }
.display-5 { font-size: 2rem !important; }
.display-6 { font-size: 1.6rem !important; }
.lead { font-size: 1.05rem !important; }

/* --------------------------------------------------------------------------
   20. Densidad global (2026-11-07, v2.4-2.5): base y títulos a la medida
       del ejemplo institucional (IVM) y de Windows. Los tamaños ya NO son
       fijos: se controlan con el editor de Apariencia (admin/apariencia.php)
       y las variables --ap-* las emite includes/apariencia.php desde la BD
       (header.php las imprime en cada página). Los fallbacks son los valores
       por defecto: base 12.5px, títulos 22px, subtítulos 18px. El admin y
       el builder fijan sus propios tamaños en admin.css / pagina.php y no
       les afecta (sus reglas son más específicas).
       Enlaces y radio (2026-11-07): --ap-enlace / --ap-enlace-hover
       (defecto #0f6cbd / #115ea3, el acento Fluent actual) y --ap-radio
       (defecto 8px, el radio medio Fluent actual) también vienen de
       Apariencia. Los enlaces del footer conservan su propio color
       (ftLinkColor, footer.php) y los del menú del header el suyo
       (cardText, header_custom_css): estas reglas no los tocan.
   -------------------------------------------------------------------------- */
html { font-size: var(--ap-base, 12.5px); }
h1 { font-size: var(--ap-titulo, 22px); }
h2 { font-size: var(--ap-titulo, 22px); }
h3 { font-size: var(--ap-subtitulo, 18px); }
h4 { font-size: var(--ap-subtitulo, 18px); }
a { color: var(--ap-enlace, #0f6cbd); }
a:hover { color: var(--ap-enlace-hover, #115ea3); }
:root { --fluent-radius-md: var(--ap-radio, 8px); }
.btn-primary { --bs-btn-bg: var(--ap-primario, #0d6efd); --bs-btn-border-color: var(--ap-primario, #0d6efd); --bs-btn-hover-bg: var(--ap-primario, #0d6efd); --bs-btn-hover-border-color: var(--ap-primario, #0d6efd); --bs-btn-active-bg: var(--ap-primario, #0d6efd); --bs-btn-active-border-color: var(--ap-primario, #0d6efd); --bs-btn-disabled-bg: var(--ap-primario, #0d6efd); --bs-btn-disabled-border-color: var(--ap-primario, #0d6efd); }
/* Interlineado y sombras de tarjetas (v3, Apariencia): --ap-linea
   (defecto 1.6) y --ap-sombra (defecto la sombra Bootstrap) vienen de
   includes/apariencia.php; sin tocarlos, el aspecto no cambia. */
body:not(.admin-page):not(.admin-editing) { line-height: var(--ap-linea, 1.6); }
.card { box-shadow: var(--ap-sombra, 0 .125rem .25rem rgba(0,0,0,.075)); }
/* Animaciones de entrada por bloque (v3): el builder guarda la clase
   builder-anim-* en el bloque; aquí se pinta en la vista pública
   (builder.css lleva la misma copia para el modo edición). */
@keyframes builderFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes builderSlideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes builderZoomIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.builder-anim-fade { animation: builderFadeIn .6s ease both; }
.builder-anim-slide-up { animation: builderSlideUp .6s ease both; }
.builder-anim-zoom { animation: builderZoomIn .5s ease both; }
@media (prefers-reduced-motion: reduce) { .builder-anim-fade, .builder-anim-slide-up, .builder-anim-zoom { animation: none; } }

/* (RTM v3.29) EFECTO CRISTAL SELECCIONABLE: con body.builder-sin-cristal
   (check "Efecto cristal en modales" del drawer, localStorage
   cms-builder-cristal) los modales se ven sólidos/opacos: sin
   backdrop-filter y fondo blanco sólido. Por defecto el cristal está
   activado (la clase no está presente). */
body.builder-sin-cristal .modal-content {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-color: #ffffff !important;
}
body.builder-sin-cristal .modal-backdrop.show { opacity: .5; }
/* Sin cristal + tema oscuro del builder: el modal sólido es oscuro. */
body.builder-tema-oscuro.builder-sin-cristal .modal-content { background-color: #1e293b !important; }

/* (RTM v3.34) COLOR DEL TÍTULO DE LOS MODALES: se elige en el drawer
   (PERSONALIZACIÓN DEL BUILDER, localStorage cms-builder-titulo-modal;
   por defecto blanco #ffffff). Causa del bug: fluent.css pone
   h1..h6 { color: var(--fluent-text) } (#201f1e), una regla directa sobre
   el h5 del título que gana al blanco heredado del text-white del header,
   así que el título se veía negro sobre el fondo oscuro (medido en
   captura: glifos #201f1e sobre fondo #212529, contraste ~1:1). Solo se
   aplica a los headers marcados text-white (los oscuros: bg-dark,
   bg-primary, bg-success, bg-danger, bg-secondary, bg-info claro con
   texto blanco); los headers text-dark (bg-warning, bg-info con texto
   oscuro) conservan su título oscuro, que sí se lee. El icono del título
   toma el mismo color para que toda la barra quede legible. */
.modal-header.text-white .modal-title,
.modal-header.text-white .modal-title .material-symbols-outlined {
    color: var(--cms-modal-titulo, #ffffff) !important;
}
/* (RTM v3.34) Regla general: un título dentro de un contenedor text-white
   hereda el blanco. Sin ella, la regla h1..h6 de fluent.css pinta de
   oscuro cualquier encabezado aunque su contenedor pida texto blanco. */
.text-white h1, .text-white h2, .text-white h3, .text-white h4,
.text-white h5, .text-white h6 { color: inherit !important; }

/* (RTM v3.34) CRISTAL VISIBLE: con el cristal activado el modal es
   claramente translúcido (se ve la página difuminada detrás) y con brillo
   superior; sin cristal es blanco sólido con sombra plana. Antes la
   diferencia era tan sutil (fondo 0.72 -> 1.0, mismo blur) que el check
   parecía no hacer nada. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body:not(.builder-sin-cristal) .modal-content {
        background-color: rgba(255, 255, 255, 0.55) !important;
        -webkit-backdrop-filter: blur(22px) saturate(1.6) !important;
        backdrop-filter: blur(22px) saturate(1.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.7) !important;
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important;
    }
    /* (RTM v3.35) Con cristal el velo oscuro detrás del modal se aclara
       (0.5 -> 0.25) para que la página se vea a través del cristal; sin
       cristal el velo vuelve a 0.5 (regla builder-sin-cristal de arriba). */
    body:not(.builder-sin-cristal) .modal-backdrop.show { opacity: 0.25 !important; }
}
body.builder-sin-cristal .modal-content {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}