/* ════════════════════════════════════════════════════════════════════
   GestionDo · acabado profesional
   Esta hoja va la última, así que manda sobre las anteriores.
   Solo cambia el ASPECTO: colores, esquinas, sombras, letra y espacios.
   No toca nada que la app haga: ni posiciones, ni mostrar/ocultar.
   ════════════════════════════════════════════════════════════════════ */

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

/* — Letra: menos peso bruto, más jerarquía — */
body,button,input,select,textarea{ letter-spacing:-0.005em; }
h1,h2,h3,h4{ letter-spacing:-0.02em; }
.card-title,.section-title{ font-weight:700 !important; letter-spacing:-0.01em; }

/* — Botones: rectos, planos y con un solo color — */
button.btn{
  background:var(--primary);
  border-radius:10px !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-weight:650 !important;
  font-size:0.9rem !important;
  padding:12px 18px !important;
  box-shadow:0 1px 2px rgba(16,24,40,0.07) !important;
  transition:background-color .15s ease,box-shadow .15s ease,transform .1s ease !important;
}
button.btn::after{ display:none !important; }
button.btn:hover{ transform:none !important; filter:none !important; box-shadow:0 2px 6px rgba(16,24,40,0.12) !important; }
button.btn:active{ transform:translateY(1px) !important; }
button.btn-accent{ background:var(--p-az56); }
button.btn-success{ background:var(--p-vd29); }
button.btn-danger{ background:var(--danger); border-radius:10px !important; }
/* El ámbar claro con letra blanca no se lee: para botón, ámbar oscuro */
button.btn-energy{ background:var(--p-nj37); }
button.btn-muted{ background:var(--bg-card-2); color:var(--text-main) !important; border:1px solid var(--border) !important; }
/* En oscuro, el fondo del botón se mantiene profundo para que la letra
   blanca se siga leyendo, aunque el azul de los textos sea más claro */
body.dark-mode button.btn{ background:var(--p-az53); }
body.dark-mode button.btn-accent{ background:var(--p-az53); }
body.dark-mode button.btn-success{ background:var(--p-vd29); }
body.dark-mode button.btn-danger{ background:var(--p-rj40a); }
body.dark-mode button.btn-energy{ background:var(--p-nj37); }
body.dark-mode button.btn-muted{ background:rgba(255,255,255,0.08); }

/* — Tarjetas: borde fino y sombra corta, con más aire dentro — */
.card,.member-card,.dash-stat,.fin-box,.modal-content{
  border-width:1px !important;
  box-shadow:var(--shadow-sm) !important;
}
.card{ border-radius:var(--radius-md) !important; }
.dash-stat::before{ display:none !important; }
.dash-stat:hover{ transform:none !important; box-shadow:var(--shadow-md) !important; border-color:var(--border-strong) !important; }
.dash-stat-value{ font-weight:700 !important; letter-spacing:-0.03em !important; }
.dash-stat-label{ letter-spacing:0.04em !important; font-weight:700 !important; }

/* — La cabecera de Inicio: un azul sólido, sin animación ni brillos — */
.dash-hero{
  background:linear-gradient(135deg,var(--t1) 0%,var(--t2) 100%) !important;
  animation:none !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-md) !important;
}
.dash-hero::before,.dash-hero::after{ display:none !important; }
.dash-hero h2{ font-weight:700 !important; text-shadow:none !important; letter-spacing:-0.02em !important; }
.dash-chip{ background:rgba(255,255,255,0.13) !important; border-color:rgba(255,255,255,0.2) !important; font-weight:600 !important; }

/* — Campos de texto: como los de una herramienta seria — */
input,select,textarea{ border-width:1px !important; border-radius:9px !important; }
input:focus,select:focus,textarea:focus{ border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-glow) !important; }

/* — Barra de pestañas y menú lateral — */
.nav-tabs{ box-shadow:0 -1px 0 var(--border) !important; }
.sidebar{ box-shadow:var(--shadow-lg) !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); }

/* — Menos movimiento para quien lo prefiera — */

/* — La barra de arriba: azul marino liso, sin morado, sin animación — */
header{
  background:linear-gradient(135deg,var(--t1) 0%,var(--t2) 100%) !important;
  background-size:100% 100% !important;
  animation:none !important;
  box-shadow:0 1px 3px rgba(16,24,40,0.16) !important;
  border-bottom:1px solid rgba(255,255,255,0.10) !important;
}
header h1,header .club-name-display{
  font-weight:700 !important;
  letter-spacing:0.10em !important;
  text-shadow:none !important;
  white-space:nowrap;
}
header .subtitle{ opacity:0.62 !important; font-weight:500 !important; }
/* Los botones de la derecha ya no se salen de la pantalla: se aprietan un
   poco y, si aun así no caben, se pueden deslizar con el dedo */
header > div:first-of-type{ min-width:0; flex:1 1 auto; overflow:hidden; }
header > div:first-of-type h1,header > div:first-of-type .club-name-display{ font-size:0.84rem !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
header > div:first-of-type .subtitle{ font-size:0.53rem !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
header > div:last-of-type{ min-width:0; flex:0 0 auto; gap:2px !important; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
header > div:last-of-type::-webkit-scrollbar{ display:none; }
header > div:last-of-type > button{ flex:0 0 auto; padding:5px 6px !important; font-size:0.98rem !important; line-height:1.1 !important; }
header > div:last-of-type > button#btn-lang{ font-size:0.62rem !important; padding:4px 5px !important; }
header > div:last-of-type > button#gd-net-chip{ font-size:0.58rem !important; padding:4px 6px !important; }

/* — Menú lateral a juego — */
.sidebar-header{
  background:linear-gradient(135deg,var(--t1),var(--t2)) !important;
  border-bottom:1px solid rgba(255,255,255,0.12) !important;
}
.sidebar-header h3{ font-weight:700 !important; letter-spacing:0.08em !important; }

/* — Pestañas de abajo: la activa se marca en azul acero — */
.tab-btn.active{ color:var(--primary) !important; }

/* — Etiquetas y píldoras: menos grito — */
.badge,.pill,.chip{ font-weight:650 !important; letter-spacing:0 !important; }


/* ════════════════════════════════════════════════════════════════════
   MODO OSCURO: que se lea absolutamente todo
   El azul marino va muy bien sobre blanco, pero sobre negro desaparece.
   Así que de noche los mismos colores se aclaran. Medido texto a texto.
   ════════════════════════════════════════════════════════════════════ */
body.dark-mode{
  --bg-app:var(--p-az08); --bg-card:var(--p-az13); --bg-card-2:var(--p-az11b);
  --text-main:var(--p-az95); --text-muted:var(--p-az70);
  --bg-secondary:var(--bg-card); --bg-primary:var(--bg-app); --text-primary:var(--text-main);
  --border:rgba(255,255,255,0.11); --border-strong:rgba(255,255,255,0.20);
  --primary:var(--p-az66); --primary-light:var(--p-az76); --primary-glow:rgba(91,144,245,0.18);
  --accent:var(--p-az73); --accent-light:var(--p-az82a); --accent-glow:rgba(123,166,247,0.16);
  --success:var(--p-vd58); --danger:var(--p-rj71); --warning:var(--p-nj56);
  --energy:var(--p-nj56); --energy-light:rgba(251,191,36,0.16);
}
/* Un texto oscuro suelto sobre tarjeta oscura no se lee: se aclara */
body.dark-mode .card-title,body.dark-mode .section-title,body.dark-mode label,
body.dark-mode legend,body.dark-mode summary{ color:var(--text-main); }
body.dark-mode .fin-label{ color:var(--text-main); }
body.dark-mode input,body.dark-mode select,body.dark-mode textarea{
  background:rgba(255,255,255,0.05); color:var(--text-main); border-color:var(--border);
}
body.dark-mode input::placeholder,body.dark-mode textarea::placeholder{ color:var(--p-az59a); }
body.dark-mode input:focus,body.dark-mode select:focus,body.dark-mode textarea:focus{ background:rgba(255,255,255,0.09); }


/* ── Rescate de contraste en OSCURO ──────────────────────────────────
   Hay botones con el color escrito a mano dentro de la propia etiqueta.
   De noche esos colores se aclaran y la letra blanca encima deja de leerse.
   Aquí se le pone tinta oscura a esos botones concretos. */

/* Grises escritos a mano que de noche quedan demasiado apagados.
   Solo cuando el gris es la LETRA; si es el fondo del botón, no se toca. */

/* Verdes y azules oscuros escritos a mano: de noche se aclaran */

/* Excepción: si además lleva un fondo claro escrito a mano, la letra tiene que
   seguir siendo oscura. Va después para que mande sobre lo de arriba. */

/* Los recuadros verdes de aviso, en su versión de noche */
body.dark-mode .alert-ok{ background:rgba(16,185,129,0.14) !important; color:var(--p-vd67) !important; border-color:rgba(16,185,129,0.35) !important; }
/* Y los ámbar y los rojos, que no la tenían. Sin esto, de noche el fondo se
   oscurecía por su cuenta y la letra se quedaba marrón: no se leía nada. */
body.dark-mode .alert-warning{ background:rgba(245,158,11,0.16) !important; color:var(--p-am65) !important; border-color:rgba(245,158,11,0.38) !important; }
body.dark-mode .alert-danger{ background:rgba(239,68,68,0.16) !important; color:var(--p-rj82) !important; border-color:rgba(239,68,68,0.38) !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;
}


/* ── Iconos de trazo en lugar de emojis ── */
.gd-ico{ display:inline-flex; align-items:center; justify-content:center; vertical-align:-0.155em; position:relative; }
.gd-ico .gd-svg{ width:1.06em; height:1.06em; display:block; flex:0 0 auto; }
.gd-ico .gd-e{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }


/* ════════════════════════════════════════════════════════════════════
   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;
  /* El color del club, en grande. Se mezcla con su tono oscuro lo justo para
     que la letra blanca se lea bien con CUALQUIERA de los temas. */
  background-color:var(--tema-cab, 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{
  background-image:none !important;
  background-color:var(--t1) !important;
  border:1px solid rgba(255,255,255,0.09) !important;
  box-shadow:var(--shadow-sm) !important;
  position:relative;
}
/* Una raya del color elegido, del lado izquierdo: firma la pantalla sin gritar */
.dash-hero::before{
  content:'' !important; display:block !important;
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--primary); border-radius:var(--radius-lg) 0 0 var(--radius-lg);
  font-size:0 !important; opacity:1 !important; transform:none !important;
}
.dash-stat-label{ text-transform:uppercase !important; letter-spacing:0.075em !important; font-size:0.66rem !important; font-weight:700 !important; }
.dash-stat-value{ font-weight:700 !important; letter-spacing:-0.03em !important; }
.card,.member-card,.dash-stat,.fin-box,.modal-content{ border-color:var(--border) !important; }
/* Los iconos, del mismo grosor que la letra que acompañan */
.gd-ico .gd-svg{ stroke-width:1.7; }
.dash-hero .gd-ico .gd-svg,.dash-chip .gd-ico .gd-svg{ stroke-width:1.6; }


/* ════════════════════════════════════════════════════════════════════
   LA MARCA DEL CLUB
   El programa es serio, pero tiene que verse de quién es. El logo y el
   nombre del club presiden la cabecera, el menú y la ficha de inicio.
   ════════════════════════════════════════════════════════════════════ */
.club-logo-mark{
  flex:0 0 auto; width:34px; height:34px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  overflow:hidden; background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.22);
  font-weight:800; font-size:1rem; color:var(--p-gr100); line-height:1;
}
.club-logo-mark img{ width:100%; height:100%; object-fit:contain; display:block; }
.club-logo-mark.sin-logo{ background:var(--primary); border-color:transparent; }
.club-logo-mark--grande{ width:42px; height:42px; border-radius:11px; font-size:1.2rem; margin-right:11px; }
.club-logo-mark--hero{
  position:absolute; right:16px; top:16px; width:52px; height:52px;
  border-radius:13px; font-size:1.5rem; z-index:2;
  background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.26);
}
.club-logo-mark--hero.sin-logo{ background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.26); }
.sidebar-header{ align-items:center; }
/* En la cabecera el logo y el nombre del club van juntos y a la izquierda:
   es la identidad del club, no un adorno centrado. */
header .club-logo-mark{ width:30px; height:30px; border-radius:8px; font-size:0.92rem; margin-right:8px; }
header > div:first-of-type{ text-align:left !important; }
header > div:first-of-type .subtitle{ display:none !important; }
header > div:first-of-type h1,header > div:first-of-type .club-name-display{
  font-size:0.92rem !important; letter-spacing:0.02em !important; text-transform:none !important;
}

/* ── El color elegido ocupa un bloque de verdad: la ficha de inicio ── */
.dash-hero{
  background-color:var(--tema-hero, var(--t2)) !important;
  border:none !important;
  padding-right:80px !important;
}
/* Una franja del color arriba de cada tarjeta de cifras: se ve el tema
   sin ensuciar la tarjeta */
.dash-stat{ position:relative; overflow:hidden; }
.dash-stat::after{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--primary); display:block;
}
.dash-stat-value{ color:var(--primary) !important; }
/* Los títulos de sección llevan una marca del color a la izquierda */
.card-title{ border-left:3px solid var(--primary); padding-left:9px; }
/* La pestaña activa de abajo, con su barra del color */
.tab-btn.active{ position:relative; }
.tab-btn.active::after{
  content:''; position:absolute; left:22%; right:22%; top:0; height:3px;
  border-radius:0 0 3px 3px; background:var(--primary);
}
.dash-hero::before{ width:4px !important; background:rgba(255,255,255,0.55) !important; }
.dash-hero h2{ font-size:1.28rem !important; }
/* La raya de la cabecera, más presente */
header,.header,header.app-header{ border-bottom-width:3px !important; }

/* ════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA
   Inter para todo: es la letra de las herramientas de gestión modernas,
   se lee muy bien en pantallas pequeñas y tiene cifras de ancho fijo.
   ════════════════════════════════════════════════════════════════════ */
body{
  font-family:'Inter','Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
/* Una sola letra en toda la app: todo hereda de aquí */
/* 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; }
/* Salvo lo que de verdad necesita ancho fijo */
code,pre,kbd,samp,[style*="monospace"]{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace !important; }
/* Las cifras, de ancho fijo, para que las columnas de dinero cuadren */
.dash-stat-value,.pstat-val,td,th{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.dash-stat-value{ letter-spacing:-0.035em !important; }


/* ════════════════════════════════════════════════════════════════════
   EL COLOR DEL CLUB, POR TODA LA APP
   El color 1 lleva la estructura: dónde estás y qué es lo importante.
   El color 2 acompaña: remates, bordes y lo secundario.
   Los tonos vienen ya calculados desde el propio tema, así que ninguna
   letra se queda sin leer ni de día ni de noche.
   ════════════════════════════════════════════════════════════════════ */

/* — El fondo entero lleva un velo del color elegido — */
body{ background-color:var(--tema-tinte, var(--bg-app)) !important; }
body.dark-mode{ background-color:var(--tema-tinte-osc, var(--p-az08)) !important; }

/* — La barra de abajo: el color manda — */
.nav-tabs{
  background:var(--tema-tinte-2, var(--bg-card)) !important;
  border-top:3px solid var(--primary) !important;
}
body.dark-mode .nav-tabs{
  background:var(--tema-tinte-osc-2, var(--p-az10a)) !important;
  border-top-color:var(--primary) !important;
}
.tab-btn.active{ color:var(--primary-tinta, var(--primary)) !important; }
body.dark-mode .tab-btn.active{ color:var(--primary-tinta-osc, var(--primary-light)) !important; }
.tab-btn.active::after{ background:var(--acento, var(--primary)) !important; }

/* — La cabecera enseña los DOS colores: el 1 en la raya, el 2 debajo — */
header,.header,header.app-header{
  border-bottom:3px solid var(--primary) !important;
  box-shadow:0 3px 0 0 var(--acento, var(--primary)) !important;
}

/* — Las tarjetas llevan el color en el borde — */
.card,.member-card,.fin-box,.modal-content{ border-color:var(--tema-borde, var(--border)) !important; }
body.dark-mode .card,body.dark-mode .member-card,
body.dark-mode .fin-box,body.dark-mode .modal-content{
  border-color:var(--tema-borde-osc, rgba(255,255,255,0.10)) !important;
}

/* — Las cabeceras de tabla, teñidas y firmadas — */
th{
  background:var(--tema-tinte-2, var(--bg-card-2)) !important;
  border-bottom:2px solid var(--primary) !important;
}
body.dark-mode th{ background:var(--tema-tinte-osc-2, var(--p-az13a)) !important; }

/* — Las cifras: la primera con el color 1, la siguiente con el 2 — */
.dash-stat:nth-of-type(even)::after{ background:var(--acento, var(--primary)) !important; }
.dash-stat:nth-of-type(even) .dash-stat-value{ color:var(--acento-tinta, var(--primary)) !important; }
body.dark-mode .dash-stat-value{ color:var(--primary-tinta-osc, var(--primary-light)) !important; }
body.dark-mode .dash-stat:nth-of-type(even) .dash-stat-value{ color:var(--acento-tinta-osc, var(--primary-light)) !important; }
.dash-stat{ background:var(--bg-card) !important; }
body.dark-mode .dash-stat{ background:var(--p-az14) !important; }

/* — Los títulos de sección: raya del color 1 sobre un velo del 2 — */
.card-title{
  border-left:3px solid var(--primary) !important;
  padding-left:9px !important;
}

/* — Al escribir, el color del club te acompaña — */
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;
}

/* — Lo que marcas con el dedo — */
::selection{ background:var(--primary); color:var(--p-gr100); }

/* — La barra de desplazamiento, de los dos colores — */
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--acento, var(--primary)), var(--primary)) !important;
}

/* — El menú lateral, firmado por dentro para no moverse de sitio — */
.sidebar{ box-shadow:inset -4px 0 0 0 var(--primary), 8px 0 40px rgba(26,26,46,0.20) !important; }
.sidebar-item:hover{ background:var(--tema-tinte-2, transparent) !important; }
body.dark-mode .sidebar-item:hover{ background:var(--tema-tinte-osc-2, transparent) !important; }

/* — Las ventanas: su título, del color del club — */
.modal-header{ border-bottom:2px solid var(--primary) !important; }
.modal-header h3{ color:var(--primary-tinta, var(--primary)) !important; }
body.dark-mode .modal-header h3{ color:var(--primary-tinta-osc, var(--primary-light)) !important; }

/* — Los desplegables de ajustes — */
details > summary{ color:var(--primary-tinta, var(--primary)); }
body.dark-mode details > summary{ color:var(--primary-tinta-osc, var(--primary-light)); }

/* — El botón del color 2, que se note que es el segundo — */
button.btn-accent{
  background:linear-gradient(135deg,var(--acento),var(--acento-tinta)) !important;
  color:var(--p-gr100) !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:var(--p-nj44)"],[style*="color: var(--p-nj44)"],
[style*="color:var(--p-nj50)"],[style*="color: var(--p-nj50)"],
[style*="color:var(--p-nj44)"] *,
.av-pill[data-tone="ambar"],.av-det[data-tone="ambar"]{ --tone:var(--p-nj35); }

/* 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:var(--p-gr100) !important;
}
button.btn-accent:not([style*="background"]),.btn-accent:not([style*="background"]){
  background:var(--acento-btn, var(--acento, var(--primary))) !important;
  color:var(--p-gr100) !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:var(--p-gr100) !important; }

/* La flechita de los desplegables iba en ámbar claro sobre blanco */
.summary-chevron,.summary-chevron *{ color:var(--p-nj35) !important; }
body.dark-mode .summary-chevron,body.dark-mode .summary-chevron *{ color:var(--p-nj56) !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 EN LAS ZONAS GRANDES
   Si eliges dos, se funden. Si eliges uno, se funde con su tono hermano
   y queda un degradado del color principal. Siempre con letra blanca.
   ════════════════════════════════════════════════════════════════════ */
header,.header,header.app-header,.sidebar-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{
  background-color:var(--fusion-plano, var(--tema-hero)) !important;
  background-image:var(--fusion, none) !important;
  background-size:100% 100% !important;
}
/* Los botones principales también funden los dos colores */
/* Un solo relleno para todos los botones. El degradado de los dos
   colores se queda donde luce y no se repite: la cabecera, el panel de
   inicio y la pantalla de entrada. */
button.btn:not([style*="background"]),.btn:not([style*="background"]),
button.btn-accent:not([style*="background"]),.btn-accent:not([style*="background"]){
  background-color:var(--primary-btn, var(--primary)) !important;
  background-image:none !important;
  color:var(--p-gr100) !important;
}
/* Las rayas finas llevan los dos colores a pleno, sin rebajar */
.dash-stat::after{ background:var(--fusion-linea, var(--primary)) !important; }
.dash-stat:nth-of-type(even)::after{ background:var(--fusion-linea, var(--primary)) !important; }
.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));
}
.tab-btn.active::after{ background:var(--fusion-linea, var(--primary)) !important; }
/* Ojo: NO se le toca la posición. Esta barra va clavada abajo con
   «fixed», y un elemento fijo ya sirve de referencia para colgarle la
   raya de encima. Ponerle «relative» la despegaba del fondo de la
   pantalla y había que bajar del todo para verla. */
.nav-tabs{ border-top:none !important; }
.nav-tabs::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:var(--fusion-linea, var(--primary)); z-index:1;
}


/* ════════════════════════════════════════════════════════════════════
   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:var(--p-az84b) !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:var(--p-gr100) !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,var(--p-vd28) 0%,var(--p-vd22) 100%) !important;
  background-color:var(--p-vd28) !important; color:var(--p-gr100) !important; border-color:var(--p-vd19) !important;
}
#btn-timer-pause{
  background:linear-gradient(135deg,var(--p-nj33) 0%,var(--p-nj25) 100%) !important;
  background-color:var(--p-nj33) !important; color:var(--p-gr100) !important; border-color:var(--p-nj22) !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:var(--p-gr100) !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:var(--p-vd26) !important;
  background-image:linear-gradient(135deg,var(--p-vd28) 0%,var(--p-vd22) 100%) !important;
  color:var(--p-gr100) !important;
}
button.btn-danger:not([style*="background"]),.btn-danger:not([style*="background"]){
  background-color:var(--p-rj40) !important;
  background-image:linear-gradient(135deg,var(--p-rj45) 0%,var(--p-rj33) 100%) !important;
  color:var(--p-gr100) !important;
}
.btn-success:not([style*="background"]) *,.btn-danger:not([style*="background"]) *{ color:var(--p-gr100) !important; }

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


/* ── Los tres últimos repasos ───────────────────────────────────────── */

/* Las pastillas de la ficha de inicio se apoyan en oscuro, no en claro:
   así la letra blanca se lee en cualquier punto del degradado. */
.dash-chip{
  background:rgba(0,0,0,0.26) !important;
  border-color:rgba(255,255,255,0.34) !important;
  color:var(--p-gr100) !important;
}

/* La tarjeta de la copia en la nube, a la gama del club */
.cloud-sync-card,.cloud-sync-header,.cloud-sync-title{ background:var(--gama-f1, var(--p-az96b)) !important; }
.cloud-sync-title h4,.cloud-sync-title p,.cloud-sync-header h4{ color:var(--gama-t3, var(--primary-txt)) !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. */



/* La tarjeta de «Enviar las apps a tu gente» no es dinero ni aviso: es una
   invitación. Pasa entera a la gama del club, como el resto de la
   información. Su color lo llevaba en rgba(), que no lo pillan las reglas
   por color, así que se la llama por su nombre. */
#dash-enviar-apps{
  background-color:var(--gama-f1, var(--p-az96b)) !important;
  background-image:none !important;
  border-color:var(--gama-borde, var(--border)) !important;
}
#dash-enviar-apps > div:first-child{ color:var(--gama-t3, var(--primary-txt)) !important; }
#dash-enviar-apps .btn{
  background-color:var(--fusion-plano, var(--primary-btn)) !important;
  background-image:var(--fusion, none) !important;
  color:var(--p-gr100) !important;
}
#dash-enviar-apps .btn *{ color:var(--p-gr100) !important; }


/* El borde de la tarjeta de la copia en la nube también a la gama */
.cloud-sync-card{ border-color:var(--gama-borde, var(--border)) !important; }


/* 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:var(--p-gr100) !important;
  border-color:var(--primary-btn, var(--primary)) !important;
}
[data-gd-uni="1"] *{ color:var(--p-gr100) !important; }
/* Y los avisos que ha marcado como «del tono suave del club» */
[data-gd-uni="2"]{
  background-color:var(--gama-f1, var(--p-az96c)) !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:var(--p-gr100) !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:var(--p-gr100) !important;
  border-color:var(--primary-btn, var(--primary)) !important;
}
[data-gd-c="relleno"] *{ color:var(--p-gr100) !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, var(--p-az96c)) !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:var(--p-vd26) !important;
  background-image:linear-gradient(135deg,var(--p-vd28) 0%,var(--p-vd22) 100%) !important;
  color:var(--p-gr100) !important;
}
[data-gd-c="verde"] *{ color:var(--p-gr100) !important; }
[data-gd-c="verde-suave"]{
  background-color:var(--p-vd90) !important; background-image:none !important;
  color:var(--p-vd20a) !important; border-color:var(--p-vd52) !important;
}
body.dark-mode [data-gd-c="verde-suave"]{ background-color:var(--p-vd14) !important; color:var(--p-vd67) !important; }
[data-gd-c="rojo"]{
  background-color:var(--p-rj40) !important;
  background-image:linear-gradient(135deg,var(--p-rj45) 0%,var(--p-rj33) 100%) !important;
  color:var(--p-gr100) !important;
}
[data-gd-c="rojo"] *{ color:var(--p-gr100) !important; }
[data-gd-c="rojo-suave"]{ background-color:var(--p-rj94) !important; color:var(--p-rj34) !important; }
body.dark-mode [data-gd-c="rojo-suave"]{ background-color:var(--p-rj15a) !important; color:var(--p-rj82) !important; }
[data-gd-c="wa"]{ color:var(--p-vd11) !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:var(--p-gr100) !important; }
[data-gd-c="rojo"],[data-gd-c="rojo"] *,[data-gd-c="verde"],[data-gd-c="verde"] *{ color:var(--p-gr100) !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:var(--p-rj40) !important; }
body.dark-mode [data-gd-c="letra-roja"]{ color:var(--p-rj82) !important; }
[data-gd-c="letra-verde"]{ color:var(--p-vd23) !important; }
body.dark-mode [data-gd-c="letra-verde"]{ color:var(--p-vd67) !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; }


/* Un gris medio puesto a mano pasa al gris de la app, que se aclara solo
   cuando enciendes el modo oscuro. */
[data-gd-c="letra-gris"]{ color:var(--text-muted, var(--p-az41)) !important; }


/* ── Que quepan las ocho pestañas sin tener que arrastrar la barra ────
   Cada botón traía un ancho mínimo de 52 píxeles: con ocho pestañas eso
   son 416 y en un móvil de 412 la última se quedaba fuera. Se les quita
   el mínimo y se reparten el ancho entre todos, que es lo que hace falta
   para que la de Herramientas se vea sin arrastrar nada. */
.nav-tabs{ overflow-x:hidden !important; }
.tab-btn{
  min-width:0 !important;
  padding-left:1px !important; padding-right:1px !important;
  font-size:0.5rem !important; letter-spacing:0 !important;
}
.tab-btn>span:last-child{
  display:block; width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.tab-btn .icon{ font-size:1.14rem !important; }
@media(min-width:768px){
  .nav-tabs{ overflow-x:auto !important; }
  .tab-btn{ font-size:0.52rem !important; padding-left:4px !important; padding-right:4px !important; }
}
@media(min-width:1024px){ .tab-btn{ font-size:0.85rem !important; } }

/* ═══════════════════════════════════════════════════════════════
   BARRA DE ABAJO: CINCO SITIOS
   Lo de arriba repartía SIETE botones: 56 px cada uno y letra de
   8,8 px, que nadie lee de un vistazo. En móvil (menos de 768 px)
   se ven cinco de 78 px con letra de 10,5 px, y el quinto es «Más».
   Los tres que pasan a «Más» llevan data-nav="mas" y solo se
   esconden en móvil: en tableta y ordenador siguen todos.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:767.98px){
  .nav-tabs .tab-btn[data-nav="mas"]{ display:none !important; }
  #nav-mas{ display:flex !important; }
  .nav-tabs .tab-btn{
    font-size:0.66rem !important; text-transform:none !important;
    letter-spacing:0 !important; padding:7px 2px 6px !important; gap:3px !important;
  }
  .nav-tabs .tab-btn .icon{ font-size:1.32rem !important; }
  .nav-tabs .tab-btn > span:last-child{ font-weight:700; line-height:1.15; }
}
@media (max-width:359px){ .nav-tabs .tab-btn{ font-size:0.6rem !important; } }
/* Móvil apaisado: la barra es una columna de 60 px; letra un punto menor
   para que «Asistencia» y «Finantzak» quepan enteras. */
@media (max-width:767.98px) and (orientation:landscape) and (max-height:500px){
  .nav-tabs .tab-btn{ font-size:0.56rem !important; padding:6px 1px 5px !important; }
  .nav-tabs .tab-btn .icon{ font-size:1.2rem !important; }
}
@media (min-width:768px){ #nav-mas{ display:none !important; } }

/* La hoja de «Más»: sube desde abajo, encima de la barra. Va con
   backwards, no con both: both deja un transform puesto para siempre
   (ya mordió una vez, ver las trampas de CSS en el estado del proyecto). */
.mas-velo{position:fixed;inset:0;z-index:99905;background:rgba(8,11,18,0.45);
  animation:masVelo .18s ease backwards;}
.mas-hoja{position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;
  background:var(--r-fondo);border-radius:20px 20px 0 0;
  padding:10px 14px calc(14px + env(safe-area-inset-bottom));
  box-shadow:0 -12px 40px rgba(8,11,18,0.35);
  animation:masSube .22s cubic-bezier(.2,.8,.2,1) backwards;}
.mas-asa{width:38px;height:4px;border-radius:2px;background:var(--r-linea2);margin:0 auto 10px;}
.mas-cab{display:flex;align-items:center;gap:10px;margin:0 2px 10px;}
.mas-cab b{flex:1;font-size:0.95rem;font-weight:800;letter-spacing:-0.01em;color:var(--r-tinta);}
.mas-cab .x{width:32px;height:32px;border-radius:10px;border:none;background:var(--r-hoja2);
  color:var(--r-tinta);font-size:1.05rem;cursor:pointer;font-family:inherit;flex-shrink:0;}
.mas-rejilla{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.mas-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:78px;padding:10px 4px 9px;border-radius:14px;border:1px solid var(--r-linea);
  background:var(--r-hoja);color:var(--r-tinta);font-family:inherit;cursor:pointer;
  transition:transform .12s ease;}
.mas-tile .icon{font-size:1.5rem;line-height:1;}
.mas-tile > span:last-child{font-size:0.7rem;font-weight:700;line-height:1.15;text-align:center;}
.mas-tile.activa{background:var(--r-accion-f);border-color:var(--r-accion);color:var(--r-accion);}
.mas-tile:active{transform:scale(0.95);}
.mas-pie{margin:12px 2px 0;font-size:0.7rem;color:var(--r-apag);line-height:1.45;text-align:center;}
@keyframes masVelo{from{opacity:0;}}
@keyframes masSube{from{transform:translateY(28px);opacity:0;}}
@media (prefers-reduced-motion:reduce){ .mas-velo,.mas-hoja{animation:none;} }


/* El aviso de asalto del marcador («= EMPATE», «gana ROJO») iba en dorado
   sobre el rojo o el azul del competidor y se quedaba en 2,7 de 4,5. Los
   colores de los competidores no se tocan: se le pone al aviso una
   pastilla oscura debajo, como a las faltas. */
#ind-asalto-rojo,#ind-asalto-azul{
  background:rgba(0,0,0,0.42) !important;
  border-radius:8px !important;
  padding:2px 8px !important;
  display:inline-block !important;
}

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