/* =========================================
   1. ESTILOS GENERALES Y FORMULARIOS (FUTURISTA - COLORES MARCA)
   ========================================= */
/* NOTA: Este CSS fuerza fondos oscuros para que el texto blanco sea legible. */

.ruta105-dashboard, .ruta105-login-container {
    max-width: 1000px;
    margin: 30px auto;
    font-family: 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;
    color: #00bdf2; /* Texto claro */
    padding: 0 1px;
}

/* Forzar que todos los títulos dentro del dashboard sean visibles */
.ruta105-dashboard h1,
.ruta105-dashboard h2,
.ruta105-dashboard h3,
.ruta105-dashboard h4 {
    color: #00bdf2 !important;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.8); /* Sombra negra para leer sobre cualquier fondo */
}

/* Formularios (Registro y Login) - Efecto Cristal Oscuro */
.ruta105-form {
    background: rgba(15, 23, 42, 0.85) !important; /* Fondo AZUL OSCURO casi opaco para contraste */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 35px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(255, 255, 255, 0.05);
    max-width: 450px;
    margin: 0 auto;
    border: 1px solid rgba(0, 210, 255, 0.2);
}

.ruta105-form h3 {
    color: #00d2ff !important; /* Título CIAN para resaltar */
    margin-bottom: 25px;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 0 15px rgba(0, 210, 255, 0.4);
    letter-spacing: 1px;
}

/* CORRECCIÓN DE CONTRASTE: las <label> de este formulario (Número de Cédula,
   Nombre Completo, Correo, Whatsapp, Dirección, Contraseña, el checkbox de
   tratamiento de datos, etc.) no tenían color propio, así que heredaban el
   gris oscuro por defecto del tema (Kadence, ~#2d3748) pensado para fondo
   blanco. Sobre el fondo "cristal oscuro" de este formulario (rgba(15,23,42,.85))
   ese gris queda casi invisible (confirmado en /registro-demo/ del subsitio
   de prueba: texto y fondo prácticamente del mismo tono). Esto NO toca la
   posición ni el tamaño de las etiquetas, solo el color. */
.ruta105-form label {
    color: #e0e6ed !important;
}

.ruta105-form input[type="text"],
.ruta105-form input[type="email"],
.ruta105-form input[type="password"],
.ruta105-form input[type="number"],
.ruta105-form select {
    width: 100%;
    padding: 14px 15px;
    margin: 8px 0 20px;
    border: 1px solid rgba(0, 210, 255, 0.3);
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.4) !important; /* Fondo NEGRO translúcido para inputs */
    color: #fff !important; /* Texto BLANCO forzado */
    transition: all 0.3s;
    caret-color: #00d2ff;
}

.ruta105-form input:focus,
.ruta105-form select:focus {
    background: rgba(0, 0, 0, 0.6) !important;
    border-color: #00d2ff;
    outline: none;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.3);
}

/* Botones Futuristas */
.ruta105-form input[type="submit"] {
    width: 100%;
    background: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%);
    color: white;
    padding: 14px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s;
    box-shadow: 0 5px 15px rgba(0, 210, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ruta105-form input[type="submit"]:hover {
    background: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 210, 255, 0.5);
}

/* =========================================
   2. PANEL DE USUARIO (DASHBOARD FUTURISTA)
   ========================================= */
.perfil-header {
    /* Fondo Oscuro Reforzado */
    background: rgba(10, 20, 35, 0.8) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 30px 20px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    margin-bottom: 30px;
    border: 1px solid rgba(0, 210, 255, 0.15);
    color: #fff !important; /* Forzar texto blanco */
}

.avatar-ruta105 {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #00d2ff;
    box-shadow: 0 0 20px rgba(0, 210, 255, 0.4);
    margin: 0 auto 15px auto; /* Centrado forzado (por si el tema pone los <img> en display:block) */
    display: block;
    background-color: #000; /* Fondo negro por si la imagen es transparente */
}

.puntos-badge {
    display: inline-block;
    background: linear-gradient(45deg, #b4d300, #fcd802);
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    padding: 8px 22px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 14px;
    margin: 12px 0;
    box-shadow: 0 5px 15px rgba(252, 216, 2, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Link de afiliado box */
.link-box { margin-top: 25px; }
.input-group { display: flex; justify-content: center; gap: 10px; margin-top: 15px; max-width: 550px; margin-left: auto; margin-right: auto; }

.input-group input {
    padding: 12px 15px;
    border: 1px solid rgba(0, 210, 255, 0.3);
    width: 70%;
    text-align: center;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.5) !important; /* Fondo negro */
    color: #00d2ff !important; /* Texto neón */
    font-family: monospace;
    font-weight: bold;
}

.input-group button {
    padding: 12px 25px;
    background: linear-gradient(135deg, #00d2ff, #3a7bd5);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0, 210, 255, 0.2);
    transition: all 0.3s;
}

/* Barra de Progreso y Recuadros de Información */
.meta-container {
    background: rgba(15, 25, 40, 0.9) !important;
    backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(0, 210, 255, 0.15);
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    color: #fff !important; /* Texto forzado a blanco */
}
.barra-fondo {
    background: rgba(255, 255, 255, 0.1) !important;
    height: 14px !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 5px rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.barra-progreso {
    background: linear-gradient(90deg, #b4d300, #60efff) !important;
    border-radius: 10px;
    transition: width 1s ease-in-out;
    box-shadow: 0 0 15px rgba(180, 211, 0, 0.5);
    position: relative;
    overflow: hidden;
}
.barra-progreso::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 2s infinite;
}
@keyframes shimmer { 100% { left: 100%; } }

/* =========================================
   3. ÁRBOL DE AFILIADOS (SOLUCIÓN DEFINITIVA: SOLO WHATSAPP)
   ========================================= */
.arbol-container {
    position: relative; /* ancla el <canvas> de partículas (ver más abajo) */
    overflow-x: auto;
    overflow-y: hidden;
    padding: 60px 10px;
    /* MEJORA "MÁS SOFISTICADO": en vez de un fondo estático plano, se
       superponen 3 resplandores de color de marca (cian, verde, amarillo)
       sobre el mismo fondo oscuro radial de siempre, y se animan muy
       lentamente (18s) tipo "nebulosa" para dar sensación de vida sin
       distraer de los nodos. Es solo fondo (background), no afecta layout,
       clics ni el resto del árbol.
       CAMBIO PEDIDO POR EL USUARIO: la última capa (antes un radial oscuro
       parejo en todo el contenedor) ahora es un degradado LINEAL de arriba
       hacia abajo, de más oscuro a más claro, para poder ver las partículas
       (ver .r105-arbol-canvas-particulas) recorriendo ese degradado. Las 3
       capas de resplandores de color y la animación "nebulosa" se dejan
       intactas, tal como estaban. */
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 210, 255, 0.16), transparent 42%),
        radial-gradient(circle at 85% 25%, rgba(180, 211, 0, 0.13), transparent 40%),
        radial-gradient(circle at 50% 95%, rgba(252, 216, 2, 0.10), transparent 45%),
        linear-gradient(180deg, #050b1a 0%, #0f2744 28%, #1c4a70 52%, #6fa8c9 78%, #eaf4fb 100%) !important;
    background-size: 200% 200%, 200% 200%, 200% 200%, 100% 100%;
    background-position: 0% 50%, 100% 50%, 50% 100%, center;
    animation: r105-nebula 22s ease-in-out infinite;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 30px;
    border: 1px solid rgba(0, 210, 255, 0.2);
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.7);
}
.arbol-container:active { cursor: grabbing; }
@keyframes r105-nebula {
    0%, 100% { background-position: 0% 50%, 100% 50%, 50% 100%, center; }
    50% { background-position: 30% 65%, 70% 40%, 55% 80%, center; }
}
@media (prefers-reduced-motion: reduce) {
    .arbol-container { animation: none; }
}

.arbol-container::-webkit-scrollbar { height: 8px; }
.arbol-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.5); border-radius: 5px; }
.arbol-container::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #3a7bd5, #00d2ff); border-radius: 5px; }

/* Partículas de fondo (efecto parallax) del Árbol — puramente decorativo:
   va detrás de los nodos (z-index más bajo que .tree) y no captura clics ni
   el arrastre horizontal del contenedor (pointer-events:none), así que no
   interfiere en nada de lo que ya funcionaba. El JS que la dibuja está en
   ruta105_arbol_imprimir_script_particulas() (includes/admin.php). */
.r105-arbol-canvas-particulas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 0;
}

.tree { display: inline-block; min-width: 100%; position: relative; z-index: 1; }
.tree ul {
    padding-top: 20px;
    position: relative;
    transition: all 0.5s;
    display: flex;
    justify-content: center;
    white-space: nowrap;
}

/* REDUCCIÓN DE ESPACIOS EN LA RED */
.tree li {
    float: left;
    text-align: center;
    list-style-type: none;
    position: relative;
    padding: 10px 2px;
    transition: all 0.5s;
    min-width: 80px;
    min-height: 80px;
}

/* Conectores */
.tree li::before, .tree li::after {
    content: ''; position: absolute; top: 0; right: 50%;
    border-top: 1px solid #00d2ff;
    width: 50%; height: 15px;
    box-shadow: 0 -1px 3px rgba(0, 210, 255, 0.3);
}
.tree li::after {
    right: auto; left: 50%;
    border-left: 1px solid #00d2ff;
    box-shadow: -1px 0 3px rgba(0, 210, 255, 0.3);
}
.tree li:only-child::after, .tree li:only-child::before { display: none; }
.tree li:only-child { padding-top: 0; }
.tree li:first-child::before, .tree li:last-child::after { border: 0 none; box-shadow: none; }
.tree li:last-child::before {
    border-right: 1px solid #00d2ff;
    border-radius: 0 10px 0 0;
    box-shadow: 1px -1px 3px rgba(0, 210, 255, 0.3);
}
.tree li:first-child::after {
    border-radius: 10px 0 0 0;
    box-shadow: -1px -1px 3px rgba(0, 210, 255, 0.3);
}
.tree ul ul::before {
    content: ''; position: absolute; top: 0; left: 50%;
    border-left: 1px solid #00d2ff;
    width: 0; height: 15px;
    box-shadow: 0 0 5px rgba(0, 210, 255, 0.4);
}

/* --- ESTADO NORMAL: ESFERA FLOTANTE ---
   MEJORA "MÁS SOFISTICADO" (pedida por el usuario): cada nodo ya era un
   círculo, pero estático. Ahora es una "esfera" con más profundidad (brillo
   superior + sombra proyectada, como si flotara sobre el fondo) y una
   animación de flotación suave e infinita (sube/baja unos pocos píxeles),
   ligeramente distinta por nodo (ver los ::nth-child de abajo) para que no
   se vea todo el árbol moviéndose "en bloque" y sí como algo más orgánico.
   Se anima "transform: translateY()" — por eso el hover de abajo evita
   tocar también "transform", para no pelear por la misma propiedad (ver
   nota en ese bloque). */
.node-content {
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.35), transparent 55%),
        rgba(15, 23, 42, 0.4) !important;
    backdrop-filter: blur(5px);
    border: 2px solid #00d2ff;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.25), 0 14px 16px -10px rgba(0, 0, 0, 0.6);

    width: 60px;
    height: 60px;

    /* Centrado imagen */
    display: block !important;
    padding: 0 !important;
    margin: 0 auto;
    /* overflow:hidden — vuelve a como estaba (probado y funcionando). El
       primer intento del aro giratorio necesitaba overflow:visible para
       asomar fuera del círculo, pero eso rompió el hover en el sitio real
       (se veía una bola gigante sin nombre/WhatsApp, con superposición
       rara) — confirmado con los 2 videos que mandó el usuario. El aro
       ahora se rediseñó para vivir SIEMPRE adentro del círculo (ver
       .node-content::before más abajo), así que ya no hace falta abrir el
       overflow ni tocar el resto del hover, que queda intacto. */
    overflow: hidden;
    box-sizing: border-box;

    position: relative;
    z-index: 10;
    /* SEGUNDA CAUSA DEL "TITILA COMO LOCO" (la primera fue el "top:50%" de
       más abajo). Esta se probó con Playwright moviendo el mouse de verdad
       (no forzando :hover) y quedó clarísima: mientras el ancho/alto del
       círculo estaban animados aquí con transición de 0.3s (con rebote
       "cubic-bezier(...,1.275)", que se pasa de 150px y luego vuelve), el
       :hover de abajo reposiciona el círculo con un margen FIJO (-75px, la
       mitad de 150px). Durante esos 0.3s el tamaño real todavía no es
       150px (está creciendo o rebotando), así que el margen fijo ya no
       corresponde al tamaño real del momento y el círculo queda pintado
       ligeramente corrido del punto donde está el mouse. Ese corrimiento
       saca al cursor de encima del círculo → se apaga el :hover → el
       círculo vuelve a 60px → el cursor vuelve a quedar encima → se
       enciende otra vez → vuelve a crecer con el mismo desfase... y así en
       bucle, sin parar, mientras el mouse siga quieto encima. Se confirmó
       en pruebas automatizadas que CUALQUIER transición en width/height
       (incluso una corta y sin rebote) reproduce el mismo parpadeo, y que
       quitándola del todo el hover queda 100% estable. Por eso el
       ancho/alto ahora cambian de una vez (sin transición) al entrar o
       salir del hover; el color del borde y la sombra (box-shadow,
       border-color) sí se mantienen animados porque esos no afectan el
       tamaño ni la posición del círculo, así que no interfieren con nada. */
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.node-content img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 0;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    border: none !important;
    transition: opacity 0.25s ease, filter 0.25s ease;
}

/* Ocultar datos por defecto.
   NOTA (aro giratorio): ".acciones-nodo" tiene más abajo otra regla general
   ("--- BOTONES DE ACCIÓN ---", display:flex, para el WhatsApp) con la
   MISMA especificidad que esta — antes ganaba en el cascade por ir después
   en el archivo, y el botón quedaba "oculto" solo porque overflow:hidden
   del contenedor lo recortaba. Al liberar overflow:visible (para que el aro
   pueda asomar) ese error de cascada se hizo visible: el WhatsApp aparecía
   siempre, fuera del círculo. Se corrige subiendo la especificidad aquí
   (".tree .acciones-nodo") para que esta regla gane siempre en reposo,
   sin usar !important (que taparía también la revelación en :hover). */
.nombre-nodo,
.localidad-nodo,
.acciones-nodo,
.tree .nombre-nodo,
.tree .localidad-nodo,
.tree .acciones-nodo {
    display: none;
}

/* --- ESTADO INTERACTIVO: HOVER / TOUCH ---
   CLONADO A PEDIDO DEL USUARIO del video/código de referencia que mandó
   (otro proyecto suyo, namespace .olalibertaria-*): la foto crece y sigue
   circular (sin deformarse en tarjeta), y el nombre + la localidad
   aparecen como una "píldora" flotando DEBAJO del círculo, con el ícono de
   WhatsApp como una insignia circular en la esquina — en vez del texto
   centrado ENCIMA de la foto oscurecida que teníamos antes. La foto ya NO
   se oscurece ni se difumina: solo hace zoom, igual que en la referencia. */
.node-content:hover {
    /* Esfera ampliada (sigue siendo círculo) */
    width: 150px;
    height: 150px;
    border-radius: 50%;

    border-color: #fcd802;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.75), 0 0 26px rgba(252, 216, 2, 0.45);
    /* overflow:visible — a propósito, distinto de la esfera en reposo: acá
       SÍ hace falta, porque la píldora de nombre/localidad y la insignia de
       WhatsApp (clonadas de la referencia) se dibujan fuera del propio
       círculo (abajo y a la esquina). En reposo esos elementos siguen
       display:none, así que overflow:hidden ahí no se toca — el riesgo que
       rompió el hover la vez pasada (una esfera que además cambiaba de
       ancho/alto con overflow visible) no aplica aquí: este círculo de
       150px ya no cambia de tamaño mientras está en hover, solo aparecen
       elementos nuevos alrededor con posición fija. */
    overflow: visible;

    position: absolute;
    /* CORRECCIÓN "TITILA COMO LOCO" (reportado en vivo con video, nodo con
       referidos debajo): "top:50%" centraba el círculo ampliado sobre el
       CENTRO DEL <li>, no sobre el centro real del nodo — y en este árbol
       el <li> de cualquier nodo con hijos también contiene, debajo del
       propio círculo, el toggle "Ver Red" y el <ul> con TODA esa sub-red
       (puede medir cientos de píxeles). Eso hacía que el <li> fuera mucho
       más alto que el nodo, así que su "centro" quedaba muy por debajo del
       círculo real. Resultado: al pasar el mouse, el círculo ampliado
       "saltaba" hacia abajo, el cursor quedaba fuera de él, el hover se
       apagaba, el círculo volvía a su sitio, el cursor volvía a estar
       encima → se prendía de nuevo → parpadeo infinito. Con un nodo sin
       hijos (li más bajito) el salto era pequeño y casi no se notaba, por
       eso pasó la primera revisión visual.
       Arreglo: en vez de "50%" (que depende de la altura variable del
       <li>), se usa un valor fijo en píxeles = la posición vertical REAL
       del centro del círculo en reposo dentro del <li> (padding-top:10px
       + la mitad de sus 60px = 40px), que NO cambia sin importar cuántos
       referidos tenga debajo. Así el círculo ampliado siempre se centra
       exactamente donde estaba el círculo original, sin importar el
       tamaño de la sub-red. (Horizontal "left:50%" sí se deja igual: el
       padding izquierdo/derecho del <li> es simétrico y el nodo ya se
       centra ahí con "margin:0 auto", así que ese centrado siempre fue
       correcto y no participaba del parpadeo.) */
    top: 40px;
    left: 50%;
    margin: -75px 0 0 -75px; /* centra el círculo ampliado sobre el punto original, sin usar transform */
    animation-play-state: paused; /* congela la flotación mientras está en hover, para un zoom estable */
    z-index: 999;
}

/* Caso especial: el <li> que es hijo único de su <ul> (ej. el nodo raíz
   cuando solo hay un candidato principal, o cualquier líder cuyo único
   referido aún no tiene más gente debajo) tiene "padding-top:0" en vez de
   10px (ver ".tree li:only-child" más arriba, ya existía antes de este
   arreglo) — así que el centro real del círculo ahí es 30px, no 40px. Sin
   esto, ese caso puntual seguiría titilando igual que el resto. */
.tree li:only-child .node-content:hover {
    top: 30px;
}

.node-content:hover img {
    /* La foto ya no se recorta con el overflow del contenedor (visible
       arriba), así que se recorta con su propio border-radius. */
    border-radius: 50%;
}

.node-content:hover .nombre-nodo,
.node-content:hover .localidad-nodo,
.node-content:hover .acciones-nodo {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Texto: nombre flotando como "píldora" debajo del círculo — clonado de la
   referencia (posición fija con transform, nunca cambia de tamaño, por eso
   no pelea con nada más). */
.nombre-nodo {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 14px);
    background: #0b0b0d;
    border: 1px solid #00d2ff;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.4);
    font-weight: 700;
    font-size: 13px;
    color: #fff !important;
    padding: 4px 14px;
    border-radius: 999px;
    white-space: nowrap;
    line-height: 1.2;
    text-shadow: none;
    z-index: 15;
}

.localidad-nodo {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 40px);
    font-size: 11px;
    color: #00d2ff !important;
    font-weight: 600;
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 15;
}

/* --- BOTONES DE ACCIÓN (SOLO WHATSAPP) ---
   Clonado de la referencia: insignia circular flotando en la esquina
   inferior derecha del círculo (no centrada dentro), con posición fija
   vía transform (no cambia de tamaño, no pelea con nada). */
.acciones-nodo {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(30px, 30px);
    width: auto;
    z-index: 16;
}

.btn-wsp-tree {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center; text-decoration: none;
    box-shadow: 0 3px 8px rgba(0,0,0,0.5);
    transition: transform 0.2s;
    margin: 0 !important;
}

.btn-wsp-tree:hover {
    transform: scale(1.1);
}

/* OCULTAR BOTÓN MENSAJE INTERNO */
.btn-msg-tree {
    display: none !important;
}

/* Nodo Padre */
.node-content.padre {
    border-color: #fcd802;
    box-shadow: 0 0 20px rgba(252, 216, 2, 0.3);
}

.node-empty {
    color: #94a3b8;
    font-style: italic;
    font-size: 10px;
    border: 1px dashed rgba(0, 210, 255, 0.3);
    padding: 10px;
    border-radius: 50%;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    margin: 0 auto;
}

/* =========================================
   3B. ÁRBOL SOFISTICADO: RANGOS DE LÍDER + TOGGLE "VER RED"
   ========================================= */

/* Toggle "Ver Red (N)" reestilizado como pill futurista, en vez del
   <details>/<summary> nativo del navegador. */
.red-toggle summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 10px auto 0;
    padding: 6px 14px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(0, 210, 255, 0.35);
    border-radius: 20px;
    color: #00d2ff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
    width: fit-content;
}
.red-toggle summary::-webkit-details-marker { display: none; }
.red-toggle summary::marker { content: ""; }
.red-toggle summary:hover {
    background: rgba(0, 210, 255, 0.15);
    box-shadow: 0 0 12px rgba(0, 210, 255, 0.35);
    border-color: #00d2ff;
}
.red-toggle-icon {
    display: inline-block;
    transition: transform 0.25s ease;
    font-size: 10px;
}
.red-toggle[open] > summary .red-toggle-icon { transform: rotate(90deg); }
.red-toggle-count {
    background: linear-gradient(135deg, #00d2ff, #3a7bd5);
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 10px;
}
.red-toggle > ul { animation: fadeIn 0.35s ease; }

/* Rangos visuales del líder según cantidad de referidos directos */
.node-content.rank-bronce { border-color: #cd7f32; box-shadow: 0 0 15px rgba(205, 127, 50, 0.45); }
.node-content.rank-plata { border-color: #c0c0c0; box-shadow: 0 0 15px rgba(192, 192, 192, 0.5); }
.node-content.rank-oro {
    border-color: #ffd700;
    animation: r105-glow-oro 2.6s ease-in-out infinite;
}
.node-content.rank-oro::after {
    content: '★';
    position: absolute;
    top: -8px; right: -4px;
    background: #ffd700;
    color: #1a1300;
    width: 18px; height: 18px;
    border-radius: 50%;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    z-index: 20;
}
/* MEJORA "MÁS SOFISTICADO": el rango oro (líderes con 10+ referidos
   directos) ahora "respira" con un resplandor pulsante suave en vez de un
   glow fijo, para que destaque como el rango máximo de un vistazo. En
   hover, la tarjeta expandida ya tiene su propio box-shadow (con
   !important, para ganarle a esta animación mientras siga corriendo) y se
   respeta "reduced motion". */
@keyframes r105-glow-oro {
    0%, 100% { box-shadow: 0 0 14px rgba(255, 215, 0, 0.45); }
    50% { box-shadow: 0 0 26px rgba(255, 215, 0, 0.85); }
}
.node-content.rank-oro:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(252, 216, 2, 0.4) !important;
}
@media (prefers-reduced-motion: reduce) {
    .node-content.rank-oro { animation: none; box-shadow: 0 0 18px rgba(255, 215, 0, 0.6); }
}

/* MEJORA "MÁS SOFISTICADO": cada nodo aparece con un fade-in suave al
   cargar la página, y luego queda "flotando" indefinidamente (sube/baja
   unos pocos píxeles, como una burbuja) — la parte de "esferas flotantes"
   que pidió el usuario. Son 2 animaciones independientes en propiedades
   distintas para que nunca compitan entre sí: r105-node-in solo toca
   "opacity" (se ejecuta una vez, al entrar) y r105-sphere-float solo toca
   "transform: translateY()" (en bucle infinito). El hover (arriba) crece
   con width/height en vez de transform, así que tampoco compite con la
   flotación — y además la pausa mientras el cursor está encima
   (animation-play-state: paused en :hover), para un zoom estable. Los
   ::nth-child dan a cada esfera una duración/retraso ligeramente distinto,
   para que el árbol entero no "respire" todo al mismo tiempo. */
@keyframes r105-node-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes r105-sphere-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
.tree .node-content {
    animation-name: r105-node-in, r105-sphere-float;
    animation-duration: 0.5s, 5.2s;
    animation-timing-function: ease-out, ease-in-out;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: both, none;
    animation-delay: 0s, 0.3s;
}
.tree li:nth-child(3n+2) .node-content { animation-duration: 0.5s, 4.4s; animation-delay: 0s, 0.9s; }
.tree li:nth-child(3n+3) .node-content { animation-duration: 0.5s, 6s; animation-delay: 0s, 1.6s; }
.tree li:nth-child(5n+1) .node-content { animation-duration: 0.5s, 4.8s; }

/* APORTE DEL USUARIO: aro punteado girando en el borde interior de cada
   esfera, sumado al flotado que ya existía. Viene de un diseño de
   referencia que el usuario compartió solo como muestra de la animación de
   giro (ese CSS no se guardó ni se mezcló con este archivo — únicamente se
   adaptó el giro en sí, @keyframes r105-ring-spin, al estilo/tamaños de
   este árbol).
   CORRECCIÓN IMPORTANTE (según los 2 videos que mandó el usuario probando
   en su sitio real): el primer intento hacía que el aro sobresaliera del
   círculo (76px de aro sobre un nodo de 60px), y para eso .node-content
   había pasado de overflow:hidden a overflow:visible — eso fue lo que
   rompió el hover en producción (aparecía una bola gigante sin nombre ni
   WhatsApp, con superposiciones raras). Ahora el aro vive SIEMPRE adentro
   del círculo: "inset:5px" lo ajusta automáticamente al tamaño real del
   nodo en cada instante (incluido el zoom del hover, que lo agranda solo,
   sin ninguna regla aparte), así que nunca necesita salirse — por eso
   .node-content y su :hover pudieron volver a overflow:hidden tal como
   estaban antes, cuando el hover ya se había probado y funcionaba bien. */
.node-content::before {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 1px dashed rgba(0, 210, 255, 0.65);
    opacity: 0.9;
    pointer-events: none;
    animation: r105-ring-spin 6s linear infinite;
}
.node-content.rank-oro::before { border-color: rgba(255, 215, 0, 0.7); }
.node-content.rank-plata::before { border-color: rgba(220, 220, 220, 0.7); }
.node-content.rank-bronce::before { border-color: rgba(222, 152, 84, 0.7); }

@keyframes r105-ring-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tree .node-content { animation: none; }
    .node-content::before { animation: none; }
}

/* =========================================
   4. LISTADOS Y TABLAS (CONTRASTE CORREGIDO)
   ========================================= */
/* CORRECCIÓN DE CONTRASTE: este título vivía forzado en blanco (pensado
   para sentarse sobre una tarjeta oscura), pero en el panel real esta
   sección NO tiene tarjeta oscura detrás: queda directo sobre el fondo
   claro de la página del tema, así que el texto blanco quedaba
   prácticamente invisible (confirmado en /panel-demo/ del subsitio de
   prueba). Se cambia a azul institucional oscuro, el mismo tono ya usado
   en el resto del sitio para texto sobre fondos claros. */
.lista-referidos h3 {
    color: #003366 !important;
    margin-bottom: 20px;
    border-left: 4px solid #00d2ff;
    padding-left: 15px;
    text-shadow: none;
}
/* El texto "No hay datos." (y cualquier párrafo de este bloque) hereda por
   defecto el cian claro de .ruta105-dashboard, pensado también para fondo
   oscuro; sobre el fondo claro de la página queda con muy poco contraste. */
.lista-referidos p {
    color: #45536b;
}
.table-responsive {
    overflow-x: auto;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    border: 1px solid rgba(0, 210, 255, 0.1);
    background: rgba(0, 0, 0, 0.4); /* Fondo oscuro contenedor */
}
/* CORRECCIÓN IMPORTANTE: estas reglas de tabla "cristal oscuro" iban SIN
   ningún selector que las limitara (table, th, td a secas), y este style.css
   se carga también dentro de wp-admin (soycandidatosoft.php lo engancha en
   admin_enqueue_scripts). Resultado: se colaban en las tablas nativas de
   WordPress del propio plugin — "Gestión" (listado de usuarios) y
   "E-14 (Testigos)" (detalle de mesas reportadas) — forzando texto blanco
   sobre un fondo apenas gris (negro al 20% sobre el blanco de wp-admin), es
   decir, texto casi invisible. Confirmado inspeccionando el color/fondo
   computado real de esas tablas en wp-admin. Se limitan aquí a
   ".table-responsive" (el contenedor que SÍ usa el panel del candidato para
   su tabla de Patriotas), así las tablas de wp-admin quedan con el estilo
   normal de WordPress (texto oscuro legible) sin tocar su HTML. */
.table-responsive table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    /* CORRECCIÓN: Fondo transparente para quitar el blanco del tema */
    background-color: transparent !important;
    color: #fff !important;
}
.table-responsive th {
    /* Fondo azul oscuro sólido para cabecera */
    background-color: rgba(10, 25, 45, 0.9) !important;
    color: #00d2ff !important; /* Texto Cyan */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 18px;
    border-bottom: 2px solid rgba(0, 210, 255, 0.3);
}
.table-responsive td {
    padding: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
    color: #fff !important; /* Texto blanco forzado */
    background-color: rgba(0, 0, 0, 0.2) !important; /* Fondo fila oscuro */
}
.table-responsive tr:last-child td { border-bottom: none; }
.table-responsive tr:hover td {
    background-color: rgba(0, 210, 255, 0.1) !important; /* Hover visible */
    color: #fff !important;
}

/* =========================================
   5. MODALES FUTURISTAS
   ========================================= */
.modal-mensaje {
    position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Overlay muy oscuro */
    backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
}
.modal-content {
    background: rgba(15, 23, 42, 0.95) !important; /* Fondo modal opaco */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    margin: 0; padding: 25px; width: 90%; max-width: 500px;
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.6), inset 0 0 20px rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 210, 255, 0.2);
    position: relative;
    animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    color: #00bdf2 !important;
}
@keyframes slideUp { from { transform: translateY(50px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }

/* CORRECCIÓN DE CONTRASTE: dentro de los modales (fondo oscuro) a veces hay
   recuadros con fondo claro insertados a propósito (aviso de aceptar
   términos, estado "N/A" del puesto de votación). Esos recuadros heredaban
   el cian claro de .modal-content, pensado para el fondo oscuro del modal,
   así que sobre su propio fondo claro perdían contraste. Se fuerza un azul
   oscuro legible solo dentro de esos recuadros claros. */
.modal-content [style*="e3f2fd"],
.modal-content [style*="f5f5f5"] {
    color: #003366 !important;
}
.modal-content [style*="e3f2fd"] small,
.modal-content [style*="f5f5f5"] small,
.modal-content [style*="e3f2fd"] p,
.modal-content [style*="f5f5f5"] p {
    color: #45536b !important;
}
/* Algunos textos dentro de estos recuadros claros traen su propio color en
   línea (ej. el H4 "Información No Disponible (N/A)" trae color:#00bdf2
   en panel.php, pensado para el fondo oscuro general del modal). Como el
   estilo en línea gana sobre una regla externa normal, se necesita este
   !important apuntando directo al elemento para corregirlo también. */
.modal-content [style*="f5f5f5"] h4 {
    color: #003366 !important;
}

.close {
    position: absolute;
    right: 20px;
    top: 15px;
    color: #94a3b8;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    z-index: 100;
    line-height: 1;
}
.close:hover { color: #00d2ff; transform: scale(1.2) rotate(90deg); text-shadow: 0 0 10px rgba(0,210,255,0.8); }

.modal-chat-body { height: 480px; display: flex; flex-direction: column; padding: 5px; background: transparent; }
.chat-area-visual {
    flex: 1;
    background: rgba(0, 0, 0, 0.3) !important; /* Fondo chat */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px; overflow-y: auto; margin-bottom: 15px;
    display: flex; flex-direction: column; gap: 12px;
}

.burbuja-chat {
    padding: 12px 18px;
    border-radius: 20px;
    font-size: 14px;
    line-height: 1.4;
    max-width: 75%;
    position: relative;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
    color: #fff !important;
}
.msj-mio {
    align-self: flex-end;
    background: linear-gradient(135deg, #00b09b, #b4d300);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.msj-otro {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.15); /* Fondo más visible */
    color: #fff;
    border-bottom-left-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.hora-msj { font-size: 10px; color: rgba(255,255,255,0.7); text-align: right; margin-top: 5px; display: block; }

.chat-controls { display: flex; gap: 12px; padding-top: 5px; }
.chat-controls textarea {
    height: 50px;
    border-radius: 25px;
    padding: 14px 20px;
    border: 1px solid rgba(0, 210, 255, 0.3);
    resize: none; width: 100%;
    background: rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
    caret-color: #00d2ff;
}
.chat-controls textarea:focus { outline: none; border-color: #00d2ff; box-shadow: 0 0 15px rgba(0, 210, 255, 0.2); }
.chat-controls button {
    width: 50px; height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #00d2ff, #3a7bd5);
    color: white; border: none; display: flex; align-items: center; justify-content: center;
    font-size: 20px; box-shadow: 0 5px 15px rgba(0, 210, 255, 0.3); cursor: pointer;
    transition: all 0.3s;
}
.chat-controls button:hover { transform: scale(1.1); box-shadow: 0 8px 25px rgba(0, 210, 255, 0.5); }

/* Bandeja de Mensajes */
.mensaje-item {
    background: rgba(20, 30, 50, 0.9) !important; /* Fondo oscuro sólido */
    backdrop-filter: blur(5px);
    border-left: 5px solid rgba(255, 255, 255, 0.2);
    padding: 18px; margin-bottom: 12px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: #fff !important;
}
.mensaje-item:hover { transform: translateX(5px); background: rgba(30, 45, 70, 0.9) !important; border-left-color: #00d2ff; }
.msg-no-leido {
    border-left-color: #b4d300; /* Verde */
    background: linear-gradient(90deg, rgba(180, 211, 0, 0.1), rgba(20, 30, 50, 0.9)) !important;
    box-shadow: 0 5px 15px rgba(180, 211, 0, 0.2);
}

/* Botones Top Bar */
.dashboard-top-bar button, .dashboard-top-bar a {
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: all 0.3s;
    margin-bottom: 5px;
    border-radius: 8px;
    letter-spacing: 0.5px;
}
.dashboard-top-bar button:hover, .dashboard-top-bar a:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 210, 255, 0.3);
}

/* =========================================
   6. CORRECCIONES ESPECÍFICAS (INFORMES Y E14)
   ========================================= */

/* Título: Panel administrativo E14 en vivo -> AMARILLO */
.titulo-e14-vivo,
h1.titulo-e14-vivo,
h2.titulo-e14-vivo {
    color: #fcd802 !important;
    text-shadow: 0 0 20px rgba(252, 216, 2, 0.6);
    border-bottom: 2px solid #fcd802;
    display: inline-block;
    padding-bottom: 5px;
}

/* Títulos de Informes, Gráficas, Mapas y Datos de Logística -> AZUL OSCURO */
/* Se aplica a los recuadros blancos que mencionas */
.titulo-azul-oscuro,
.reporte-box h3,
.grafica-box h3,
.mapa-box h3,
.instrucciones-logistica {
    color: #003366 !important; /* Azul oscuro corporativo */
    text-shadow: none !important; /* Sin brillo neón para leer sobre blanco */
    font-weight: 800;
    letter-spacing: 0.5px;
}

/* Texto específico de instrucciones de carga (Cédula, Puesto, etc.) */
.texto-instrucciones {
    color: #003366 !important;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.9); /* Fondo blanco suave por si acaso */
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    display: inline-block;
    margin-top: 10px;
}

/* =========================================
   7. MAPA DE UBICACIONES (Informes): pin con foto + anillo titilando
   Amarillo = Dirección de Registro | Azul = Mesa de Votación
   ========================================= */
.person-pin {
    position: absolute;
    cursor: pointer;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    z-index: 15;
}
.person-pin-ring {
    position: absolute;
    top: 0; left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.person-pin.ring-amarillo .person-pin-ring {
    border: 2px solid #ffd700;
    animation: pulse-pin-amarillo 1.8s infinite;
}
.person-pin.ring-azul .person-pin-ring {
    border: 2px solid #2196f3;
    animation: pulse-pin-azul 1.8s infinite;
}
@keyframes pulse-pin-amarillo {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(255, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}
@keyframes pulse-pin-azul {
    0% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(33, 150, 243, 0); }
    100% { box-shadow: 0 0 0 0 rgba(33, 150, 243, 0); }
}
.person-pin img {
    position: absolute;
    top: 2px; left: 2px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    z-index: 2;
}

/* =========================================
   8. AUTOCOMPLETADO DE GOOGLE (Places) POR ENCIMA DE MODALES
   El listado de sugerencias de Google (.pac-container) se agrega directo
   al <body>, así que si no forzamos su z-index queda TAPADO detrás de
   cualquier modal (como el de "Editar Datos" en el panel), porque los
   modales usan z-index: 9999.
   ========================================= */
.pac-container {
    z-index: 999999 !important;
}

/* =========================================
   9. TABLA DE PLANES (Ultimate Multisite — shortcode [wu_pricing_table])
   Esta tabla la pinta el plugin "Ultimate Multisite" en la página /planes/,
   NO este plugin. Por eso aquí no se toca ningún archivo de Ultimate
   Multisite: solo se afinan sus propias clases wu-* para que respeten el
   layout y la marca SoyCandidato.co. El texto de los botones se normaliza
   aparte, vía JS, en soycandidatosoft.php (sección 6).
   ========================================= */

/* Evita que etiquetas largas (ej. "Unlimited Floating Elements") desborden
   su celda y descuadren toda la fila de comparación. */
.wu-plan li,
.wu-plan .wu-cta {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word;
    line-height: 1.4;
}

/* Fuerza que cada tarjeta de plan sea una columna vertical estable, por si
   el tema hereda un `display` distinto para listas o para el propio plan. */
.wu-plan.wu-flex-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
.wu-plan ul {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.wu-plan ul li {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: center;
}

/* Solo se deja visible el título del plan, el precio/descripción y el
   botón "Seleccionar Plan". Ultimate Multisite agrega automáticamente una
   línea (<li>) por cada característica del plan (Setup Fee, Entradas,
   Páginas, Medios, Floating Elements, Disk Space, Visits, etc.) dentro de
   ese mismo <ul>; en vez de borrarlas una por una, se ocultan todas las
   <li> del listado excepto la que contiene el botón (.wu-cta). El título y
   la descripción no están dentro de este <ul>, así que no se ven afectados. */
.wu-plan ul > li:not(.wu-cta) {
    display: none !important;
}

/* Estilo de marca para el botón "Seleccionar Plan" / "Obtener Gratis",
   reutilizando las variables CSS propias de Ultimate Multisite
   (checkout.css) en vez de sobrescribir sus reglas a la fuerza. */
.wu-styling {
    --wu-submit-bg: #b4d300;       /* Verde Acción de marca */
    --wu-submit-color: #0c1a05;
    --wu-submit-border-radius: 999px;
}
.wu-plan .wu-cta button.button-primary {
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 20px rgba(180, 211, 0, 0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.wu-plan .wu-cta button.button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(180, 211, 0, 0.5);
}

/* El selector Monthly/Quarterly/Yearly ya se oculta por JS (sección 6 de
   soycandidatosoft.php) buscando el texto; esta regla usa la clase real
   confirmada en el sitio (.wu-plans-frequency-selector) para que desaparezca
   de inmediato, sin esperar a que corra ese script. No se borra del DOM. */
.wu-plans-frequency-selector {
    display: none !important;
}

/* =========================================
   9B. TABLA DE PLANES: VERSIÓN RESPONSIVE (MÓVIL / TABLET ANGOSTO)
   Verificado contra el DOM real de /planes/: Ultimate Multisite arma las 3
   tarjetas dentro de <div class="plans wu-flex"> con flex-wrap:nowrap y
   cada tarjeta en flex:1 1 0%, así que en pantallas angostas las aprieta a
   ~100px de ancho cada una, y el precio (que trae fuente de 48px dentro de
   <h5><sup>$</sup><span class="plan-price">…</span><sub>año</sub></h5>)
   se parte en varias líneas. Aquí solo se apilan las 3 tarjetas en una sola
   columna a ancho completo y se reduce la fuente del precio para que quepa
   en una línea; no se oculta ni se borra ninguna información de las
   tarjetas (título, precio, descripción y botón siguen los tres).
   ========================================= */
@media (max-width: 780px) {
    .plans.wu-flex {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }
    .wu-plan {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding-inline: 24px;
        border-bottom: 1px solid rgba(0, 51, 102, 0.15);
        padding-bottom: 28px;
        margin-bottom: 12px;
    }
    .wu-plan:last-of-type {
        border-bottom: none;
    }

    /* Título del plan (el que va DENTRO de la tarjeta; la barra azul de
       encabezado de Ultimate Multisite no se toca). */
    .wu-plan .wu-relative h4 {
        font-size: 20px !important;
    }

    /* Bloque del precio: alinea "$", el monto y "año"/"Free" en una sola
       fila centrada, en vez de dejar que cada uno tome su tamaño original
       y se apilen en varias líneas. */
    .wu-plan .wu-relative h5 {
        display: flex !important;
        align-items: baseline !important;
        justify-content: center !important;
        flex-wrap: wrap;
        gap: 4px;
        font-size: 34px !important;
    }
    .wu-plan .plan-price {
        font-size: 1em !important;
        white-space: nowrap;
    }
    .wu-plan .superscript,
    .wu-plan h5 sub {
        font-size: 0.4em !important;
        vertical-align: baseline !important;
    }

    .wu-plan .early-adopter-price {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .wu-plan .wu-cta button.button-primary {
        width: 100%;
    }
}

/* =========================================
   10. REGISTRO (registro-demo): ÍCONO PLACEHOLDER ELIMINADO
   Se quitó el <img> placeholder genérico del inicio del formulario
   (ahora eliminado directamente en funciones.php, dentro de
   ruta105_form_registro()) porque no aportaba valor y dejaba la tarjeta
   de registro muy abajo en la pantalla. La regla anterior que lo
   centraba (.ruta105-registro-container > div:first-child img) ya no
   aplica a nada y se retiró. El padding-top que compensa ese espacio
   ahora vive directamente en el style inline del contenedor en
   funciones.php (padding-top: 40px), para que la tarjeta "Registro de
   Nuevo Afiliado" no quede pegada al borde superior de la página
   (la plantilla de registro-demo no tiene header arriba).
   ========================================= */

/* =========================================
   11. FORMULARIOS (login-demo, registro-demo y recuperar contraseña):
   ÚLTIMAS LÍNEAS ILEGIBLES SOBRE EL FONDO OSCURO
   Los párrafos/span finales de estos formularios (checkbox de términos,
   "¿Ya tienes cuenta?", "¿Olvidaste tu contraseña?", el texto de ayuda
   de "Recuperar Acceso" y "Volver a Iniciar Sesión") traen colores fijos
   en el propio HTML (funciones.php) pensados para fondo blanco: gris
   #666, azul oscuro #003366 y el texto plano sin color (hereda el gris
   oscuro #2d3748 del tema). Sobre la tarjeta oscura del formulario
   quedaban prácticamente invisibles — solo se notaban los enlaces
   subrayados, no el texto que los acompaña. Confirmado con estilos
   computados reales en /login-demo/ y /registro-demo/.
   Como el color está fijado inline en el HTML, hace falta !important
   para ganarle (mismo patrón ya usado en los recuadros de los modales,
   sección de arriba). No se toca funciones.php: todo el fix queda en
   este archivo. Los enlaces quedan en el cian de marca (#00d2ff) y
   subrayados, el texto que los acompaña en el mismo gris claro (#e0e6ed)
   que ya usan las demás etiquetas del formulario.
   ========================================= */
.ruta105-form > p {
    color: #e0e6ed !important;
}
.ruta105-form input[name="terminos_datos"] + span {
    color: #e0e6ed;
}
.ruta105-form > p a,
.ruta105-form input[name="terminos_datos"] + span a {
    color: #00d2ff !important;
    text-decoration: underline;
}

/* =========================================
   9C. TABLA DE PLANES: QUITAR EL ESPACIO VACÍO ANTES DE LAS TARJETAS
   Verificado en vivo en /planes/ (desktop y móvil): Ultimate Multisite
   reserva 30px de padding-top en el contenedor .plans y 39px de
   margin-top en cada .wu-plan (clase "lift"). Esa suma (~70px) es la que
   se ve como un bloque vacío arriba de las barras "PLAN GRATIS/500/5000".
   Aquí solo se pone en 0; no se borra ningún elemento ni contenido.
   ========================================= */
.plans.wu-flex {
    padding-top: 0 !important;
}
.wu-plan {
    margin-top: 0 !important;
}

/* =========================================
   12. MÓVIL: ADMIN DEL PLUGIN (wp-admin admin.php?page=rutac105-admin)
   Revisadas las pestañas Árbol, Gestión, Mapa y Datos, Redes, Analítica,
   E-14 y Licencia a ancho de celular (probado desde 320px). Las tablas
   largas de Gestión y E-14 ya estaban envueltas en un contenedor con
   overflow-x:auto (sección 4 de este archivo se encarga del contraste,
   y admin.php ya las envolvía), así que en vez de romper el layout, en
   móvil se pueden desplazar hacia los lados con el dedo para ver todas
   las columnas — no se oculta ni se quita ninguna columna. Se agregó el
   mismo contenedor a la tabla del historial de Analítica, que no lo
   tenía, y una clase a esa misma tabla como red de seguridad extra.
   Lo que sí estaba realmente roto en móvil eran dos cosas escritas con
   estilo en línea de 2 columnas fijas (necesario sobrescribirlas con
   !important para ganarle al estilo en línea, mismo patrón ya usado en
   otras correcciones de este archivo — secciones 1, 5 y 11):
   - El layout de la pestaña Analítica (formulario de perfil + tarjeta de
     estado, y el "teaser" de publicidad del plan gratis) usaba
     "grid-template-columns: 1.3fr 1fr" / "1fr 1fr" sin ningún punto de
     quiebre, así que en un celular angosto quedaba apretado en dos
     columnas diminutas. Aquí se fuerza a una sola columna (el "gap" ya
     existente se conserva, así que el espaciado entre bloques no cambia).
   - Las filas horizontales de la pestaña Redes ("Subir PDF" y cada fila
     de la galería de imágenes) usaban "display:flex" sin permitir que
     sus campos bajaran de línea, así que en un celular los campos de
     texto y el botón quedaban apretados/desbordados. Aquí se apilan en
     columna (el "gap" ya existente pasa a separarlos verticalmente).
   - La fila de "Importar CSV" (Gestión) se deja envolver en vez de
     desbordar si el archivo elegido tiene un nombre largo.
   Se usa el mismo punto de quiebre (782px) que WordPress usa en su
   propio panel de administración, para que coincida con el momento en
   que wp-admin ya pasa a su vista móvil (menú lateral colapsado, etc.).
   No se oculta, ni se quita, ningún campo, botón, columna o dato: solo
   se reordena verticalmente lo que antes iba forzado en horizontal.
   ========================================= */
@media (max-width: 782px) {
    /* Analítica: layout de 2 columnas -> 1 columna, en el orden en que ya
       aparecen en el HTML (formulario primero, estado/último informe
       después; y en el teaser, el texto primero, la vista previa después). */
    .r105-analitica-grid,
    .r105-analitica-grid-teaser {
        grid-template-columns: 1fr !important;
    }

    /* Redes: la fila de "Subir PDF" y cada fila de la galería de imágenes
       pasan de una sola línea horizontal a apilarse verticalmente, cada
       campo a todo el ancho disponible. */
    .r105-redes-pdf-row,
    .r105-redes-galeria-item {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .r105-redes-pdf-row input[type="text"],
    .r105-redes-galeria-item input[type="text"] {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* Gestión: la fila de "Importar CSV" puede bajar de línea si el campo
       de archivo y el botón no caben juntos, en vez de desbordar la
       pantalla hacia los lados. */
    .r105-csv-import-row {
        flex-wrap: wrap !important;
    }

    /* Mapa y Datos: el mapa de Google ocupa menos alto en un celular para
       no tapar toda la pantalla de un solo scroll — sigue siendo el mismo
       mapa interactivo, solo cambia su altura. */
    #mapa-bogota {
        height: 320px !important;
    }

    /* Historial de Analítica: red de seguridad extra para que esta tabla
       (ya envuelta en un contenedor con overflow-x:auto en analitica.php)
       nunca fuerce un ancho mayor al de la pantalla. */
    .r105-analitica-wrap table.widefat {
        max-width: 100% !important;
    }
}

/* =========================================
   13. MÓDULO AGENDA (admin + panel del patriota) Y COMUNICACIÓN (admin)
   Fase 1 de la ruta de desarrollo (Agenda y Tareas + "Compartir con la
   red" con RSVP + Comunicación básica wa.me/wp_mail). Sigue la misma
   paleta ya usada en el resto del plugin (azul institucional #003366,
   cian de marca #00d2ff/#0ea5e9, verde de confirmación #16a34a/#22c55e,
   rojo de alerta #ef4444/#b91c1c) y reutiliza .table-responsive y
   .modal-mensaje/.modal-content ya definidos en las secciones 4 y 5, así
   que aquí solo se agregan las clases nuevas.
   ========================================= */

/* ---- 13.1 Pestaña Agenda (wp-admin) ---- */
.r105-agenda-hitos {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.r105-agenda-hitos-texto {
    white-space: pre-line;
    color: #0c4a6e;
    font-size: 0.95em;
    line-height: 1.6;
}
.r105-agenda-crear {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.r105-agenda-crear label {
    display: block;
    font-size: 0.85em;
    color: #45536b;
    font-weight: 600;
    margin-bottom: 4px;
}
.r105-agenda-crear input[type="text"],
.r105-agenda-crear input[type="date"],
.r105-agenda-crear input[type="time"],
.r105-agenda-crear select,
.r105-agenda-crear textarea {
    width: 100%;
    box-sizing: border-box;
}
.r105-agenda-form-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.r105-agenda-calendario {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.r105-agenda-cal-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 10px;
}
.r105-agenda-cal-nav h3 {
    margin: 0;
    color: #003366;
}
.r105-calendario-tabla {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
}
.r105-calendario-tabla th {
    padding: 8px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    font-size: 0.85em;
    color: #45536b;
}
.r105-calendario-tabla td {
    border: 1px solid #e2e8f0;
    vertical-align: top;
    padding: 6px;
    height: 72px;
    width: 14.28%;
}
.r105-calendario-tabla td.r105-cal-vacio {
    background: #fafafa;
}
.r105-cal-numero {
    font-size: 0.85em;
    color: #64748b;
}
.r105-cal-evento {
    font-size: 0.72em;
    color: #fff;
    border-radius: 4px;
    padding: 2px 4px;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: #0ea5e9; /* tipo=evento (color por defecto) */
}
.r105-cal-evento.r105-cal-tarea { background: #16a34a; } /* tipo=tarea, sobreescribe el color por defecto */
.r105-agenda-listado { margin-bottom: 10px; }
.r105-agenda-contador {
    font-size: 0.85em;
    margin-top: 4px;
    color: #45536b;
}
.r105-btn-hecho {
    background: #16a34a !important;
    color: #fff !important;
    border-color: #16a34a !important;
}
.r105-btn-borrar {
    color: #b91c1c !important;
}

/* ---- 13.1B Insignia de estado de EVENTOS en el listado (Agendado /
   Finalizado) — pedido por el usuario (17/sep/2026): antes la columna
   "Estado" quedaba vacía para los eventos aunque su fecha ya hubiera
   pasado; ahora se calcula en PHP (ver ruta105_agenda_evento_estado_html()
   en agenda.php) y aquí solo se define cómo se ve la insignia, con la
   misma paleta del resto del módulo. */
.r105-badge-estado {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8em;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.2px;
}
.r105-badge-agendado {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #7dd3fc;
}
.r105-badge-finalizado {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

/* ---- 13.2 Tarjetas "Reunión" + modal RSVP (panel del patriota) ---- */
.r105-reuniones-wrap {
    margin: 20px 0;
}
.r105-reuniones-titulo {
    color: #0ea5e9 !important;
    border-left: 4px solid #0ea5e9;
    padding-left: 15px;
    margin-bottom: 15px;
}
.r105-reuniones-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.r105-reunion-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(0, 210, 255, 0.2);
    border-radius: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: 0.2s;
}
.r105-reunion-card:hover {
    background: rgba(0, 210, 255, 0.12);
    border-color: rgba(0, 210, 255, 0.4);
}
.r105-reunion-texto {
    color: #e0e6ed;
    font-size: 0.92em;
    font-weight: 600;
}
.r105-reunion-punto {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.r105-punto-gris { background: #94a3b8; }
.r105-punto-verde { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.r105-punto-rojo { background: #ef4444; box-shadow: 0 0 6px #ef4444; }

/* ---- 13.3 Pestaña Comunicación (wp-admin) ---- */
.r105-comunicacion-aviso {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #14532d;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 20px;
}
.r105-comunicacion-filtros {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 24px;
}
.r105-comunicacion-filtros-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}
.r105-comunicacion-filtros-form label {
    display: flex;
    flex-direction: column;
    font-size: 0.85em;
    color: #45536b;
    font-weight: 600;
    gap: 4px;
}
.r105-comunicacion-filtros-form .r105-comunicacion-check {
    flex-direction: row;
    align-items: center;
    gap: 6px;
}
.r105-comunicacion-conteo {
    margin: 10px 0 0;
    font-weight: 600;
    color: #003366;
}
.r105-comunicacion-acciones {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}
.r105-comunicacion-col {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px 20px;
}
.r105-comunicacion-resultado {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.r105-wa-link {
    display: inline-block;
    background: #16a34a;
    color: #fff !important;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.85em;
}
.r105-wa-link:hover {
    background: #15803d;
}

/* ---- 13.4 Móvil: mismo punto de quiebre (782px) que la sección 12 ---- */
@media (max-width: 782px) {
    .r105-agenda-form-grid {
        grid-template-columns: 1fr !important;
    }
    .r105-agenda-cal-nav {
        flex-wrap: wrap;
        text-align: center;
    }
    .r105-agenda-cal-nav h3 {
        width: 100%;
        order: -1;
        margin-bottom: 8px;
    }
    .r105-comunicacion-acciones {
        grid-template-columns: 1fr !important;
    }
    .r105-comunicacion-filtros-form {
        flex-direction: column;
        align-items: stretch !important;
    }
    .r105-reuniones-grid {
        flex-direction: column;
    }
    .r105-reunion-card {
        width: 100%;
        box-sizing: border-box;
    }
}

/* =========================================
   14. MODAL DE REPORTE E-14 (panel del testigo): BOTÓN DE CERRAR
   FUERA DE LA PANTALLA EN FORMULARIOS LARGOS
   El modal genérico (.modal-content, sección 5) no tenía límite de alto:
   se centra siempre con .modal-mensaje (display:flex; align-items:center),
   así que si el contenido es más alto que la pantalla, el cuadro entero se
   sale por arriba Y por abajo del viewport. El formulario de Reporte E-14
   es el más largo del panel (10 campos + 2 fotos), así que en pantallas
   chicas el botón "X" (que vive arriba del todo del cuadro) quedaba
   literalmente fuera de la pantalla, sin poder hacer clic — el usuario
   reportó que la única forma de cerrarlo era recargar toda la página.
   Se limita esta corrección SOLO a #modal-reporte (selector con más
   especificidad que ".modal-content"/".close" a secas), así que ningún
   otro modal del panel (Perfil, Contrato, Votación, Reunión, Chat,
   Descargas) cambia en nada.
   ========================================= */
#modal-reporte .modal-content {
    max-height: 90vh;
    overflow-y: auto;
}
/* Red de seguridad adicional: además de la "X", hacer clic en el fondo
   oscuro (fuera del cuadro del formulario) también cierra el modal — así
   sigue siendo posible cerrarlo aunque, por cualquier motivo, la "X" no
   sea visible en ese momento (ver el onclick agregado en panel.php sobre
   el propio #modal-reporte). No se le agrega ningún estilo nuevo al
   cursor ni al fondo: es puramente de comportamiento (ver panel.php).
   ========================================= */


/* =========================================
   15. PANEL DEL PATRIOTA "TIPO APP MÓVIL" + ÁRBOL SOBRIO
   Pedido por el usuario (02/oct/2026): panel del afiliado con barra
   superior, 4 secciones y menú fijo abajo (como una app), con un estilo
   más sobrio (menos neón y brillos) pero CONSERVANDO las animaciones:
   esferas flotando, aro punteado girando, aparición suave de cada nodo,
   fondo "nebulosa" lento, partículas, brillo de la barra de meta y zoom
   de la esfera al pasar el mouse / tocar.
   TODO va bajo la clase .r105-app (solo existe en panel.php), así que
   el árbol del candidato en wp-admin, [rutac105_admin_pro], las tablas
   y los formularios de login/registro NO cambian con esta sección.
   Árbol: aquí SOLO se cambian colores, fondos y sombras. El tamaño y la
   posición de las esferas (60px → 150px en hover, top:40px, sin
   transiciones de ancho/alto) se dejan exactamente como en la sección 3,
   porque cualquier cambio ahí reintroduce el parpadeo ya corregido.
   Varias reglas llevan !important a propósito: el HTML de los modales
   trae colores en línea (style="...") y las secciones 1-5 de este
   archivo también usan !important (mismo patrón de las secciones 5 y 11).
   ========================================= */
.r105-app {
    --r105-bg: #0b1220;
    --r105-surface: #111a2e;
    --r105-surface-2: #16213a;
    --r105-line: rgba(148, 163, 184, 0.16);
    --r105-ink: #e5e9f0;
    --r105-dim: #94a3b8;
    --r105-cian: #00bdf2;
    --r105-cian-suave: rgba(0, 189, 242, 0.12);
    --r105-verde: #b4d300;
    --r105-amarillo: #fcd802;
    --r105-wsp: #25D366;
    --r105-rojo: #f87171;
    --r105-radio: 16px;
    --r105-radio-sm: 12px;

    max-width: 520px;
    margin: 16px auto 24px;
    padding: 0 0 calc(88px + env(safe-area-inset-bottom, 0px));
    background: var(--r105-bg);
    color: var(--r105-ink) !important;
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    font-family: 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.r105-app *, .r105-app *::before, .r105-app *::after { box-sizing: border-box; }
.r105-app h1, .r105-app h2, .r105-app h3, .r105-app h4 {
    color: var(--r105-ink) !important;
    text-shadow: none !important;
    letter-spacing: normal;
}
.r105-app a { text-decoration: none; }
.r105-app :focus-visible { outline: 2px solid var(--r105-cian); outline-offset: 2px; }

/* ---- 15.1 Barra superior ---- */
.r105-app .r105-appbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(11, 18, 32, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--r105-line);
    border-radius: 24px 24px 0 0;
}
.admin-bar .r105-app .r105-appbar { top: 32px; }
@media (max-width: 782px) { .admin-bar .r105-app .r105-appbar { top: 46px; } }
@media (max-width: 600px) { .admin-bar .r105-app .r105-appbar { top: 0; } }
.r105-app .r105-appbar img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--r105-cian);
    margin: 0;
    flex: none;
    background: var(--r105-surface-2);
}
.r105-app .r105-hola { flex: 1; min-width: 0; }
.r105-app .r105-hola small { display: block; color: var(--r105-dim); font-size: 12px; }
.r105-app .r105-hola strong { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--r105-ink); }
.r105-app .r105-chip-puntos {
    flex: none;
    padding: 6px 11px;
    border-radius: 999px;
    background: rgba(180, 211, 0, 0.12);
    border: 1px solid rgba(180, 211, 0, 0.28);
    color: var(--r105-verde);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ---- 15.2 Secciones (vistas) ---- */
.r105-app .r105-vista { display: none; padding: 16px; }
.r105-app .r105-vista.activa { display: block; animation: r105-vista-in 0.3s ease; }
@keyframes r105-vista-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.r105-app .r105-seccion {
    margin: 24px 4px 10px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase;
    color: var(--r105-dim) !important;
    line-height: 1.3;
}
.r105-app .r105-seccion-primera { margin-top: 4px !important; }

.r105-app .r105-card {
    background: var(--r105-surface);
    border: 1px solid var(--r105-line);
    border-radius: var(--r105-radio);
    padding: 16px;
}
.r105-app .r105-card + .r105-card { margin-top: 10px; }
.r105-app .r105-card-label { display: block; font-size: 13px; color: var(--r105-dim) !important; margin-bottom: 8px; font-weight: 400; }
.r105-app .r105-card-titulo { display: block; font-size: 15px; color: var(--r105-ink); }
.r105-app .r105-card-texto { margin: 6px 0 14px; color: var(--r105-dim); font-size: 13.5px; }
.r105-app .r105-card-testigo { border-color: rgba(252, 216, 2, 0.28); }
/* Datos del puesto de votación (tarjeta "Elección" y ventana "Mi
   puesto"): Municipio | Puesto | Dirección | Mesa, el mismo orden del
   CSV de logística. Una fila por dato: etiqueta a la izquierda, valor a
   la derecha. */
.r105-app .r105-puesto-datos { margin: 8px 0 14px; padding: 0; text-align: left; }
.r105-app .r105-puesto-datos > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid var(--r105-line);
}
.r105-app .r105-puesto-datos > div:last-child { border-bottom: 0; }
.r105-app .r105-puesto-datos dt { margin: 0; color: var(--r105-dim) !important; font-size: 13px; font-weight: 600; flex: none; }
.r105-app .r105-puesto-datos dd { margin: 0; color: var(--r105-ink) !important; font-size: 14.5px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.r105-app .r105-vacio { color: var(--r105-dim); font-size: 14px; text-align: center; }
.r105-app .r105-badge-ok {
    display: inline-block;
    margin-right: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(34, 197, 94, 0.14);
    color: #4ade80;
    font-size: 12px;
    font-weight: 700;
}
.r105-app .exito-msg,
.r105-app .error-msg {
    margin-bottom: 12px;
    padding: 12px 14px;
    border-radius: var(--r105-radio-sm);
    font-size: 14px;
    font-weight: 600;
}
.r105-app .exito-msg { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.3); color: #86efac; }
.r105-app .error-msg { background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.3); color: #fca5a5; }

/* ---- 15.3 Botones ---- */
.r105-app .r105-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--r105-radio-sm);
    border: 1px solid transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.r105-app .r105-btn:active { transform: scale(0.97); }
.r105-app .r105-btn-primario { background: var(--r105-cian); color: #04121c; }
.r105-app .r105-btn-primario:hover { background: #33cbf5; color: #04121c; }
.r105-app .r105-btn-sec { background: transparent; color: var(--r105-ink); border-color: var(--r105-line); }
.r105-app .r105-btn-sec:hover { background: var(--r105-surface-2); color: var(--r105-ink); border-color: rgba(148, 163, 184, 0.3); }
.r105-app .r105-btn-bloque { display: flex; width: 100%; }
.r105-app .r105-btns-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }

/* ---- 15.4 Link de patriota + QR ---- */
.r105-app .r105-link-input {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 12px !important;
    background: var(--r105-bg) !important;
    color: var(--r105-dim) !important;
    border: 1px solid var(--r105-line) !important;
    border-radius: var(--r105-radio-sm) !important;
    font-family: ui-monospace, Consolas, monospace !important;
    font-size: 12.5px !important;
    text-align: left;
    box-shadow: none !important;
}
.r105-app .r105-qr { margin-top: 14px; text-align: center; animation: fadeIn 0.4s ease; }
.r105-app .r105-qr .r105-btn { margin-top: 12px; }
.r105-app .r105-qr-marco { display: inline-block; padding: 12px; background: #fff; border-radius: var(--r105-radio-sm); }
.r105-app .r105-qr-marco img, .r105-app .r105-qr-marco canvas { display: block; margin: 0 auto; }

/* ---- 15.5 Números, meta y accesos rápidos ---- */
.r105-app .r105-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.r105-app .r105-stat {
    background: var(--r105-surface);
    border: 1px solid var(--r105-line);
    border-radius: var(--r105-radio-sm);
    padding: 12px 6px;
    text-align: center;
}
.r105-app .r105-stat b { display: block; font-size: 22px; color: var(--r105-ink); font-variant-numeric: tabular-nums; }
.r105-app .r105-stat span { font-size: 11.5px; color: var(--r105-dim); }
.r105-app .r105-meta { margin-top: 10px; }
.r105-app .r105-meta-top { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; font-size: 13px; color: var(--r105-dim); }
.r105-app .r105-meta-top b { color: var(--r105-ink); font-variant-numeric: tabular-nums; }
.r105-app .barra-fondo {
    height: 10px !important;
    border-radius: 99px !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
}
.r105-app .barra-progreso {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--r105-verde), var(--r105-cian)) !important;
    box-shadow: none !important;
}

.r105-app .r105-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.r105-app .r105-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 14px 6px;
    background: var(--r105-surface);
    border: 1px solid var(--r105-line);
    border-radius: var(--r105-radio-sm);
    color: var(--r105-ink);
    font: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.15s ease;
}
.r105-app .r105-tile:hover { border-color: rgba(0, 189, 242, 0.4); background: var(--r105-surface); color: var(--r105-ink); }
.r105-app .r105-tile:active { transform: scale(0.96); }
.r105-app .r105-tile-ico {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--r105-cian-suave);
    color: var(--r105-cian);
}
.r105-app .r105-tile-testigo .r105-tile-ico { background: rgba(252, 216, 2, 0.12); color: var(--r105-amarillo); }

/* ---- 15.6 Redes sociales ---- */
.r105-app .r105-redes { display: flex; flex-wrap: wrap; gap: 10px; }
.r105-app .r105-redes a {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: var(--r105-surface);
    border: 1px solid var(--r105-line);
    border-radius: 14px;
    transition: border-color 0.2s ease, transform 0.15s ease;
}
.r105-app .r105-redes a:hover { border-color: rgba(0, 189, 242, 0.4); transform: translateY(-2px); }
.r105-app .r105-redes img { width: 24px !important; height: 24px !important; margin: 0; }

/* ---- 15.7 Reuniones (tarjetas que pinta agenda.php) ---- */
.r105-app .r105-reuniones-wrap { margin: 0; }
.r105-app .r105-reuniones-titulo {
    margin: 24px 4px 10px !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--r105-dim) !important;
}
.r105-app .r105-reuniones-grid { flex-direction: column; gap: 8px; }
.r105-app .r105-reunion-card {
    width: 100%;
    padding: 14px 16px;
    background: var(--r105-surface);
    border: 1px solid var(--r105-line);
    border-radius: var(--r105-radio-sm);
}
.r105-app .r105-reunion-card:hover { background: var(--r105-surface-2); border-color: rgba(0, 189, 242, 0.35); }
.r105-app .r105-reunion-texto { color: var(--r105-ink); font-weight: 500; }
.r105-app .r105-punto-verde { box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.15); }
.r105-app .r105-punto-rojo { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15); }

/* ---- 15.8 Árbol sobrio (solo colores; ver nota al inicio) ----
   PASO 2 DEL REDISEÑO (02/oct/2026): estas reglas ya no van atadas a
   .r105-app sino a la clase .r105-arbol-sobrio, que llevan los DOS
   árboles: el del patriota (panel.php) y el del candidato
   (ruta105_render_arbol_global() en admin.php → pestaña Árbol de
   wp-admin y [rutac105_admin_pro]). Así ambos se ven iguales. Los
   colores se repiten aquí como variables porque el árbol del candidato
   no vive dentro de .r105-app (que es donde están las demás). */
.r105-arbol-sobrio {
    --r105-surface: #111a2e;
    --r105-surface-2: #16213a;
    --r105-line: rgba(148, 163, 184, 0.16);
    --r105-ink: #e5e9f0;
    --r105-dim: #94a3b8;
    --r105-cian: #00bdf2;
    --r105-amarillo: #fcd802;
    --r105-wsp: #25D366;
    --r105-radio: 16px;
}
.r105-app .arbol-container { margin: 0; }
.arbol-container.r105-arbol-sobrio {
    box-sizing: border-box; /* con width:100% (en línea en admin.php) el relleno ya no lo saca por la derecha */
    padding: 44px 8px 56px;
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 189, 242, 0.08), transparent 45%),
        radial-gradient(circle at 85% 30%, rgba(180, 211, 0, 0.05), transparent 42%),
        radial-gradient(circle at 50% 95%, rgba(252, 216, 2, 0.04), transparent 45%),
        linear-gradient(180deg, #0b1220 0%, #101b31 100%) !important;
    border: 1px solid var(--r105-line);
    border-radius: var(--r105-radio);
    box-shadow: none;
}
.r105-arbol-sobrio .r105-arbol-canvas-particulas { opacity: 0.4; }
.arbol-container.r105-arbol-sobrio::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.arbol-container.r105-arbol-sobrio::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.35); }

/* Quita la sangría izquierda que el navegador/tema le pone a cada <ul>
   (40px por nivel), que empujaba el árbol hacia la derecha y lo cortaba
   en el celular. Solo es margen horizontal: no toca el alto ni la
   posición vertical de las esferas (la del hover anti-parpadeo). */
.r105-arbol-sobrio .tree ul { margin: 0; padding-left: 0; padding-right: 0; }

.r105-arbol-sobrio .tree li::before,
.r105-arbol-sobrio .tree li::after,
.r105-arbol-sobrio .tree ul ul::before {
    border-color: rgba(148, 163, 184, 0.35);
    box-shadow: none;
}
.r105-arbol-sobrio .node-content {
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.12), transparent 55%),
        var(--r105-surface-2) !important;
    backdrop-filter: none;
    border-color: rgba(0, 189, 242, 0.55);
    box-shadow: 0 12px 14px -10px rgba(0, 0, 0, 0.7);
}
.r105-arbol-sobrio .node-content::before { border-color: rgba(229, 233, 240, 0.3); animation-duration: 8s; }
.r105-arbol-sobrio .node-content.padre { border-color: var(--r105-amarillo); box-shadow: 0 12px 14px -10px rgba(0, 0, 0, 0.7); }
.r105-arbol-sobrio .node-content.padre::before { border-color: rgba(252, 216, 2, 0.45); }
/* Rangos del líder (árbol del candidato): mismos 3 niveles de siempre
   (bronce 1+, plata 5+, oro 10+ referidos), en tonos más apagados. El
   brillo pulsante del oro (@keyframes r105-glow-oro) no se toca. */
.r105-arbol-sobrio .node-content.rank-bronce { border-color: #b98557; box-shadow: 0 12px 14px -10px rgba(0, 0, 0, 0.7); }
.r105-arbol-sobrio .node-content.rank-bronce::before { border-color: rgba(185, 133, 87, 0.5); }
.r105-arbol-sobrio .node-content.rank-plata { border-color: #aeb8c6; box-shadow: 0 12px 14px -10px rgba(0, 0, 0, 0.7); }
.r105-arbol-sobrio .node-content.rank-plata::before { border-color: rgba(174, 184, 198, 0.5); }
.r105-arbol-sobrio .node-content.rank-oro { border-color: #e6c200; }
.r105-arbol-sobrio .node-content.rank-oro::before { border-color: rgba(230, 194, 0, 0.5); }
.r105-arbol-sobrio .node-content.rank-oro::after { background: #e6c200; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
/* Va DESPUÉS de .padre y de los rangos a propósito: misma especificidad,
   así el hover gana. */
.r105-arbol-sobrio .node-content:hover {
    border-color: var(--r105-cian);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
}
.r105-arbol-sobrio .nombre-nodo {
    background: var(--r105-surface);
    border: 1px solid var(--r105-line);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    color: var(--r105-ink) !important;
    font-size: 12.5px;
}
.r105-arbol-sobrio .localidad-nodo { color: var(--r105-dim) !important; font-weight: 600; letter-spacing: 0.05em; }
.r105-arbol-sobrio .btn-wsp-tree { background: var(--r105-wsp); }
/* Botón "Ver Red (N)" de cada líder (árbol del candidato) */
.r105-arbol-sobrio .red-toggle summary {
    background: var(--r105-surface);
    border: 1px solid var(--r105-line);
    color: var(--r105-dim);
    box-shadow: none;
    letter-spacing: 0.04em;
}
.r105-arbol-sobrio .red-toggle summary:hover {
    background: var(--r105-surface-2);
    border-color: rgba(0, 189, 242, 0.4);
    color: var(--r105-ink);
    box-shadow: none;
}
.r105-arbol-sobrio .red-toggle-count { background: rgba(0, 189, 242, 0.16); color: var(--r105-cian); }
.r105-arbol-sobrio .node-empty {
    width: auto;
    height: auto;
    padding: 10px 14px;
    border-radius: 999px;
    border: 1px dashed var(--r105-line);
    background: var(--r105-surface);
    color: var(--r105-dim);
    font-size: 12px;
    font-style: normal;
}
.r105-app .r105-ayuda { margin: 10px 4px 0; font-size: 12.5px; color: var(--r105-dim); text-align: center; }

/* ---- 15.9 Listado de patriotas en tarjetas (reemplaza la tabla) ---- */
.r105-app .r105-lista { display: flex; flex-direction: column; gap: 8px; }
.r105-app .r105-fila {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--r105-surface);
    border: 1px solid var(--r105-line);
    border-radius: var(--r105-radio-sm);
}
.r105-app .r105-fila img { width: 42px !important; height: 42px !important; border-radius: 50%; object-fit: cover; margin: 0; flex: none; background: var(--r105-surface-2); }
.r105-app .r105-fila-texto { flex: 1; min-width: 0; }
.r105-app .r105-fila-texto b { display: block; font-size: 14.5px; color: var(--r105-ink); overflow-wrap: anywhere; }
.r105-app .r105-fila-texto small { display: block; font-size: 12px; color: var(--r105-dim); overflow-wrap: anywhere; }
.r105-app .r105-fila-wsp {
    flex: none;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: rgba(37, 211, 102, 0.12);
    color: var(--r105-wsp) !important;
}

/* ---- 15.10 Perfil ---- */
.r105-app .r105-perfil-top { text-align: center; padding: 8px 0 4px; }
.r105-app .r105-perfil-top img { width: 96px !important; height: 96px !important; border-radius: 50%; object-fit: cover; border: 3px solid var(--r105-cian); margin: 0 auto; display: block; background: var(--r105-surface-2); }
.r105-app .r105-perfil-top h3 { margin: 12px 0 2px !important; font-size: 19px; }
.r105-app .r105-perfil-top p { margin: 0; color: var(--r105-dim); font-size: 13px; overflow-wrap: anywhere; }
.r105-app .r105-menu {
    display: flex;
    flex-direction: column;
    background: var(--r105-surface);
    border: 1px solid var(--r105-line);
    border-radius: var(--r105-radio);
    overflow: hidden;
}
.r105-app .r105-menu > button,
.r105-app .r105-menu > a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 15px 16px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--r105-line);
    border-radius: 0;
    color: var(--r105-ink);
    font: inherit;
    font-size: 14.5px;
    font-weight: 500;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
}
.r105-app .r105-menu > :last-child { border-bottom: 0; }
.r105-app .r105-menu > button:hover,
.r105-app .r105-menu > a:hover { background: var(--r105-surface-2); color: var(--r105-ink); }
.r105-app .r105-menu-ico { width: 22px; display: grid; place-items: center; color: var(--r105-cian); flex: none; }
.r105-app .r105-flecha { margin-left: auto; color: var(--r105-dim); font-size: 18px; line-height: 1; }
.r105-app .r105-menu > a.r105-menu-salir,
.r105-app .r105-menu > a.r105-menu-salir .r105-menu-ico { color: var(--r105-rojo); }
.r105-app .r105-pie { margin-top: 28px; text-align: center; color: var(--r105-dim); font-size: 12px; }
.r105-app .r105-pie p { margin: 2px 0; }

/* ---- 15.11 Menú inferior fijo ---- */
.r105-app .r105-tabbar {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: 520px;
    z-index: 1000; /* debajo de los modales (9999) y de SweetAlert (1060) */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(17, 26, 46, 0.97);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--r105-line);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
}
.r105-app .r105-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin: 0;
    padding: 5px 0;
    min-height: 0;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: var(--r105-dim);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
}
.r105-app .r105-tab:hover { background: transparent; color: var(--r105-ink); }
.r105-app .r105-tab svg { transition: transform 0.2s ease; }
.r105-app .r105-tab.activa { color: var(--r105-cian); }
.r105-app .r105-tab.activa svg { transform: translateY(-2px); }
.r105-app .r105-tab.activa::before {
    content: '';
    position: absolute;
    top: -8px;
    width: 24px;
    height: 3px;
    border-radius: 3px;
    background: var(--r105-cian);
}

/* ---- 15.12 Ventanas (modales) del panel: sobrias, y en el celular
   salen desde abajo como en una app. Mismos modales y mismos IDs de
   siempre; solo cambia cómo se ven. ---- */
.r105-app .modal-content {
    background: var(--r105-surface) !important;
    backdrop-filter: none;
    border: 1px solid var(--r105-line);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    color: var(--r105-ink) !important;
    max-height: 90vh;
    overflow-y: auto;
}
.r105-app .modal-content h3 { font-size: 18px; margin-top: 0; padding-right: 30px; }
.r105-app .modal-content h4 { font-size: 15px; }
.r105-app .modal-content label { color: var(--r105-dim) !important; font-weight: 600; font-size: 13px; }
.r105-app .modal-content p { color: var(--r105-dim); }
.r105-app .modal-content input[type="text"],
.r105-app .modal-content input[type="number"],
.r105-app .modal-content input[type="email"],
.r105-app .modal-content textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 11px 12px !important;
    background: var(--r105-bg) !important;
    color: var(--r105-ink) !important;
    border: 1px solid var(--r105-line) !important;
    border-radius: 10px !important;
    font-size: 15px;
    box-shadow: none;
}
.r105-app .modal-content input[readonly] { color: var(--r105-dim) !important; }
.r105-app .modal-content input[type="file"] { width: 100%; color: var(--r105-dim); font-size: 13px; }
.r105-app .modal-content input:focus,
.r105-app .modal-content textarea:focus { outline: none; border-color: var(--r105-cian) !important; }
/* Alerta de votos: el JS de validarVotos() pinta el borde en rojo. */
.r105-app #rep_urna[style*="red"] { border-color: #ef4444 !important; }
.r105-app #rep_incinerados { border-color: rgba(239, 68, 68, 0.5) !important; }

/* Botón principal de cada ventana (Guardar, Firmar, Enviar reporte, Actualizar foto) */
.r105-app .modal-content input[type="submit"],
.r105-app #btn_submit_reporte,
.r105-app #modal-perfil button[type="button"] {
    width: 100%;
    min-height: 48px;
    margin-top: 6px;
    padding: 12px !important;
    background: var(--r105-cian) !important;
    color: #04121c !important;
    border: 0 !important;
    border-radius: var(--r105-radio-sm) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    cursor: pointer;
}
.r105-app #btn_submit_reporte:disabled { opacity: 0.6; }
/* Botones Sí/No de la reunión: conservan verde/rojo (significan algo). */
.r105-app #modal-reunion button { min-height: 48px; border-radius: var(--r105-radio-sm) !important; }

/* Recuadros de color claro que traen los modales en su HTML: se
   pasan al tono oscuro sobrio para que todo el texto se lea. */
.r105-app .modal-content [style*="e8f5e9"],
.r105-app .modal-content [style*="f9f9f9"],
.r105-app .modal-content [style*="e3f2fd"],
.r105-app .modal-content [style*="f5f5f5"],
.r105-app .modal-content [style*="f1f1f1"],
.r105-app .modal-content [style*="0a0e17"],
.r105-app .modal-content [style*="0f172a"] {
    background: var(--r105-surface-2) !important;
    border: 1px solid var(--r105-line) !important;
    border-radius: var(--r105-radio-sm) !important;
    color: var(--r105-ink) !important;
}
.r105-app .modal-content [style*="e3f2fd"] span,
.r105-app .modal-content [style*="f5f5f5"] h4,
.r105-app .modal-content [style*="f5f5f5"] div { color: var(--r105-ink) !important; }
.r105-app .modal-content [style*="f5f5f5"] p,
.r105-app .modal-content [style*="f5f5f5"] small { color: var(--r105-dim) !important; }
.r105-app #modal-votacion span[style*="673AB7"] { color: var(--r105-cian) !important; }
.r105-app #modal-descargas a { color: var(--r105-ink) !important; }

@media (max-width: 782px) {
    .r105-app .modal-mensaje { align-items: flex-end; }
    .r105-app .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 88vh;
        border-radius: 22px 22px 0 0;
        border-bottom: 0;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
        animation: r105-hoja-arriba 0.28s ease;
    }
    .r105-app .modal-content::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        margin: -8px auto 14px;
        border-radius: 4px;
        background: var(--r105-line);
    }
}
@keyframes r105-hoja-arriba { from { transform: translateY(100%); } to { transform: none; } }

/* ---- 15.13 Celular: la app ocupa todo el ancho ---- */
@media (max-width: 600px) {
    .r105-app { margin: 0 auto; border-radius: 0; box-shadow: none; }
    .r105-app .r105-appbar { border-radius: 0; }
    .r105-app .r105-tabbar { border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .r105-app .r105-vista.activa,
    .r105-app .modal-content { animation: none; }
}


/* =========================================
   16. PANTALLAS DE ACCESO "TIPO APP": INGRESAR, RECUPERAR, REGISTRO Y
   "ACCESO SOLO POR INVITACIÓN" (paso 3 del rediseño, 02/oct/2026)
   Mismo estilo que el panel del patriota (sección 15): fondo oscuro
   sobrio, encabezado con la "nebulosa" lenta del árbol y un sello que
   flota con el aro punteado girando. Todo bajo .r105-acceso (solo lo
   usan [rutac105_login] y [rutac105_registro] en funciones.php). Los
   formularios ya NO usan la clase .ruta105-form, así que las secciones
   1 y 11 de este archivo dejan de aplicarles (siguen ahí por si algo
   más las usa). Varias reglas llevan !important para ganarle a los
   estilos del tema (Kadence) en inputs y botones.
   ========================================= */
.r105-acceso {
    --r105-bg: #0b1220;
    --r105-surface: #111a2e;
    --r105-surface-2: #16213a;
    --r105-line: rgba(148, 163, 184, 0.16);
    --r105-ink: #e5e9f0;
    --r105-dim: #94a3b8;
    --r105-cian: #00bdf2;
    --r105-cian-suave: rgba(0, 189, 242, 0.12);
    --r105-amarillo: #fcd802;
    --r105-radio: 16px;
    --r105-radio-sm: 12px;

    max-width: 440px;
    margin: 24px auto;
    padding: 28px 20px 30px;
    background: var(--r105-bg);
    color: var(--r105-ink);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
    overflow: hidden;
    font-family: 'Segoe UI', 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    box-sizing: border-box;
}
.r105-acceso *, .r105-acceso *::before, .r105-acceso *::after { box-sizing: border-box; }
.r105-acceso h2 { color: var(--r105-ink) !important; text-shadow: none !important; }
.r105-acceso a { color: var(--r105-cian); font-weight: 600; text-decoration: none; }
.r105-acceso a:hover { color: #33cbf5; }
.r105-acceso :focus-visible { outline: 2px solid var(--r105-cian); outline-offset: 2px; }
.r105-acceso-form { margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }

/* ---- 16.1 Encabezado de marca ---- */
.r105-acceso-marca {
    margin: -28px -20px 22px;
    padding: 34px 20px 26px;
    text-align: center;
    background:
        radial-gradient(circle at 15% 20%, rgba(0, 189, 242, 0.12), transparent 50%),
        radial-gradient(circle at 85% 40%, rgba(180, 211, 0, 0.07), transparent 45%),
        linear-gradient(180deg, #0b1220, #101b31);
    background-size: 200% 200%, 200% 200%, 100% 100%;
    animation: r105-acceso-nebula 22s ease-in-out infinite;
    border-bottom: 1px solid var(--r105-line);
}
@keyframes r105-acceso-nebula {
    0%, 100% { background-position: 0% 50%, 100% 50%, center; }
    50% { background-position: 30% 65%, 70% 40%, center; }
}
.r105-acceso-sello {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--r105-surface-2);
    border: 2px solid rgba(0, 189, 242, 0.55);
    color: var(--r105-cian);
    animation: r105-sphere-float 5.2s ease-in-out infinite;
}
.r105-acceso-sello::before,
.r105-acceso-circ::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px dashed rgba(229, 233, 240, 0.3);
    pointer-events: none;
    animation: r105-ring-spin 8s linear infinite;
}
.r105-acceso-marca small {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--r105-dim);
}
.r105-acceso-marca h2 { margin: 6px 0 4px !important; font-size: 22px !important; line-height: 1.25; text-wrap: balance; }
.r105-acceso-marca p { margin: 0; color: var(--r105-dim); font-size: 13.5px; }

/* ---- 16.2 Campos ---- */
.r105-acceso label {
    display: block;
    margin: 14px 0 6px;
    color: var(--r105-dim) !important;
    font-size: 13px;
    font-weight: 600;
}
.r105-acceso-campo { position: relative; }
.r105-acceso-campo > .r105-acceso-ico {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--r105-dim);
    pointer-events: none;
}
.r105-acceso input[type="text"],
.r105-acceso input[type="email"],
.r105-acceso input[type="password"],
.r105-acceso input[type="number"] {
    width: 100% !important;
    margin: 0 !important;
    padding: 13px 14px 13px 42px !important;
    background: var(--r105-bg) !important;
    color: var(--r105-ink) !important;
    border: 1px solid var(--r105-line) !important;
    border-radius: var(--r105-radio-sm) !important;
    box-shadow: none !important;
    font: inherit;
    font-size: 16px !important; /* 16px evita que el iPhone haga zoom al tocar el campo */
    caret-color: var(--r105-cian);
}
.r105-acceso input#input_pass_reg,
.r105-acceso input#log_pass { padding-right: 48px !important; }
.r105-acceso input::placeholder { color: #5f6f87; opacity: 1; }
.r105-acceso input:focus { outline: none !important; border-color: var(--r105-cian) !important; }
.r105-acceso-ojo {
    position: absolute !important;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    color: var(--r105-dim) !important;
    cursor: pointer;
}
.r105-acceso-ojo:hover { color: var(--r105-ink) !important; }
.r105-acceso-ojo.activo { color: var(--r105-cian) !important; }

/* ---- 16.3 Botones y enlaces ---- */
.r105-acceso .r105-acceso-btn,
.r105-acceso .r105-acceso-btn-sec {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100% !important;
    min-height: 50px;
    margin: 20px 0 0 !important;
    padding: 12px 16px !important;
    border-radius: var(--r105-radio-sm) !important;
    font: inherit;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-align: center;
    box-shadow: none !important;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.r105-acceso .r105-acceso-btn { background: var(--r105-cian) !important; color: #04121c !important; border: 0 !important; }
.r105-acceso .r105-acceso-btn:hover { background: #33cbf5 !important; color: #04121c !important; transform: none; }
.r105-acceso .r105-acceso-btn-sec { background: transparent !important; color: var(--r105-ink) !important; border: 1px solid var(--r105-line) !important; font-weight: 600 !important; }
.r105-acceso .r105-acceso-btn-sec:hover { background: var(--r105-surface-2) !important; color: var(--r105-ink) !important; }
.r105-acceso .r105-acceso-btn:active,
.r105-acceso .r105-acceso-btn-sec:active { transform: scale(0.98); }
.r105-acceso .r105-acceso-form .r105-acceso-btn-sec { margin-top: 10px !important; }
.r105-acceso .r105-acceso-btn-auto { display: inline-flex !important; width: auto !important; min-height: 44px; margin: 0 !important; padding: 0 18px !important; }
.r105-acceso-enlace { margin: 16px 0 0; text-align: center; font-size: 13.5px; color: var(--r105-dim); }
.r105-acceso-pie { margin: 26px 0 0; text-align: center; font-size: 11.5px; color: var(--r105-dim); }

/* ---- 16.4 Avisos (error / éxito) ---- */
.r105-acceso-aviso,
.r105-acceso .error-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 10px !important;
    padding: 12px 14px !important;
    border-radius: var(--r105-radio-sm) !important;
    font-size: 13.5px;
    font-weight: 600 !important;
    line-height: 1.45;
}
.r105-acceso-aviso .r105-acceso-ico { flex: none; margin-top: 1px; }
.r105-acceso-error,
.r105-acceso .error-msg { background: rgba(248, 113, 113, 0.12) !important; border: 1px solid rgba(248, 113, 113, 0.3) !important; color: #fca5a5 !important; }
.r105-acceso-exito { background: rgba(34, 197, 94, 0.12); border: 1px solid rgba(34, 197, 94, 0.3); color: #86efac; }
/* Avisos que van solos (ya logueado, link inválido): sin el relleno de la tarjeta. */
.r105-acceso > .r105-acceso-aviso:only-child { margin: 0 !important; }

/* ---- 16.5 Registro ---- */
.r105-acceso-invita {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--r105-surface);
    border: 1px solid var(--r105-line);
    border-radius: var(--r105-radio);
}
.r105-acceso-invita img {
    width: 48px !important;
    height: 48px !important;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--r105-amarillo);
    flex: none;
}
.r105-acceso-invita small { display: block; font-size: 12px; color: var(--r105-dim); }
.r105-acceso-invita b { font-size: 15px; color: var(--r105-ink); overflow-wrap: anywhere; }
.r105-acceso-pasos { display: flex; gap: 6px; margin: 20px 0 4px; }
.r105-acceso-pasos span { flex: 1; height: 4px; border-radius: 4px; background: var(--r105-line); transition: background-color 0.3s ease; }
.r105-acceso-pasos span.hecho { background: var(--r105-cian); }
.r105-acceso-bloque { margin-top: 22px; }
.r105-acceso-bloque-tit { display: flex; align-items: center; gap: 10px; }
.r105-acceso-bloque-tit b { font-size: 15.5px; color: var(--r105-ink); }
.r105-acceso-num {
    width: 26px;
    height: 26px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--r105-cian-suave);
    color: var(--r105-cian);
    font-size: 13px;
    font-weight: 700;
}
.r105-acceso-bloque-txt { margin: 4px 0 0 36px; color: var(--r105-dim); font-size: 13px; }
.r105-acceso-selfie {
    margin-top: 14px;
    padding: 18px;
    text-align: center;
    background: var(--r105-surface);
    border: 1px dashed rgba(0, 189, 242, 0.35);
    border-radius: var(--r105-radio);
}
.r105-acceso-circ {
    position: relative;
    width: 96px;
    height: 96px;
    margin: 0 auto 12px;
    border-radius: 50%;
    border: 2px solid var(--r105-line);
    background: var(--r105-surface-2);
}
.r105-acceso-circ img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
}
.r105-acceso-suma { display: flex; align-items: center; gap: 10px; }
.r105-acceso-suma span {
    flex: none;
    padding: 12px 14px;
    background: var(--r105-surface);
    border: 1px solid var(--r105-line);
    border-radius: var(--r105-radio-sm);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--r105-ink);
}
.r105-acceso-suma input[type="number"] { padding-left: 14px !important; }
.r105-acceso label.r105-acceso-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 18px 0 0;
    font-size: 13.5px;
    font-weight: 400;
    cursor: pointer;
}
.r105-acceso-check input[type="checkbox"] { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--r105-cian); }

/* ---- 16.6 "Acceso solo por invitación" ---- */
.r105-acceso-bloqueo { text-align: center; padding-top: 8px; }
.r105-acceso-candado {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    background: rgba(252, 216, 2, 0.1);
    color: var(--r105-amarillo);
}
.r105-acceso-bloqueo h2 { margin: 0 0 8px !important; font-size: 20px !important; }
.r105-acceso-bloqueo p { margin: 0 auto; max-width: 34ch; color: var(--r105-dim); font-size: 14px; line-height: 1.55; }
.r105-acceso-caja {
    margin: 20px 0 4px;
    padding: 14px;
    border-radius: var(--r105-radio-sm);
    background: var(--r105-surface);
    border: 1px dashed rgba(252, 216, 2, 0.35);
    font-size: 13.5px;
    font-weight: 600;
}

/* ---- 16.7 Celular: la tarjeta ocupa todo el ancho ---- */
@media (max-width: 600px) {
    .r105-acceso { margin: 0 auto; border-radius: 0; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
    .r105-acceso-marca,
    .r105-acceso-sello,
    .r105-acceso-sello::before,
    .r105-acceso-circ::before { animation: none; }
}