/* ==========================================================================
   assets/css/v30-diseno.css — Capa de diseño V3.0 (PARÉNTESIS, 2026-11-09)
   --------------------------------------------------------------------------
   Qué es: la capa visual que acerca Contabilidad, Disciplina, Avisos y
   Directorio al diseño de la V3.0 de Missa (Tomatlan V3.0, la primera
   versión que ella hizo; tema Canvas ADAPTADO por ella, no el Canvas
   lineal de stock). Se carga DESPUÉS del CSS propio del CMS (header.php
   y la plantilla de Transparencia), así que gana donde choquen las
   reglas, sin tocar los archivos del CMS.
   Orden de carga: canvas-principal.css (style.css de la V3.0) -> CSS del
   CMS (style.css, transparencia-fracciones.css...) -> ESTE archivo.
   0 CDN: todo local en el servidor (sin Google Fonts, sin cdnjs).
   Tokens: --v30-acento se puede cambiar en Admin > Apariencia
   ("Color de acento V3.0", clave ap_v30_acento); el valor por defecto
   es el azul de la V3.0.
   Adaptado a Bootstrap 5.3.8: la V3.0 usaba Bootstrap 4.0.0; NO se
   copiaron sus clases viejas (ni su jQuery bootstrap). Lo que se
   migró: .panelsint, .toggle.toggle-bg, #myTable, .sale-flash,
   menú sub-title, preloaders (14 spinners CSS3, al final del archivo).
   ========================================================================== */
:root {
    --v30-acento: #0d6efd;   /* azul de la V3.0 (en TOM26 lo cambiaron a #007bff) */
    --v30-oscuro: #26374b;   /* azul oscuro de la V3.0 */
    --v30-texto: #515151;    /* gris de texto de la V3.0 */
}

/* Guarda: la style.css de la V3.0 NO trae el fondo roto 1tomatl.png
   (ese era del TOM26), pero si algún día se cambia el Canvas, el fondo
   de imagen del body no puede volver a aparecer. El fondo del CMS es
   siempre un color (ap_fondo), así que esta regla no quita nada. */
body { background-image: none !important; }

/* ==========================================================================
   1. PANELES DE FRACCIÓN (.panelsint) — V3.0
   La V3.0 lo define en css/bootstrap_ORIGINAL.css:4717 como una tarjeta
   Bootstrap 4 renombrada (comentario propio: "NUEVO /// interlineado
   bootstrap muy util - mio"): borde fino, radio .25rem, apilado prieto
   (margen inferior 4px, no 10px), cabecera gris muy clara y enlace del
   header en gris #515151 13px peso 400 (no azul 600). Mismos selectores
   que transparencia-fracciones.css (RTM v3.10): este archivo carga
   después, así que gana por orden sin !important.
   ========================================================================== */
.panelsint {
    border: 0.5px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    background: #ffffff;
    margin-bottom: 4px;
    overflow: hidden;
    box-shadow: none;
}
.panelsint-header {
    background: rgba(0, 0, 0, 0.03);
    border-bottom: 0.5px solid rgba(0, 0, 0, 0.125);
    padding: 0;
}
.panelsint-header a {
    display: block;
    color: #515151;
    font-size: 13px;
    font-weight: 400;
    text-decoration: none;
    padding: 0.75rem 1.25rem;
}
.panelsint-header a:hover {
    color: var(--v30-acento, #0d6efd);
    text-decoration: none;
    background: rgba(0, 0, 0, 0.02);
}
.panelsint-body {
    padding: 1.25rem;
    font-size: calc(var(--cms-fuente-transp, 1rem) * 0.8125);
    color: #515151;
}
.panelsint-body .toggleta { color: var(--v30-acento, #0d6efd); }

/* ==========================================================================
   2. DESPLEGABLES (.toggle.toggle-bg) — Canvas de la V3.0, migrado a BS5
   En la V3.0 cada aviso es un .toggle.toggle-bg con icono de carpeta a
   la izquierda (icon-file-alt cerrado / icon-file-text abierto), fondo
   #f5f5f5, borde izquierdo de 3px en azul, radio 5px, 13px. Aquí el icono
   es FontAwesome 6 local (::before, carpeta cerrada/abierta) y el estado
   lo marca aria-expanded (Bootstrap 5) o la clase .toggleta (toggles de
   las plantillas maestras, que el shim JS abre/cierra). El color del
   borde y del texto sigue --v30-acento.
   ========================================================================== */
.toggle.toggle-bg {
    background-color: #f5f5f5;
    border-left: 3px solid var(--v30-acento, #0d6efd);
    border-radius: 5px;
    margin-bottom: 4px;
}
.toggle.toggle-bg .togglet,
.toggle.toggle-bg .toggleta {
    position: relative;
    display: block;
    color: var(--v30-acento, #0d6efd);
    font-size: 13px;
    padding: 12px 20px 12px 40px;
    text-decoration: none;
    cursor: pointer;
}
.toggle.toggle-bg .togglet::before,
.toggle.toggle-bg .toggleta::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f07b"; /* carpeta cerrada */
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--v30-acento, #0d6efd);
    font-size: 13px;
}
.toggle.toggle-bg .toggleta::before,
.toggle.toggle-bg [aria-expanded="true"]::before {
    content: "\f07c"; /* carpeta abierta */
}
.toggle.toggle-bg .togglec { padding: 0 20px 12px 40px; }

/* ==========================================================================
   3. TABLA DE DOCUMENTOS (#myTable) — V3.0
   Misma tabla que transparencia-fracciones.css; aquí solo cambia el
   color de los enlaces al acento V3.0. La proporción 85/15 de Avisos
   ("Vista en línea" / "Descargar PDF") va en el marcado, no en CSS.
   ========================================================================== */
#myTable a { color: var(--v30-acento, #0d6efd); }
#myTable a:hover { color: var(--v30-oscuro, #26374b); }

/* ==========================================================================
   4. DIRECTORIO — tarjetas .v30-product (V3.0: .shop.product-3)
   La V3.0 muestra cada persona como tarjeta de producto de 3 columnas
   con .sale-flash (etiqueta azul sobre la imagen) y el nombre en azul
   16px. Aquí la rejilla es la de Bootstrap 5 del CMS y la etiqueta, el
   nombre y el cargo usan estas clases; la foto genérica es la de la
   V3.0 (sitio-principal/Imagenes/Profiles/img_tumb.jpg).
   ========================================================================== */
.v30-product { position: relative; }
.v30-product .v30-img { position: relative; overflow: hidden; }
.v30-product .v30-img img { width: 100%; height: auto; display: block; }
.sale-flash {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px 10px;
    background-color: var(--v30-acento, #0d6efd);
    color: #ffffff;
    border-radius: 2px;
    z-index: 5;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1;
}
.v30-product .v30-nombre {
    color: var(--v30-acento, #0d6efd);
    font-size: 16px;
    font-weight: 600;
    margin: 0.5rem 0 0.15rem;
}
.v30-product .v30-cargo {
    color: #515151;
    font-size: 13px;
    margin: 0;
}

/* ==========================================================================
   5. MENÚ SUB-TITLE — adaptación propia de la V3.0 (#primary-menu)
   Título en mayúsculas 14px + subtítulo en minúsculas 11px gris #888
   debajo (margin-top 10px). En la V3.0 el hover pintaba el fondo de
   azul con el texto en blanco; aquí el fondo de hover lo manda el
   builder (Color Ficha Activa / Hover) y solo el subtítulo pasa a
   blanco semitransparente. El subtítulo solo se pinta si la opción
   está activa en el builder (Configurar Header > "Mostrar subtítulos
   en el menú") y la fila tiene subtítulo (Admin > Menús).
   Separador entre principales: la V3.0 usaba images/icons/menu-divider.png
   (ese archivo NO existe ni en la V3.0); aquí es un borde CSS fino.
   ========================================================================== */
.institutional-header .menu-subtitulo {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    text-transform: capitalize;
    margin-top: 10px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
}
.menu-card-item:hover .menu-subtitulo,
.menu-card-active .menu-subtitulo { color: #ffffff; }
@media (min-width: 992px) {
    .institutional-header .menu-card-item + .menu-card-item {
        border-left: 1px solid rgba(128, 128, 128, 0.18) !important;
    }
}

/* ==========================================================================
   6. TERCER NIVEL DE MENÚ (nietos) — nuevo en el paréntesis
   El menú de la V3.0 tiene 3 niveles (TRANSPARENCIA > Ley de
   contabilidad > 2018). En escritorio el tercer nivel vuela a la
   derecha del submenú al pasar el cursor; en móvil se abre al tocar
   el submenú (JS en header.php, clase .show en el <li>).
   ========================================================================== */
@media (min-width: 992px) {
    /* Submenús de la navbar bien formados (2026-11-09): el desplegable de
       2º nivel baja del padre con un ancho mínimo para que no se vea
       apretado, y el de 3er nivel se abre A LA DERECHA del ítem padre
       (como en el portal principal), con su flecha chevron. */
    .institutional-header .menu-card-item > .dropdown-menu { min-width: 220px; }
    .dropdown-submenu { position: relative; }
    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -8px;
        display: none;
        position: absolute;
        background-color: #ffffff;
        border: none;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        padding: 8px 0;
        min-width: 220px;
    }
    .dropdown-submenu:hover > .dropdown-menu,
    .dropdown-submenu:focus-within > .dropdown-menu { display: block !important; }
    .dropdown-submenu > .dropdown-item::after {
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        content: "\f105"; /* chevron a la derecha */
        float: right;
        color: #94a3b8;
        margin-left: 12px;
    }
}
@media (max-width: 991.98px) {
    .menu-card-item .dropdown-menu .dropdown-submenu > .dropdown-menu {
        position: static !important;
        display: none !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 4px 0 8px 15px !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .menu-card-item .dropdown-menu .dropdown-submenu.show > .dropdown-menu { display: block !important; }
    .menu-card-item .dropdown-menu .dropdown-submenu .dropdown-item { padding-left: 52px !important; }
}

/* ==========================================================================
   7. PRELOADER (overlay de carga) — V3.0, parametrizado en Apariencia
   La V3.0 usaba images/preloader.gif como fondo #FFF mientras cargaban
   las imágenes (js/functions.js:679) y 14 spinners CSS3 en style.css.
   El overlay lo emite includes/preloader.php (se lee de
   configuracion_global: ap_preloader_activo/estilo/fondo/velocidad).
   --cms-preloader-fondo: color de fondo del velo.
   --cms-preloader-duracion: duración de la animación del spinner
   (lenta 1.6s / normal 1s / rápida 0.6s); en GIF, la velocidad manda
   en el retardo del fundido (JS de preloader.php).
   --cms-preloader-color: color de los spinners (el acento V3.0).
   ========================================================================== */
#cms-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cms-preloader-fondo, #ffffff);
    transition: opacity 0.3s ease;
}
#cms-preloader.cms-preloader-oculto { opacity: 0; pointer-events: none; }
#cms-preloader img { max-width: 120px; height: auto; }
/* El .css3-spinner de Canvas es un overlay fijo de pantalla completa;
   dentro de #cms-preloader se vuelve estático y sus hijos absolutos se
   centran respecto al velo (que es fixed). */
#cms-preloader .css3-spinner {
    position: static !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
}
#cms-preloader .css3-spinner * {
    -webkit-animation-duration: var(--cms-preloader-duracion, 1s) !important;
    animation-duration: var(--cms-preloader-duracion, 1s) !important;
}

/* ==========================================================================
   8. SPINNERS CSS3 DE LA V3.0 (14 estilos, extraídos tal cual de
   css/style.css de Tomatlan V3.0; solo se usan dentro de #cms-preloader).
   ball-pulse-sync, ball-rotate, ball-scale-multiple, bounce,
   clip-rotate, cube, double-bounce, flipper, grid-pulse, rect,
   scale-ripple, scaler, triangle-path, zig-zag.
   ========================================================================== */
.page-load-status .css3-spinner{position:absolute;z-index:auto;background-color:transparent!important}
.page-load-status .css3-spinner-ball-pulse-sync>div{background-color:#333}
.css3-spinner{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1000;text-align:center;background-color:#fff;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.css3-spinner>div{position:absolute;top:50%;left:50%;margin-top:-9px;margin-left:13px;width:18px;height:18px;background-color:#ddd;border-radius:100%;display:inline-block;-webkit-animation:bouncedelay 1.4s infinite ease-in-out;animation:bouncedelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.css3-spinner .css3-spinner-bounce1{margin-left:-31px;-webkit-animation-delay:-.32s;animation-delay:-.32s}
.css3-spinner .css3-spinner-bounce2{margin-left:-9px;-webkit-animation-delay:-.16s;animation-delay:-.16s}
@-webkit-keyframes bouncedelay{0%,100%,80%{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}
@keyframes bouncedelay{0%,100%,80%{transform:scale(0);-webkit-transform:scale(0)}40%{transform:scale(1);-webkit-transform:scale(1)}}
.css3-spinner>.css3-spinner-flipper{width:32px;height:32px;margin-top:-16px;margin-left:-16px;border-radius:0;-webkit-animation:rotateplane 1.2s infinite ease-in-out;animation:rotateplane 1.2s infinite ease-in-out}
@-webkit-keyframes rotateplane{0%{-webkit-transform:perspective(120px)}50%{-webkit-transform:perspective(120px) rotateY(180deg)}100%{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}
@keyframes rotateplane{0%{transform:perspective(120px) rotateX(0) rotateY(0);-webkit-transform:perspective(120px) rotateX(0) rotateY(0)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0)}100%{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}
.css3-spinner>.css3-spinner-double-bounce1,.css3-spinner>.css3-spinner-double-bounce2{width:40px;height:40px;margin-top:-20px;margin-left:-20px;border-radius:50%;opacity:.6;-webkit-animation:cssspinnerbounce 2s infinite ease-in-out;animation:cssspinnerbounce 2s infinite ease-in-out}
.css3-spinner>.css3-spinner-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}
@-webkit-keyframes cssspinnerbounce{0%,100%{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}
@keyframes cssspinnerbounce{0%,100%{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}
.css3-spinner>.css3-spinner-rect1,.css3-spinner>.css3-spinner-rect2,.css3-spinner>.css3-spinner-rect3,.css3-spinner>.css3-spinner-rect4,.css3-spinner>.css3-spinner-rect5{height:30px;width:6px;margin-top:-15px;margin-left:-21px;border-radius:0;-webkit-animation:stretchdelay 1.2s infinite ease-in-out;animation:stretchdelay 1.2s infinite ease-in-out}
.css3-spinner>.css3-spinner-rect2{margin-left:-12px;-webkit-animation-delay:-1.1s;animation-delay:-1.1s}
.css3-spinner>.css3-spinner-rect3{margin-left:-3px;-webkit-animation-delay:-1s;animation-delay:-1s}
.css3-spinner>.css3-spinner-rect4{margin-left:6px;-webkit-animation-delay:-.9s;animation-delay:-.9s}
.css3-spinner>.css3-spinner-rect5{margin-left:15px;-webkit-animation-delay:-.8s;animation-delay:-.8s}
@-webkit-keyframes stretchdelay{0%,100%,40%{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}
@keyframes stretchdelay{0%,100%,40%{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}
.css3-spinner>.css3-spinner-cube1,.css3-spinner>.css3-spinner-cube2{width:16px;height:16px;border-radius:0;margin-top:-20px;margin-left:-20px;-webkit-animation:cubemove 1.8s infinite ease-in-out;animation:cubemove 1.8s infinite ease-in-out}
.css3-spinner>.css3-spinner-cube2{-webkit-animation-delay:-.9s;animation-delay:-.9s}
@-webkit-keyframes cubemove{25%{-webkit-transform:translateX(42px) rotate(-90deg) scale(.5)}50%{-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{-webkit-transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5)}100%{-webkit-transform:rotate(-360deg)}}
@keyframes cubemove{25%{transform:translateX(42px) rotate(-90deg) scale(.5);-webkit-transform:translateX(42px) rotate(-90deg) scale(.5)}50%{transform:translateX(42px) translateY(42px) rotate(-179deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-179deg)}50.1%{transform:translateX(42px) translateY(42px) rotate(-180deg);-webkit-transform:translateX(42px) translateY(42px) rotate(-180deg)}75%{transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5);-webkit-transform:translateX(0) translateY(42px) rotate(-270deg) scale(.5)}100%{transform:rotate(-360deg);-webkit-transform:rotate(-360deg)}}
.css3-spinner>.css3-spinner-scaler{width:40px;height:40px;margin-top:-20px;margin-left:-20px;-webkit-animation:scaleout 1s infinite ease-in-out;animation:scaleout 1s infinite ease-in-out}
@-webkit-keyframes scaleout{0%{-webkit-transform:scale(0)}100%{-webkit-transform:scale(1);opacity:0}}
@keyframes scaleout{0%{transform:scale(0);-webkit-transform:scale(0)}100%{transform:scale(1);-webkit-transform:scale(1);opacity:0}}
.css3-spinner>.css3-spinner-grid-pulse{width:48px;height:48px;margin-top:-24px;margin-left:-24px;background-color:transparent!important;-webkit-animation:none;animation:none}
.css3-spinner-grid-pulse>div{background-color:#ddd;width:12px;height:12px;border-radius:100%;margin:2px;-webkit-animation-fill-mode:both;animation-fill-mode:both;display:inline-block;float:left;-webkit-animation-name:ball-grid-pulse;animation-name:ball-grid-pulse;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:0;animation-delay:0}
.css3-spinner-grid-pulse>div:nth-child(1){-webkit-animation-delay:.73s;animation-delay:.73s;-webkit-animation-duration:1.3s;animation-duration:1.3s}
.css3-spinner-grid-pulse>div:nth-child(2){-webkit-animation-delay:.32s;animation-delay:.32s;-webkit-animation-duration:1.3s;animation-duration:1.3s}
.css3-spinner-grid-pulse>div:nth-child(3){-webkit-animation-delay:.71s;animation-delay:.71s;-webkit-animation-duration:.88s;animation-duration:.88s}
.css3-spinner-grid-pulse>div:nth-child(4){-webkit-animation-delay:.62s;animation-delay:.62s;-webkit-animation-duration:1.06s;animation-duration:1.06s}
.css3-spinner-grid-pulse>div:nth-child(5){-webkit-animation-delay:.31s;animation-delay:.31s;-webkit-animation-duration:.62s;animation-duration:.62s}
.css3-spinner-grid-pulse>div:nth-child(6){-webkit-animation-delay:-.14s;animation-delay:-.14s;-webkit-animation-duration:1.48s;animation-duration:1.48s}
.css3-spinner-grid-pulse>div:nth-child(7){-webkit-animation-delay:-.1s;animation-delay:-.1s;-webkit-animation-duration:1.47s;animation-duration:1.47s}
.css3-spinner-grid-pulse>div:nth-child(8){-webkit-animation-delay:.4s;animation-delay:.4s;-webkit-animation-duration:1.49s;animation-duration:1.49s}
.css3-spinner-grid-pulse>div:nth-child(9){-webkit-animation-delay:.73s;animation-delay:.73s;-webkit-animation-duration:.7s;animation-duration:.7s}
@-webkit-keyframes ball-grid-pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.5);transform:scale(.5);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}
@keyframes ball-grid-pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(.5);transform:scale(.5);opacity:.7}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}
.css3-spinner>.css3-spinner-clip-rotate{width:33px;height:33px;margin-top:-17px;margin-left:-17px;background-color:transparent!important;-webkit-animation:none;animation:none}
.css3-spinner-clip-rotate>div{border-radius:100%;border:2px solid #ddd;border-bottom-color:transparent!important;height:33px;width:33px;background:0 0!important;-webkit-animation:rotate 1s 0s linear infinite;animation:rotate 1s 0s linear infinite}
@keyframes rotate{0%{-webkit-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}50%{-webkit-transform:rotate(180deg) scale(.6);transform:rotate(180deg) scale(.6)}100%{-webkit-transform:rotate(360deg) scale(1);transform:rotate(360deg) scale(1)}}
.css3-spinner>.css3-spinner-ball-rotate{width:12px;height:12px;margin-top:-6px;margin-left:-6px;background-color:transparent!important;-webkit-animation:ballrotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite;animation:ballrotate 1s 0s cubic-bezier(.7,-.13,.22,.86) infinite}
.css3-spinner-ball-rotate>div{background-color:#ddd;width:12px;height:12px;border-radius:100%;position:relative}
.css3-spinner-ball-rotate>div:nth-child(1),.css3-spinner-ball-rotate>div:nth-child(3){width:12px;height:12px;border-radius:100%;content:"";position:absolute;opacity:.7}
.css3-spinner-ball-rotate>div:nth-child(1){top:0;left:-22px}
.css3-spinner-ball-rotate>div:nth-child(3){top:0;left:22px}
@-webkit-keyframes ballrotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
@keyframes ballrotate{0%{-webkit-transform:rotate(0);transform:rotate(0)}50%{-webkit-transform:rotate(180deg);transform:rotate(180deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}
.css3-spinner>.css3-spinner-zig-zag{background-color:transparent!important;-webkit-transform:translate(-15px,-15px);-ms-transform:translate(-15px,-15px);transform:translate(-15px,-15px);-webkit-animation:none;animation:none}
.css3-spinner-zig-zag>div{background-color:#ddd;width:12px;height:12px;border-radius:100%;position:absolute;margin-left:15px;top:4px;left:-7px;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.css3-spinner-zig-zag>div:first-child{-webkit-animation:ball-zig-deflect 1.5s 0s infinite linear;animation:ball-zig-deflect 1.5s 0s infinite linear}
.css3-spinner-zig-zag>div:last-child{-webkit-animation:ball-zag-deflect 1.5s 0s infinite linear;animation:ball-zag-deflect 1.5s 0s infinite linear}
@-webkit-keyframes ball-zig-deflect{17%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}34%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}50%{-webkit-transform:translate(0,0);transform:translate(0,0)}67%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}84%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
@keyframes ball-zig-deflect{17%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}34%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}50%{-webkit-transform:translate(0,0);transform:translate(0,0)}67%{-webkit-transform:translate(15px,-30px);transform:translate(15px,-30px)}84%{-webkit-transform:translate(-15px,-30px);transform:translate(-15px,-30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
@-webkit-keyframes ball-zag-deflect{17%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}34%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}50%{-webkit-transform:translate(0,0);transform:translate(0,0)}67%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}84%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
@keyframes ball-zag-deflect{17%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}34%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}50%{-webkit-transform:translate(0,0);transform:translate(0,0)}67%{-webkit-transform:translate(-15px,30px);transform:translate(-15px,30px)}84%{-webkit-transform:translate(15px,30px);transform:translate(15px,30px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
.css3-spinner>.css3-spinner-ball-scale-multiple{width:60px;height:60px;margin-left:-30px;margin-top:-30px;background-color:transparent!important;-webkit-animation:none;animation:none}
.css3-spinner-ball-scale-multiple>div{background-color:#ddd;border-radius:100%;position:absolute;left:0;top:0;opacity:0;width:60px;height:60px;-webkit-animation:ball-scale-multiple 1.25s 0s linear infinite;animation:ball-scale-multiple 1.25s 0s linear infinite}
.css3-spinner-ball-scale-multiple>div:nth-child(2){-webkit-animation-delay:-.4s;animation-delay:-.4s}
.css3-spinner-ball-scale-multiple>div:nth-child(3){-webkit-animation-delay:-.2s;animation-delay:-.2s}
@-webkit-keyframes ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}
@keyframes ball-scale-multiple{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0}5%{opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}
.css3-spinner>.css3-spinner-triangle-path{background-color:transparent!important;-webkit-transform:translate(-29.994px,-37.50938px);-ms-transform:translate(-29.994px,-37.50938px);transform:translate(-29.994px,-37.50938px);-webkit-animation:none;animation:none}
.css3-spinner-triangle-path>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;width:10px;height:10px;border-radius:100%;background-color:#ddd}
.css3-spinner-triangle-path>div:nth-child(1){-webkit-animation:ball-triangle-path-1 2s 0s ease-in-out infinite;animation:ball-triangle-path-1 2s 0s ease-in-out infinite}
.css3-spinner-triangle-path>div:nth-child(2){-webkit-animation:ball-triangle-path-2 2s 0s ease-in-out infinite;animation:ball-triangle-path-2 2s 0s ease-in-out infinite}
.css3-spinner-triangle-path>div:nth-child(3){-webkit-animation:ball-triangle-path-3 2s 0s ease-in-out infinite;animation:ball-triangle-path-3 2s 0s ease-in-out infinite}
.css3-spinner-triangle-path>div:nth-of-type(1){top:50px}
.css3-spinner-triangle-path>div:nth-of-type(2){left:25px}
.css3-spinner-triangle-path>div:nth-of-type(3){top:50px;left:50px}
@-webkit-keyframes ball-triangle-path-1{33%{-webkit-transform:translate(25px,-50px);transform:translate(25px,-50px)}66%{-webkit-transform:translate(50px,0);transform:translate(50px,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
@keyframes ball-triangle-path-1{33%{-webkit-transform:translate(25px,-50px);transform:translate(25px,-50px)}66%{-webkit-transform:translate(50px,0);transform:translate(50px,0)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
@-webkit-keyframes ball-triangle-path-2{33%{-webkit-transform:translate(25px,50px);transform:translate(25px,50px)}66%{-webkit-transform:translate(-25px,50px);transform:translate(-25px,50px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
@keyframes ball-triangle-path-2{33%{-webkit-transform:translate(25px,50px);transform:translate(25px,50px)}66%{-webkit-transform:translate(-25px,50px);transform:translate(-25px,50px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
@-webkit-keyframes ball-triangle-path-3{33%{-webkit-transform:translate(-50px,0);transform:translate(-50px,0)}66%{-webkit-transform:translate(-25px,-50px);transform:translate(-25px,-50px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
@keyframes ball-triangle-path-3{33%{-webkit-transform:translate(-50px,0);transform:translate(-50px,0)}66%{-webkit-transform:translate(-25px,-50px);transform:translate(-25px,-50px)}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}
.css3-spinner>.css3-spinner-ball-pulse-sync{width:70px;height:34px;margin-left:-35px;margin-top:-17px;background-color:transparent!important;-webkit-animation:none;animation:none}
.css3-spinner-ball-pulse-sync>div{display:inline-block;background-color:#ddd;width:14px;height:14px;margin:10px 3px 0;border-radius:100%;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.css3-spinner-ball-pulse-sync>div:nth-child(0){-webkit-animation:ball-pulse-sync .7s -.21s infinite ease-in-out;animation:ball-pulse-sync .7s -.21s infinite ease-in-out}
.css3-spinner-ball-pulse-sync>div:nth-child(1){-webkit-animation:ball-pulse-sync .7s -.14s infinite ease-in-out;animation:ball-pulse-sync .7s -.14s infinite ease-in-out}
.css3-spinner-ball-pulse-sync>div:nth-child(2){-webkit-animation:ball-pulse-sync .7s -70ms infinite ease-in-out;animation:ball-pulse-sync .7s -70ms infinite ease-in-out}
.css3-spinner-ball-pulse-sync>div:nth-child(3){-webkit-animation:ball-pulse-sync .7s 0s infinite ease-in-out;animation:ball-pulse-sync .7s 0s infinite ease-in-out}
@-webkit-keyframes ball-pulse-sync{33%{-webkit-transform:translateY(10px);transform:translateY(10px);opacity:.85}66%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:.7}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
@keyframes ball-pulse-sync{33%{-webkit-transform:translateY(10px);transform:translateY(10px);opacity:.85}66%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:.7}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}
.css3-spinner>.css3-spinner-scale-ripple{width:50px;height:50px;margin-left:-25px;margin-top:-25px;background-color:transparent!important;-webkit-animation:none;animation:none}
.css3-spinner-scale-ripple>div{-webkit-animation-fill-mode:both;animation-fill-mode:both;position:absolute;top:0;width:50px;height:50px;border-radius:100%;border:2px solid #ddd;-webkit-animation:ball-scale-ripple-multiple 1.4s 0s infinite cubic-bezier(.21,.53,.56,.8);animation:ball-scale-ripple-multiple 1.4s 0s infinite cubic-bezier(.21,.53,.56,.8)}
.css3-spinner-scale-ripple>div:nth-child(0){-webkit-animation-delay:-.8s;animation-delay:-.8s}
.css3-spinner-scale-ripple>div:nth-child(1){-webkit-animation-delay:-.6s;animation-delay:-.6s}
.css3-spinner-scale-ripple>div:nth-child(2){-webkit-animation-delay:-.4s;animation-delay:-.4s}
.css3-spinner-scale-ripple>div:nth-child(3){-webkit-animation-delay:-.2s;animation-delay:-.2s}
@-webkit-keyframes ball-scale-ripple-multiple{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}
@keyframes ball-scale-ripple-multiple{0%{-webkit-transform:scale(.1);transform:scale(.1);opacity:1}70%{-webkit-transform:scale(1);transform:scale(1);opacity:.7}100%{opacity:0}}
/* Color de los spinners dentro del velo: el acento V3.0 (no el gris #ddd
   de Canvas). clip-rotate es un anillo: su fondo queda transparente y
   solo se tiñe el borde, conservando el lado inferior transparente que
   hace el efecto de giro. */
#cms-preloader .css3-spinner>div,
#cms-preloader .css3-spinner div {
    background-color: var(--cms-preloader-color, var(--v30-acento, #0d6efd)) !important;
}
#cms-preloader .css3-spinner-clip-rotate>div {
    background: transparent !important;
    border-color: var(--cms-preloader-color, var(--v30-acento, #0d6efd)) !important;
    border-bottom-color: transparent !important;
}
/* El spinner de 3 puntos (ball-pulse-sync, el del portal principal) lleva
   los puntos GRISES como en la referencia, no el color del acento: así el
   preloader se ve igual que en el portal principal. Esta regla va después
   de la del acento y la anula solo para este spinner. */
#cms-preloader .css3-spinner-ball-pulse-sync>div {
    background-color: #9ca3af !important;
}
/* (2026-11-09, CORREGIDO) Los contenedores de los spinners (el div exterior
   que agrupa los puntos, barras o anillos) NO llevan color: solo sus hijos
   (los puntos, barras o anillos) se tiñen con el acento. Sin esto, el
   contenedor pintaba un óvalo/fondo magenta detrás de los puntos cuando
   el acento era magenta, y el preloader (fondo blanco) debe mostrar solo
   los puntos, sin nada de color detrás.
   CORRECCIÓN DEL _4: la regla anterior usaba solo la clase
   (#cms-preloader .css3-spinner-ball-pulse-sync, especificidad 1,1,0) y
   la regla del acento (#cms-preloader .css3-spinner>div, 1,1,1) ganaba
   por especificidad aunque fuera antes: el contenedor SEGUÍA magenta.
   Ahora el selector incluye el div y la clase (1,2,1), más específico
   que el del acento, así que el transparente sí manda. */
#cms-preloader .css3-spinner > div.css3-spinner-ball-pulse-sync,
#cms-preloader .css3-spinner > div.css3-spinner-ball-rotate,
#cms-preloader .css3-spinner > div.css3-spinner-ball-scale-multiple,
#cms-preloader .css3-spinner > div.css3-spinner-grid-pulse,
#cms-preloader .css3-spinner > div.css3-spinner-scale-ripple,
#cms-preloader .css3-spinner > div.css3-spinner-triangle-path,
#cms-preloader .css3-spinner > div.css3-spinner-zig-zag {
    background-color: transparent !important;
}

/* Avisos (ruta pagina.php): el .togglec lleva .collapse de Bootstrap 5.
   Sin esta regla, el display:block de Canvas lo dejaría siempre visible. */
.toggle.toggle-bg .togglec.collapse:not(.show) { display: none; }
/* Tabla 85/15 de Avisos (misma pinta que #myTable de Transparencia). */
.uni-tabla-avisos { border-collapse: collapse; width: 100%; border: 1px solid #ddd; font-size: calc(var(--cms-fuente-transp, 1rem) * 0.8); }
.uni-tabla-avisos td { text-align: left; padding: 7px; }
.uni-tabla-avisos a { color: var(--v30-acento, #0d6efd); }