/* ==========================================================================
GestionaSocios — Design tokens + componentes base
Compartido por la PWA de socios (/app) y el panel del gestor (/panel).
Tema oscuro por defecto; claro con .
Mismas variables y mismos nombres que GestionaFitness, GestionaPública y
GestionaClubs (--bg-card, --accent…): los cuatro productos son la misma
hoja con otro acento, y cambiando el bloque :root se reviste el producto
entero.
Sobre --brand y --accent: son el mismo verde, pero con oficios distintos.
--brand es el color fijo del logotipo, idéntico en los dos temas, porque una
marca que cambia de color deja de ser una marca. --accent es el verde de la
interfaz y sí se oscurece en tema claro: el #5FE27C del logo sobre blanco da
1,7:1 de contraste y ni un enlace ni un icono se leerían. Regla práctica: el
logotipo usa --brand; todo lo demás, --accent.
========================================================================== */
:root {
/* --- Superficies ---
Las mismas que GestionaFitness y GestionaPública: azul oscuro de base en
lugar del negro grisáceo anterior. Las tarjetas no son un color propio
sino blanco a muy baja opacidad sobre ese azul; por eso se ven como el
mismo material esté la tarjeta donde esté, y por eso NO valen aquí
colores sólidos. Todo lo que tenga que tapar contenido al desplazarse
(cabeceras fijas, cajón, modal) usa --bg-elev, que sí es opaco. */
--bg: #111827;
--bg-elev: #18202e;
--bg-card: rgba(255, 255, 255, .055);
--bg-card-hover: rgba(255, 255, 255, .09);
--bg-input: rgba(255, 255, 255, .075);
--bg-overlay: rgba(9, 14, 26, .72);
/* --- Bordes y líneas --- */
--border: rgba(255, 255, 255, .11);
--border-soft: rgba(255, 255, 255, .04);
--border-strong: rgba(255, 255, 255, .22);
/* --- Texto --- */
--text: #f1f5f9;
--text-soft: #94a3b8;
--text-muted: #7c8aa0;
/* --- Marca (sacada del logotipo) ---
El símbolo del logo es un degradado que va del turquesa al lima; el verde
medio de esa rampa es el color con el que se lee la marca, y es el que
manda en toda la interfaz. */
--brand: #5FE27C; /* el verde del logotipo */
--brand-deep: #22E1CF; /* extremo turquesa del degradado del símbolo */
--brand-light: #8FEE28; /* extremo lima del degradado del símbolo */
--brand-grad: linear-gradient(120deg, var(--brand-deep), var(--brand-light));
--accent: #5FE27C;
--accent-hover: #46D667;
--accent-soft: rgba(95, 226, 124, .15);
--accent-text: #04240F; /* tinta oscura: sobre este verde el blanco no se lee */
--info: #3b82f6;
--info-soft: rgba(59, 130, 246, .14);
--warn: #f59e0b;
--warn-soft: rgba(245, 158, 11, .14);
--danger: #ef4444;
--danger-soft: rgba(239, 68, 68, .14);
--purple: #a855f7;
--purple-soft: rgba(168, 85, 247, .14);
/* --- Paleta de series para gráficas ---
La primera es la de la marca. El lima que ocupaba la octava posición se
cambia por gris pizarra: al lado del verde nuevo eran la misma serie. */
--c1: #5FE27C; --c2: #3b82f6; --c3: #f59e0b; --c4: #a855f7;
--c5: #ef4444; --c6: #06b6d4; --c7: #ec4899; --c8: #64748b;
/* --- Formas --- */
--r-sm: 8px;
--r: 12px;
--r-lg: 16px;
--r-xl: 22px;
--r-pill: 999px;
/* --- Sombras --- */
--shadow-sm: 0 1px 2px rgba(0,0,0,.32);
--shadow: 0 4px 16px rgba(0,0,0,.34);
--shadow-lg: 0 18px 48px rgba(0,0,0,.48);
/* --- Tipografía --- */
--font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
/* --- Layout --- */
--topbar-h: 62px;
--tabbar-h: 64px;
--maxw: 1440px;
}
/* En claro las superficies vuelven a ser sólidas: el blanco translúcido del
tema oscuro sobre un fondo claro no se vería. Mismos valores que el tema
claro de GestionaFitness y GestionaPública. */
html[data-theme="light"] {
--bg: #f8fafc;
--bg-elev: #ffffff;
--bg-card: #ffffff;
--bg-card-hover: #f1f5f9;
--bg-input: #ffffff;
--bg-overlay: rgba(15, 23, 42, .45);
--border: #cbd5e1;
--border-soft: #e2e8f0;
--border-strong: #94a3b8;
--text: #0f172a;
--text-soft: #475569;
--text-muted: #8593a5;
/* El verde de marca sobre blanco es ilegible (1,7:1). En tema claro el
acento de interfaz baja a un verde con mucha más tinta —mismo tono— que
pasa AA como texto y como fondo de botón. El logotipo no se toca: sigue
pintándose con --brand. */
--accent: #0D7725;
--accent-hover: #0A5F1D;
--accent-soft: rgba(13, 119, 37, .12);
--accent-text: #ffffff;
/* La primera serie sigue al acento: el verde claro no se ve sobre blanco. */
--c1: #0D7725;
--shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
--shadow: 0 4px 16px rgba(16, 24, 40, .08);
--shadow-lg: 0 18px 48px rgba(16, 24, 40, .16);
}
/* ==========================================================================
Reset
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: 15px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
body { min-height: 100vh; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .6rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
/* ==========================================================================
Utilidades
========================================================================== */
.gc-row { display: flex; align-items: center; gap: 10px; }
.gc-row-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gc-col { display: flex; flex-direction: column; gap: 10px; }
.gc-wrap { flex-wrap: wrap; }
.gc-grow { flex: 1 1 auto; min-width: 0; }
.gc-center { text-align: center; }
.gc-right { text-align: right; }
.gc-mt { margin-top: 14px; }
.gc-mb { margin-bottom: 14px; }
.gc-hide { display: none !important; }
.gc-muted { color: var(--text-muted); }
.gc-soft { color: var(--text-soft); }
.gc-small { font-size: .82rem; }
.gc-xs { font-size: .74rem; }
.gc-bold { font-weight: 650; }
.gc-num { font-variant-numeric: tabular-nums; }
.gc-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gc-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Fila apagada: lo anulado sigue a la vista, pero deja de competir */
.gc-dim { opacity: .5; }
.gc-ok { color: var(--accent); }
.gc-err { color: var(--danger); }
.gc-warnc { color: var(--warn); }
.gc-infoc { color: var(--info); }
/* ==========================================================================
Botones
========================================================================== */
.gc-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 10px 16px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg-card);
color: var(--text);
font-size: .9rem; font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s, transform .06s, opacity .15s;
white-space: nowrap;
user-select: none;
}
.gc-btn:hover { background: var(--bg-card-hover); border-color: var(--border-strong); text-decoration: none; }
.gc-btn:active { transform: translateY(1px); }
.gc-btn:disabled, .gc-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.gc-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.gc-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.gc-btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.gc-btn.danger:hover { filter: brightness(1.08); }
.gc-btn.ghost { background: transparent; border-color: transparent; color: var(--text-soft); }
.gc-btn.ghost:hover { background: var(--bg-card-hover); color: var(--text); }
.gc-btn.outline { background: transparent; }
.gc-btn.sm { padding: 6px 11px; font-size: .8rem; }
.gc-btn.lg { padding: 13px 22px; font-size: 1rem; }
.gc-btn.block { width: 100%; }
.gc-btn.icon { padding: 8px; width: 36px; height: 36px; }
/* ==========================================================================
Formularios
========================================================================== */
.gc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gc-label { font-size: .78rem; font-weight: 600; color: var(--text-soft); letter-spacing: .01em; }
.gc-label .req { color: var(--danger); }
.gc-input, .gc-select, .gc-textarea {
width: 100%;
padding: 10px 12px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--text);
font-size: .92rem;
transition: border-color .15s, box-shadow .15s;
appearance: none;
}
.gc-textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.gc-select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 11px center;
padding-right: 32px;
}
/* Un desplegable dentro de una celda de tabla.
Con el tamaño normal, una columna de ellos convierte la tabla de recibos en
una pared de cajas: el dato importa menos que el número que tiene al lado.
Este pesa lo mismo que el texto de la fila y solo se marca al pasar por
encima, que es cuando se descubre que se puede tocar. */
.gc-select.sm {
padding: 4px 26px 4px 8px; font-size: .78rem; height: auto;
background-color: transparent; border-color: transparent;
background-position: right 6px center;
}
.gc-select.sm:hover { border-color: var(--border-strong); background-color: var(--bg-input); }
.gc-input:focus, .gc-select:focus, .gc-textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.gc-input::placeholder, .gc-textarea::placeholder { color: var(--text-muted); }
.gc-input:disabled, .gc-select:disabled, .gc-textarea:disabled { opacity: .55; cursor: not-allowed; }
.gc-input.invalid, .gc-select.invalid, .gc-textarea.invalid { border-color: var(--danger); }
.gc-hint { font-size: .74rem; color: var(--text-muted); }
.gc-err-msg { font-size: .74rem; color: var(--danger); }
.gc-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.gc-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.gc-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
@media (max-width: 780px) {
.gc-grid-2, .gc-grid-3, .gc-grid-4 { grid-template-columns: 1fr; }
}
/* checkbox / switch */
.gc-check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: .86rem; color: var(--text-soft); }
.gc-check input { width: 17px; height: 17px; accent-color: var(--accent); margin: 2px 0 0; flex: 0 0 auto; cursor: pointer; }
.gc-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
.gc-switch input { opacity: 0; width: 0; height: 0; }
.gc-switch span {
position: absolute; inset: 0; cursor: pointer;
background: var(--border-strong); border-radius: 99px; transition: background .18s;
}
.gc-switch span::before {
content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
background: #fff; border-radius: 50%; transition: transform .18s;
}
.gc-switch input:checked + span { background: var(--accent); }
.gc-switch input:checked + span::before { transform: translateX(18px); }
/* ==========================================================================
Tarjetas
========================================================================== */
.gc-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px;
}
.gc-card.pad-0 { padding: 0; }
.gc-card-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-bottom: 14px;
}
.gc-card-title { font-size: .95rem; font-weight: 650; }
.gc-card-sub { font-size: .78rem; color: var(--text-muted); font-weight: 500; }
/* KPI */
.gc-kpi {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 15px 16px;
display: flex; flex-direction: column; gap: 5px;
position: relative; overflow: hidden;
}
/* Al pasar por encima, el borde se tiñe del color del propio indicador y la
tarjeta se levanta un pelo. Nada de moverla ni de agrandarla: son diez
cuadros en fila y cualquier cosa que cambie de tamaño hace bailar a los de
al lado. El color sale del tono que ya tiene el icono, así que un KPI en
rojo no se ilumina en verde. */
.gc-kpi {
--kpi-tono: var(--accent);
transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.gc-kpi:hover {
border-color: var(--kpi-tono);
box-shadow: 0 4px 16px -8px var(--kpi-tono);
transform: translateY(-1px);
}
.gc-kpi.info { --kpi-tono: var(--info); }
.gc-kpi.warn { --kpi-tono: var(--warn); }
.gc-kpi.danger { --kpi-tono: var(--danger); }
.gc-kpi.purple { --kpi-tono: var(--purple); }
/* Quien haya dicho que prefiere menos movimiento, no lo tiene */
@media (prefers-reduced-motion: reduce) {
.gc-kpi { transition: border-color .18s ease; }
.gc-kpi:hover { transform: none; }
}
.gc-kpi .k-top { display: flex; align-items: center; gap: 8px; }
.gc-kpi .k-ico {
width: 30px; height: 30px; border-radius: var(--r-sm);
display: grid; place-items: center; font-size: .95rem;
background: var(--accent-soft); color: var(--accent); flex: 0 0 auto;
}
.gc-kpi .k-label { font-size: .76rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.gc-kpi .k-value { font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gc-kpi .k-foot { font-size: .76rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.gc-kpi.info .k-ico { background: var(--info-soft); color: var(--info); }
.gc-kpi.warn .k-ico { background: var(--warn-soft); color: var(--warn); }
.gc-kpi.danger .k-ico { background: var(--danger-soft); color: var(--danger); }
.gc-kpi.purple .k-ico { background: var(--purple-soft); color: var(--purple); }
.gc-delta { font-weight: 650; font-size: .76rem; }
.gc-delta.up { color: var(--accent); }
.gc-delta.down { color: var(--danger); }
.gc-delta.flat { color: var(--text-muted); }
/* ==========================================================================
Badges / chips
========================================================================== */
.gc-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; border-radius: var(--r-pill);
font-size: .72rem; font-weight: 650; letter-spacing: .01em;
background: var(--bg-card-hover); color: var(--text-soft);
border: 1px solid var(--border); white-space: nowrap;
}
.gc-badge.ok { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.gc-badge.info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.gc-badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.gc-badge.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.gc-badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gc-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 13px; border-radius: var(--r-pill);
background: var(--bg-card); border: 1px solid var(--border);
font-size: .82rem; font-weight: 600; color: var(--text-soft);
cursor: pointer; white-space: nowrap; transition: all .15s;
}
.gc-chip:hover { border-color: var(--border-strong); color: var(--text); }
.gc-chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
/* ==========================================================================
LISTA DE ACCIONES (menu-list)
--------------------------------------------------------------------------
Filas pulsables dentro de una tarjeta o un modal: el menú de la cuenta en la
topbar, el de acciones de un socio, los ajustes de la app.
Vive aquí y no en app.css porque lo usan LOS DOS productos. Un