/* ════════════════════════════════════════════════════════════════════
   GestionDo · Portal del socio · acabado profesional
   Va la última: manda sobre las hojas anteriores. Solo cambia el aspecto.
   ════════════════════════════════════════════════════════════════════ */

/* — Fondo liso, sin manchas de color — */
body{ background-image:none !important; }

/* — Nada de respirar ni de brillos que barren la pantalla — */
.dash-hero,.profile-header,.profile-hero,.inicio-hero,.winner-card{
  background-size:100% 100% !important;
  animation:none !important;
  box-shadow:var(--shadow-md) !important;
}
.dash-hero::after,.inicio-hero::after,.profile-header::after,.profile-hero::after{ display:none !important; }
.nav-item.active .ico{ filter:none !important; }
.shortcut-tile:hover .shortcut-ico{ transform:none !important; }

/* — Letra con jerarquía — */
body{ letter-spacing:-0.005em; }
h1,h2,h3,.card-title{ letter-spacing:-0.02em; }
.card-title{ font-weight:700 !important; }

/* — Tarjetas: borde fino, esquina más recta, sombra corta — */
.card{
  border-radius:var(--radius) !important;
  box-shadow:var(--shadow-sm) !important;
  border:1px solid var(--border) !important;
}

/* — Botones — */
.btn-sec,button.btn-sec{
  border-radius:10px !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:650 !important;
  box-shadow:0 1px 2px rgba(16,24,40,0.07) !important;
}
.btn-accent,button.btn-accent{ background:var(--accent) !important; color:#fff !important; }

/* — Campos de texto — */
input,select,textarea{ border-radius:10px !important; }
input:focus,select:focus,textarea:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-glow) !important; }

/* — Barra de abajo y cabecera: limpias — */
.bottom-nav,.nav-bar{ box-shadow:0 -1px 0 var(--border) !important; }
.foto-tile{ border-width:1px !important; }

/* — Barra de desplazamiento discreta — */
::-webkit-scrollbar{ width:9px;height:9px; }
::-webkit-scrollbar-thumb{ background:var(--border-strong) !important; border-radius:99px; border:2px solid var(--bg-app); }


/* — Pantalla de entrada: azul marino, sin el morado suelto — */
#login-screen{
  background:linear-gradient(140deg,var(--t1) 0%,var(--t2) 62%,#26365c 100%) !important;
  background-size:100% 100% !important;
  animation:none !important;
}
#login-screen input,#login-screen select,#login-screen textarea{
  background:rgba(255,255,255,0.10) !important;
  border:1px solid rgba(255,255,255,0.22) !important;
  color:#fff !important;
}
#login-screen input::placeholder{ color:rgba(255,255,255,0.42) !important; }
#login-screen input:focus,#login-screen select:focus{
  border-color:var(--primary-light) !important;
  box-shadow:0 0 0 3px rgba(47,111,237,0.28) !important;
  background:rgba(255,255,255,0.14) !important;
}

/* — La cabecera del portal, a juego — */
.header,header,.app-header,.topbar{
  background-image:linear-gradient(135deg,var(--t1) 0%,var(--t2) 100%) !important;
  background-size:100% 100% !important;
  animation:none !important;
}

/* — La pestaña activa de abajo, en azul acero — */
.nav-item.active{ color:var(--primary) !important; }


/* — La cabecera ya no lleva la franja dorada — */
.header,header.app-header{ border-bottom:1px solid rgba(255,255,255,0.12) !important; box-shadow:0 1px 3px rgba(16,24,40,0.16) !important; }
header.app-header::after{ background-image:none !important; background-color:rgba(255,255,255,0.10) !important; }


/* ════════════════════════════════════════════════════════════════════
   Los colores mandan desde aquí, que es la última hoja que se carga.
   Antes había otra más abajo que los volvía a cambiar y se pisaban.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --muted:#565e75;
  --accent:#1e2a4a; --accent-light:#2f3f6b;
}
/* ── MODO OSCURO: que se lea todo ── */
body.dark-mode{
  --bg-app:#0d111c; --bg-card:#161c2b; --bg-card-2:#111725;
  --card:#161c2b; --card-2:#111725; --bg:#0d111c;
  --text:#eef2f8; --muted:#a3adc2;
  --border:rgba(255,255,255,0.11); --border-strong:rgba(255,255,255,0.20);
  --primary:#5b90f5; --primary-light:#8ab4f8; --primary-glow:rgba(91,144,245,0.18);
  --accent:#7ba6f7; --accent-light:#a8c4fa; --accent-glow:rgba(123,166,247,0.16);
  --green:#4ade80; --red:#f87171; --gold:#fbbf24; --blue:#7ba6f7;
}
body.dark-mode .card-title,body.dark-mode label,body.dark-mode summary{ color:var(--text); }
/* EL MISMO ARREGLO QUE EN EL GESTOR: la listita que se abre al pulsar un
   desplegable la pinta el sistema, no la app. Sin color-scheme el navegador
   cree que la pagina es clara, la pinta sobre blanco, y con el texto casi
   blanco de encima no se lee nada. Aqui lo sufririan los socios. */
body.dark-mode{ color-scheme: dark; }
body:not(.dark-mode){ color-scheme: light; }
body.dark-mode select option,
body.dark-mode datalist option{ background:#161c2b; color:#e8eefc; }
body.dark-mode input,body.dark-mode select,body.dark-mode textarea{
  background:rgba(255,255,255,0.05); color:var(--text); border-color:var(--border);
}
body.dark-mode input::placeholder,body.dark-mode textarea::placeholder{ color:#8892a6; }
/* El botón azul de fondo, más profundo en oscuro, para que la letra blanca se lea */
body.dark-mode .btn-accent,body.dark-mode button.btn-accent{ background:#2563eb !important; }
/* La etiqueta de la versión, legible en los dos modos */
#login-screen + div,.gd-version-portal{ color:var(--muted) !important; }


/* ── Rescate de contraste en OSCURO (portal) ── */
body.dark-mode [style*="background:var(--green)"],
body.dark-mode [style*="background:var(--gold)"],
body.dark-mode [style*="background:var(--red)"],
body.dark-mode [style*="background:var(--accent)"]{ color:#0d111c !important; }


/* ════════════════════════════════════════════════════════════════════
   FONDOS DE LAS PANTALLAS QUE SE ABREN ENCIMA
   Antes eran negros siempre, hasta en modo claro, y cansaban la vista.
   Ahora siguen el modo en el que estés.
   ════════════════════════════════════════════════════════════════════ */
:root{
  --velo:#f0f3f8;                        /* pantallas de trabajo (revisar, gestionar) */
  --velo-foto:rgba(23,28,40,0.93);       /* ver una foto o un vídeo a pantalla completa */
  --sutil:rgba(15,23,42,0.045);          /* recuadros suaves dentro de las tarjetas */
  --txt-acento:#1746a8; --txt-ambar:#92400e; --txt-verde:#106133;
  --txt-rojo:#b42318;   --txt-azul:#1746a8;
}
body.dark-mode{
  --velo:#0d111c;
  --velo-foto:rgba(6,8,14,0.95);
  --sutil:rgba(255,255,255,0.055);
  --txt-acento:#93c5fd; --txt-ambar:#fcd34d; --txt-verde:#6ee7b7;
  --txt-rojo:#fca5a5;   --txt-azul:#93c5fd;
}
/* Dentro de las pantallas de revisión, los textos de color usan una versión
   pensada para leerse: oscura sobre fondo claro y clara sobre fondo oscuro. */
.overlay-full [style*="color:var(--gold)"]{ color:var(--txt-ambar) !important; }
.overlay-full [style*="color:var(--accent)"]{ color:var(--txt-acento) !important; }
.overlay-full [style*="color:var(--blue)"]{ color:var(--txt-azul) !important; }
.overlay-full [style*="color:var(--red)"]{ color:var(--txt-rojo) !important; }
.overlay-full [style*="color:var(--green)"]{ color:var(--txt-verde) !important; }
.overlay-full [style*="rgba(251,191,36,0.1)"]{ color:var(--txt-ambar) !important; }
.overlay-full [style*="rgba(34,197,94,0.1)"]{ color:var(--txt-verde) !important; }
.overlay-full{ background:var(--velo) !important; }
/* Los recuadros suaves que se pintan con blanco translúcido no se ven sobre
   fondo claro: se cambian por uno que funciona en los dos modos. */
.overlay-full [style*="rgba(255,255,255,0.04)"],
.overlay-full [style*="rgba(255,255,255,0.03)"]{ background:var(--sutil) !important; }
/* El botón de cerrar del visor de fotos, sobre el gris pizarra */
#vg-overlay button{ background:rgba(255,255,255,0.16) !important; border-color:rgba(255,255,255,0.32) !important; color:#fff !important; }

/* ── El color que eliges se nota: cabeceras y portadas con los tres tonos ── */
header,.header,header.app-header,.sidebar-header,.dash-hero,#login-screen{
  background-image:var(--tema-degradado, linear-gradient(135deg,var(--t1) 0%,var(--t2) 55%,var(--t3) 100%)) !important;
  background-size:100% 100% !important;
}


/* ════════════════════════════════════════════════════════════════════
   ASPECTO DE PROGRAMA DE EMPRESA
   El color que elijas ya no baña pantallas enteras. Aparece donde
   significa algo: la raya de la cabecera, el botón principal y lo que
   está activo. Todo lo demás, gris y blanco.
   ════════════════════════════════════════════════════════════════════ */
header,.header,header.app-header,.sidebar-header,#login-screen{
  background-image:none !important;
  background-color:var(--t1) !important;
  background-size:auto !important;
  animation:none !important;
}
header,.header,header.app-header{
  border-bottom:2px solid var(--primary) !important;
  box-shadow:none !important;
}
.sidebar-header{ border-bottom:2px solid var(--primary) !important; }

/* — Tipografía: jerarquía en vez de todo en negrita máxima — */
[style*="font-weight:900"],[style*="font-weight: 900"]{ font-weight:800 !important; }
h1,h2,h3,h4{ font-weight:700 !important; }
/* Las cifras se alinean en columna, como en una hoja de cálculo */
td,th,.dash-stat-value,.pstat-val,[style*="font-variant"]{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

.dash-hero,.profile-header,.profile-hero,.inicio-hero{
  background-image:none !important;
  background-color:var(--t1) !important;
  box-shadow:var(--shadow-sm) !important;
}


/* ── Tipografía a juego con el gestor ── */
body{
  font-family:'Inter','Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* Con «inherit» el navegador tenía que subir por el árbol elemento a
   elemento en cada pintada. Con la letra puesta directamente se ve igual
   y se ahorra ese paseo. */
*{ font-family:'Inter','Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; }
h1,h2,h3,h4,h5,h6,button,input,select,textarea,label,
[style*="'Sora'"],[style*="Sora,"],[style*="'Outfit'"]{ font-family:inherit !important; }
code,pre,kbd,samp,[style*="monospace"]{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important; }
.pstat-val,.dash-stat-value,td,th{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
/* El color del club también preside la ficha del socio */
.dash-hero,.profile-header,.profile-hero,.inicio-hero{
  background-color:var(--tema-hero, var(--t2)) !important;
}
.header,header.app-header{
  border-bottom-width:3px !important;
  background-color:var(--tema-cab, var(--t1)) !important;
}
#login-screen{
  background-color:var(--tema-login, var(--t1)) !important;
}
.card-title{ border-left:3px solid var(--primary); padding-left:9px; }


/* ════════════════════════════════════════════════════════════════════
   EL COLOR DEL CLUB, POR TODO EL PORTAL
   Mismo criterio que en el gestor: el color 1 lleva la estructura y el
   color 2 acompaña, con tonos calculados para que todo siga legible.
   ════════════════════════════════════════════════════════════════════ */

body{ background-color:var(--tema-tinte, var(--bg)) !important; }
body.dark-mode{ background-color:var(--tema-tinte-osc, #0d111c) !important; }

.bottom-nav,.nav-bar{
  background:var(--tema-tinte-2, var(--card)) !important;
  border-top:3px solid var(--primary) !important;
  box-shadow:none !important;
}
body.dark-mode .bottom-nav,body.dark-mode .nav-bar{
  background:var(--tema-tinte-osc-2, #14161f) !important;
}
.nav-item.active{ color:var(--primary-tinta, var(--primary)) !important; }
body.dark-mode .nav-item.active{ color:var(--primary-tinta-osc, var(--primary-light)) !important; }

.header,header.app-header{
  border-bottom:3px solid var(--primary) !important;
  box-shadow:0 3px 0 0 var(--acento, var(--primary)) !important;
}

.card,.panel,.tarjeta{ border-color:var(--tema-borde, var(--border)) !important; }
body.dark-mode .card,body.dark-mode .panel,body.dark-mode .tarjeta{
  border-color:var(--tema-borde-osc, rgba(255,255,255,0.10)) !important;
}

th{
  background:var(--tema-tinte-2, var(--card)) !important;
  border-bottom:2px solid var(--primary) !important;
}
body.dark-mode th{ background:var(--tema-tinte-osc-2, #1a1d29) !important; }

input:focus,select:focus,textarea:focus{
  border-color:var(--primary) !important;
  box-shadow:0 0 0 3px var(--primary-anillo, rgba(0,0,0,0.08)) !important;
  outline:none !important;
}

::selection{ background:var(--primary); color:#fff; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--acento, var(--primary)), var(--primary)) !important;
}

.pstat-val{ color:var(--primary-tinta, var(--primary)) !important; }
body.dark-mode .pstat-val{ color:var(--primary-tinta-osc, var(--primary-light)) !important; }


/* ── El color del club, cuando hace de LETRA ─────────────────────────
   El mismo color que llena una barra no siempre vale para escribir con
   él. Aquí se usa la versión ajustada, que es el color de siempre
   oscurecido o aclarado lo justo para leerse. */
[style*="color:var(--primary)"],[style*="color: var(--primary)"],
[style*="color:var(--accent)"],[style*="color: var(--accent)"],
[style*="color:var(--accent-light)"],[style*="color: var(--accent-light)"],
[style*="color:var(--primary-light)"],[style*="color: var(--primary-light)"],
[style*="color:var(--t3)"],[style*="color: var(--t3)"]{
  color:var(--primary-txt, var(--primary)) !important;
}
.card-title,.section-title,details > summary,
.tab-btn.active,.nav-item.active,.modal-header h3,
.dash-stat-value,.pstat-val{
  color:var(--primary-txt, var(--primary)) !important;
}
/* Lo que va con el color 2 lleva su propia versión de letra */
.dash-stat:nth-of-type(even) .dash-stat-value{ color:var(--acento-txt, var(--primary-txt)) !important; }


/* ── Dos colores de siempre que no llegaban al mínimo para leerse ──── */

/* El ámbar de los avisos, cuando hace de LETRA sobre fondo claro.
   Se oscurece lo justo: sigue siendo ámbar y pasa de 3,2 a 4,7. */
[style*="color:#d97706"],[style*="color: #d97706"],
[style*="color:#f59e0b"],[style*="color: #f59e0b"],
[style*="color:#d97706"] *,
.av-pill[data-tone="ambar"],.av-det[data-tone="ambar"]{ --tone:#ae5f05; }

/* El botón de WhatsApp conserva su verde de marca, pero con letra oscura:
   de 2,0 pasa a 7,7. */



/* ── Cada papel del color, en su sitio ───────────────────────────────
   Relleno: el color tal cual. Botón: el color con la profundidad justa
   para que la letra blanca se lea. Letra: el color ajustado al modo. */
/* Solo los botones que NO traen fondo propio escrito a mano: los que ya
   tienen su color (verde de guardar, rojo de borrar, verde de WhatsApp…)
   se quedan exactamente como estaban. */
button.btn:not([style*="background"]),.btn:not([style*="background"]){
  background:var(--primary-btn, var(--primary)) !important;
  color:#fff !important;
}
/* Un solo relleno para todos los botones: también el del segundo color.
   El degradado de los dos se queda donde luce y no se repite: la
   cabecera, el panel de inicio y la pantalla de entrada. */
button.btn-accent:not([style*="background"]),.btn-accent:not([style*="background"]){
  background:var(--primary-btn, var(--primary)) !important;
  color:#fff !important;
}
/* Los botones de contorno llevan la letra del color del club, salvo que
   traigan la suya escrita a mano: entonces se respeta la suya. */
.btn[style*="background:transparent"]:not([style*="color:"]):not([style*="color :"]),
.btn[style*="background: transparent"]:not([style*="color:"]):not([style*="color :"]){
  color:var(--primary-txt, var(--primary)) !important;
}

/* Un morado escrito a mano que tampoco llegaba al mínimo */



/* ── Últimos repasos de legibilidad ─────────────────────────────────── */

/* Textos blancos a medio pintar sobre el color del club: se suben a casi
   opacos. Se sigue viendo la jerarquía, pero ya se leen. */


/* La inicial del club, sobre la versión de botón del color */
.club-logo-mark.sin-logo{ background:var(--primary-btn, var(--primary)) !important; color:#fff !important; }

/* Las pestañas de la pantalla de entrada */
.login-tab{ color:rgba(255,255,255,0.88) !important; }
.login-tab.active{ color:var(--primary-txt, var(--primary)) !important; }


/* ── Pantalla de entrada del portal ─────────────────────────────────── */
.login-club,.login-status,.field label,.btn-link{ color:rgba(255,255,255,0.92) !important; }
.login-tab.active{ color:var(--primary-blanco, var(--primary)) !important; }


/* ── Repaso del modo oscuro con el color del club de verdad ──────────── */

/* Botones de contorno: escriben con la versión de letra del color */
.btn-sec,.btn-outline,.btn-ghost{ color:var(--primary-txt, var(--primary)) !important; }


/* Rellenos con el segundo color: la letra vuelve a ser blanca, porque el
   relleno ya viene calculado para que se lea encima. */



/* ════════════════════════════════════════════════════════════════════
   LOS DOS COLORES, FUNDIDOS (portal)
   ════════════════════════════════════════════════════════════════════ */
.header,header.app-header{
  background-color:var(--fusion-cab-plano, var(--tema-cab)) !important;
  background-image:var(--fusion-cab, none) !important;
  background-size:100% 100% !important;
  border-bottom:3px solid var(--acento-btn, var(--primary)) !important;
  box-shadow:none !important;
}
#login-screen{
  background-color:var(--fusion-login-plano, var(--tema-login)) !important;
  background-image:var(--fusion-login, none) !important;
  background-size:100% 100% !important;
}
.dash-hero,.profile-header,.profile-hero,.inicio-hero{
  background-color:var(--fusion-plano, var(--tema-hero)) !important;
  background-image:var(--fusion, none) !important;
  background-size:100% 100% !important;
}
/* Igual que en el gestor: la posición de esta barra no se toca. */
.bottom-nav,.nav-bar{ border-top:none !important; }
.bottom-nav::before,.nav-bar::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--fusion-linea, var(--primary)); z-index:1;
}
.card-title{ border-left:none !important; padding-left:12px !important; position:relative; }
.card-title::before{
  content:''; position:absolute; left:0; top:2px; bottom:2px; width:3px;
  border-radius:3px; background:var(--fusion-vertical, var(--primary));
}


/* ════════════════════════════════════════════════════════════════════
   TODA LA INFORMACIÓN, DE UNA SOLA GAMA
   Los morados, azules, ámbares y turquesas sueltos que había por la app
   pasan a la gama de TU color. El rojo del dinero, el verde de pagado y
   el verde de WhatsApp se quedan como estaban: dicen algo.
   ════════════════════════════════════════════════════════════════════ */



/* Los marcadores y el cronómetro quedan fuera: ahí el rojo y el azul son
   los dos competidores y no pueden cambiar de color. */
#mo-ov,#mo-ov *,.timer-futuristic,.timer-futuristic *,
.timer-display-box,.timer-display-box *{
  --gama-t2:initial; --gama-f1:initial; --gama-r2:initial;
}


/* ════════════════════════════════════════════════════════════════════
   REPASO DE LA GAMA
   El verde y el rojo se quedan porque dicen algo, pero con la
   profundidad justa para que la letra blanca de encima se lea.
   ════════════════════════════════════════════════════════════════════ */



/* El cronómetro es una pantalla de competición: panel negro siempre, esté
   la app en claro o en oscuro. Sus letras llevan su propio tono claro. */
.timer-futuristic label,.timer-futuristic .timer-input-group label{ color:#c8d3e2 !important; }
.timer-futuristic .btn[style*="color"],.timer-display-box *{ color:inherit; }

/* El chip de conexión, sobre el panel de inicio: un poco más de fondo para
   que el puntito y su texto se despeguen del color de detrás. */
#gd-net-chip{ background:rgba(0,0,0,0.28) !important; border:1px solid rgba(255,255,255,0.30) !important; color:#fff !important; }



/* ── Último repaso de legibilidad ───────────────────────────────────── */

/* Los botones del cronómetro llevan su color puesto desde JavaScript, así
   que se les llama por su nombre. Verde de arrancar, ámbar de pausar:
   los mismos colores, con la hondura justa para leer la letra blanca. */
#btn-timer-start{
  background:linear-gradient(135deg,#0b8258 0%,#046b4a 100%) !important;
  background-color:#0b8258 !important; color:#fff !important; border-color:#035c3f !important;
}
#btn-timer-pause{
  background:linear-gradient(135deg,#9f6707 0%,#7c4f05 100%) !important;
  background-color:#9f6707 !important; color:#fff !important; border-color:#6b4404 !important;
}

/* El marcador de taekwondo: el rojo y el azul son los competidores y se
   quedan, pero lo que va escrito encima tiene que leerse. */
.score-btn{
  background:rgba(0,0,0,0.30) !important;
  border:1px solid rgba(255,255,255,0.35) !important;
  color:#fff !important;
}

/* Lo que va escrito encima de un relleno de color, en blanco. Sin esto un
   icono con su propio color se quedaba azul sobre azul. */



/* ── El verde de guardar y el rojo de borrar no cambian de color ─────── */
button.btn-success:not([style*="background"]),.btn-success:not([style*="background"]){
  background-color:#0b7a52 !important;
  background-image:linear-gradient(135deg,#0b8258 0%,#046b4a 100%) !important;
  color:#fff !important;
}
button.btn-danger:not([style*="background"]),.btn-danger:not([style*="background"]){
  background-color:#b01e1e !important;
  background-image:linear-gradient(135deg,#c02626 0%,#941616 100%) !important;
  color:#fff !important;
}
.btn-success:not([style*="background"]) *,.btn-danger:not([style*="background"]) *{ color:#fff !important; }

/* ── La etiqueta del marcador, sobre pastilla, para leerla de lejos ──── */
[style*="color:#fca5a5"],[style*="color: #fca5a5"],
[style*="color:#93c5fd"],[style*="color: #93c5fd"]{
  color:#fff !important;
  background:rgba(0,0,0,0.34) !important;
  border-radius:9px !important;
  padding:3px 9px !important;
  display:inline-block !important;
}


/* ── Botones del portal ─────────────────────────────────────────────── */
.btn-primary:not([style*="background"]){
  background-color:var(--fusion-plano, var(--primary-btn)) !important;
  background-image:var(--fusion, none) !important;
  color:#fff !important;
}
.btn-primary:not([style*="background"]) *{ color:#fff !important; }
/* El de escanear el QR va translúcido encima del color: se le da algo más
   de fondo para que la letra blanca se despegue. */
[data-i18n="p2_btn_scanqr"]{ background:rgba(0,0,0,0.34) !important; color:#fff !important; border:1px solid rgba(255,255,255,0.30) !important; }


/* ── Los tres últimos repasos ───────────────────────────────────────── */
.dash-chip{
  background:rgba(0,0,0,0.26) !important;
  border-color:rgba(255,255,255,0.34) !important;
  color:#fff !important;
}
/* El cinturón del socio, bajo su nombre, en la cabecera */
.header-sub{ color:rgba(255,255,255,0.93) !important; }


/* El verde de «todo bien», cuando hace de LETRA sobre fondo claro, se
   queda un pelo corto (4,04 de 4,5). Se oscurece solo la letra: sigue
   siendo el mismo verde y ya se lee. */



/* Los fondos verdes muy claros que solo son decoración pasan a la gama del
   club. El verde se queda donde dice algo: la letra de estado y los
   botones de acción. */



/* Cuando un fondo pálido pasa a la gama del club, la letra de encima tiene
   que ir con él. Antes se quedaba con su tinta antigua y de noche salía
   oscuro sobre oscuro: contraste 1,15, o sea invisible. */



/* Los botones que el pase en vivo ha marcado como «del color del club» */
[data-gd-uni="1"]{
  background-color:var(--primary-btn, var(--primary)) !important;
  background-image:none !important;
  color:#fff !important;
  border-color:var(--primary-btn, var(--primary)) !important;
}
[data-gd-uni="1"] *{ color:#fff !important; }
/* Y los avisos que ha marcado como «del tono suave del club» */
[data-gd-uni="2"]{
  background-color:var(--gama-f1, #f2f4f7) !important;
  background-image:none !important;
  color:var(--gama-t3, var(--primary-txt)) !important;
  border-color:var(--gama-borde, var(--border)) !important;
}
[data-gd-uni="2"] *{ color:var(--gama-t3, var(--primary-txt)) !important; }


/* ── Últimos dos ajustes de uniformidad ─────────────────────────────── */

/* Los títulos de sección van SIEMPRE del color del club, aunque alguno
   llevara el verde escrito a mano. Un título en verde y el de al lado en
   el color del tema es justo lo que se veía descolocado. */


/* En cambio los verdes claros del DINERO se quedan verdes: son los que
   dicen «pagado» de un vistazo, y para eso los conservamos. */



/* El título verde estaba en un <span> DENTRO del desplegable, no en el
   desplegable, por eso se escapaba. Cualquier título que cuelgue de una
   cabecera de sección va del color del club. */



/* Un botón que antes era gris y ahora lleva el color del club: de noche
   había una regla vieja que le ponía tinta oscura pensando que seguía
   siendo gris. Con el color del club encima, la letra va en blanco. */
body.dark-mode [data-gd-uni="1"],body.dark-mode [data-gd-uni="1"] *{ color:#fff !important; }
body.dark-mode [data-gd-uni="2"],body.dark-mode [data-gd-uni="2"] *{ color:var(--gama-t3, var(--primary-txt)) !important; }


/* ════════════════════════════════════════════════════════════════════
   LOS COLORES, POR ETIQUETA
   Antes esto eran 840 reglas que buscaban texto dentro del atributo
   «style» de cada elemento. El navegador las comprobaba todas contra
   todos los elementos cada vez que algo se movía, y el cambio de pantalla
   se iba a más de un segundo en un móvil.
   Ahora un pase le pone una etiqueta a cada elemento una sola vez, y aquí
   solo hay que mirar esa etiqueta. Se ve igual y va como un tiro.
   ════════════════════════════════════════════════════════════════════ */
[data-gd-c="relleno"]{
  background-color:var(--primary-btn, var(--primary)) !important;
  background-image:none !important; color:#fff !important;
  border-color:var(--primary-btn, var(--primary)) !important;
}
[data-gd-c="relleno"] *{ color:#fff !important; }
/* El fondo suave cambia SOLO el fondo. El texto de dentro se queda como
   estaba: si le impusiéramos el color del club, un párrafo largo dentro de
   una tarjeta acabaría entero en morado. Y como este fondo ya se adapta al
   modo claro u oscuro, la letra de siempre se sigue leyendo. */
[data-gd-c="suave"]{
  background-color:var(--gama-f1, #f2f4f7) !important;
  background-image:none !important;
  border-color:var(--gama-borde, var(--border)) !important;
}
[data-gd-c="letra"]{ color:var(--gama-t2, var(--primary-txt)) !important; }
[data-gd-c="borde"]{ border-color:var(--gama-borde, var(--border)) !important; }
[data-gd-c="verde"]{
  background-color:#0b7a52 !important;
  background-image:linear-gradient(135deg,#0b8258 0%,#046b4a 100%) !important;
  color:#fff !important;
}
[data-gd-c="verde"] *{ color:#fff !important; }
[data-gd-c="verde-suave"]{
  background-color:#d1fae5 !important; background-image:none !important;
  color:#0a5c41 !important; border-color:#34d399 !important;
}
body.dark-mode [data-gd-c="verde-suave"]{ background-color:#0e3a28 !important; color:#6ee7b7 !important; }
[data-gd-c="rojo"]{
  background-color:#b01e1e !important;
  background-image:linear-gradient(135deg,#c02626 0%,#941616 100%) !important;
  color:#fff !important;
}
[data-gd-c="rojo"] *{ color:#fff !important; }
[data-gd-c="rojo-suave"]{ background-color:#fee2e2 !important; color:#8f1d1d !important; }
body.dark-mode [data-gd-c="rojo-suave"]{ background-color:#3a1414 !important; color:#fca5a5 !important; }
[data-gd-c="wa"]{ color:#0b2b18 !important; }
[data-gd-c="blanco"]{ color:rgba(255,255,255,0.92) !important; }
/* De noche hay reglas viejas que le cambian la tinta a lo que lleve
   ciertos colores escritos a mano. Un relleno de color siempre lleva letra
   blanca, mande quien mande. */
body.dark-mode [data-gd-c="relleno"],body.dark-mode [data-gd-c="relleno"] *,
body.dark-mode [data-gd-c="rojo"],body.dark-mode [data-gd-c="rojo"] *,
body.dark-mode [data-gd-c="verde"],body.dark-mode [data-gd-c="verde"] *{ color:#fff !important; }
[data-gd-c="rojo"],[data-gd-c="rojo"] *,[data-gd-c="verde"],[data-gd-c="verde"] *{ color:#fff !important; }


/* ── Letra de color que SÍ dice algo: roja de deuda, verde de pagado ──
   Antes esto eran una docena de reglas que buscaban cada color a mano.
   Ahora el pase las etiqueta y aquí solo se les da el tono que se lee en
   cada modo, conservando el rojo y el verde. */
[data-gd-c="letra-roja"]{ color:#b01e1e !important; }
body.dark-mode [data-gd-c="letra-roja"]{ color:#fca5a5 !important; }
[data-gd-c="letra-verde"]{ color:#0b6b3c !important; }
body.dark-mode [data-gd-c="letra-verde"]{ color:#6ee7b7 !important; }

/* ── Una sola animación al cambiar de pestaña ────────────────────────
   La pantalla entera ya se desliza. Que además cada tarjeta apareciera
   por su cuenta significaba animar quince cosas a la vez en pestañas
   cargadas, y que el cambio tardara distinto según la pestaña. */
.tab-content.active>.card{ animation:none !important; }


/* Los títulos de sección, todos del color del club */
[data-gd-c="titulo"]{ color:var(--primary-txt, var(--primary)) !important; }


/* El portal no lleva el pase por etiqueta, así que estas dos se quedan
   escritas: son pocas y no pesan. */
[style*="background:var(--accent)"],[style*="background: var(--accent)"]{
  background:var(--acento-btn, var(--primary-btn)) !important; color:#fff !important;
}
body.dark-mode [style*="background:var(--accent)"],
body.dark-mode [style*="background: var(--accent)"]{ color:#fff !important; }


/* Los textos blancos a medio pintar de la pantalla de entrada. En el gestor
   esto lo resuelve el pase por etiqueta; aquí van escritos, que son pocos. */
[style*="color:rgba(255,255,255,0.5"],[style*="color: rgba(255,255,255,0.5"],
[style*="color:rgba(255,255,255,0.6"],[style*="color: rgba(255,255,255,0.6"],
[style*="color:rgba(255,255,255,0.7"],[style*="color: rgba(255,255,255,0.7"]{
  color:rgba(255,255,255,0.92) !important;
}

@media (prefers-reduced-motion: reduce){ *{animation-duration:0.01ms !important;transition-duration:0.01ms !important;} }