/* ==========================================================================
GestionaPública — Design tokens + componentes base
Compartido por la app del ciudadano (/app) y el panel de gestión (/panel).
Tema oscuro por defecto; claro con .
Paleta corporativa: el amarillo yema de la familia Gestiona (--brand).
Cambiando el bloque :root se reviste el producto entero, incluidos los
colores de marca del ente (settings del ayuntamiento).
Sobre --brand y --accent: son el mismo amarillo, 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 amarillo de
la interfaz y sí se oscurece en tema claro: #FCA905 sobre blanco da 1,9:1 de
contraste y ningún texto ni icono se leería. Regla práctica: el logo usa
--brand; todo lo demás, --accent.
========================================================================== */
:root {
/* --- Superficies ---
Las mismas que GestionaFitness: 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;
/* Un punto más claro que el #64748b de GestionaFitness: aquí lo llevan
avisos y letra pequeña, y aquel se queda en 3,7:1 sobre el fondo nuevo. */
--text-muted: #7c8aa0;
/* --- Marca / acentos --- */
--brand: #FCA905; /* amarillo yema: color fijo del logotipo */
--brand-deep: #F59000; /* extremo naranja del degradado del símbolo */
--brand-light: #FFC233; /* extremo claro del degradado del símbolo */
/* El mismo degradado del símbolo, para teñir titulares */
--brand-grad: linear-gradient(135deg, #F59000, #FFC233);
--accent: #FCA905;
--accent-hover: #E09400;
--accent-soft: rgba(252, 169, 5, .15);
--accent-text: #1c1305; /* tinta oscura: sobre amarillo el blanco no se lee */
--info: #0891b2;
--info-soft: rgba(8, 145, 178, .15);
--ok: #059669;
--ok-soft: rgba(5, 150, 105, .15);
/* El ámbar de antes (#f59e0b) queda a un paso del amarillo de marca: un aviso
y un elemento destacado se veían igual. El aviso se corre hacia el naranja. */
--warn: #f97316;
--warn-soft: rgba(249, 115, 22, .15);
--danger: #ef4444;
--danger-soft: rgba(239, 68, 68, .14);
--purple: #a855f7;
--purple-soft: rgba(168, 85, 247, .14);
/* --- Paleta de series para gráficas --- */
--c1: #FCA905; --c2: #2563eb; --c3: #0891b2; --c4: #7c3aed;
--c5: #ef4444; --c6: #059669; --c7: #db2777; --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: 64px; /* igual que la barra de GestionaFitness */
--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. */
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 amarillo de marca sobre blanco es ilegible (1,9:1). En tema claro el
acento de interfaz baja a un ámbar tostado —mismo color, más tinta— que
pasa AA como texto y como fondo de botón. El logotipo no se toca: sigue
pintándose con --brand. */
--accent: #B87200;
--accent-hover: #9A5F00;
--accent-soft: rgba(184, 114, 0, .12);
--accent-text: #ffffff;
--ok-soft: rgba(5, 150, 105, .11);
--shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
--info-soft: rgba(8, 145, 178, .11);
--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
========================================================================== */
.gp-row { display: flex; align-items: center; gap: 10px; }
.gp-row-b { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gp-col { display: flex; flex-direction: column; gap: 10px; }
.gp-wrap { flex-wrap: wrap; }
.gp-grow { flex: 1 1 auto; min-width: 0; }
.gp-center { text-align: center; }
.gp-right { text-align: right; }
.gp-mt { margin-top: 14px; }
.gp-mb { margin-bottom: 14px; }
.gp-hide { display: none !important; }
.gp-muted { color: var(--text-muted); }
.gp-soft { color: var(--text-soft); }
.gp-small { font-size: .82rem; }
.gp-xs { font-size: .74rem; }
.gp-bold { font-weight: 650; }
.gp-num { font-variant-numeric: tabular-nums; }
.gp-trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gp-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gp-ok { color: var(--accent); }
.gp-err { color: var(--danger); }
.gp-warnc { color: var(--warn); }
.gp-infoc { color: var(--info); }
/* ==========================================================================
Botones
========================================================================== */
.gp-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;
}
.gp-btn:hover { background: var(--bg-card-hover); border-color: var(--border-strong); text-decoration: none; }
.gp-btn:active { transform: translateY(1px); }
.gp-btn:disabled, .gp-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.gp-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.gp-btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.gp-btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.gp-btn.danger:hover { filter: brightness(1.08); }
.gp-btn.ghost { background: transparent; border-color: transparent; color: var(--text-soft); }
.gp-btn.ghost:hover { background: var(--bg-card-hover); color: var(--text); }
.gp-btn.outline { background: transparent; }
.gp-btn.sm { padding: 6px 11px; font-size: .8rem; }
.gp-btn.lg { padding: 13px 22px; font-size: 1rem; }
.gp-btn.block { width: 100%; }
.gp-btn.icon { padding: 8px; width: 36px; height: 36px; }
/* ==========================================================================
Formularios
========================================================================== */
.gp-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gp-label { font-size: .78rem; font-weight: 600; color: var(--text-soft); letter-spacing: .01em; }
.gp-label .req { color: var(--danger); }
.gp-input, .gp-select, .gp-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;
}
.gp-textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.gp-select {
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 11px center;
padding-right: 32px;
}
.gp-input:focus, .gp-select:focus, .gp-textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.gp-input::placeholder, .gp-textarea::placeholder { color: var(--text-muted); }
.gp-input:disabled, .gp-select:disabled, .gp-textarea:disabled { opacity: .55; cursor: not-allowed; }
.gp-input.invalid, .gp-select.invalid, .gp-textarea.invalid { border-color: var(--danger); }
.gp-hint { font-size: .74rem; color: var(--text-muted); }
.gp-err-msg { font-size: .74rem; color: var(--danger); }
.gp-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.gp-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.gp-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
@media (max-width: 780px) {
.gp-grid-2, .gp-grid-3, .gp-grid-4 { grid-template-columns: 1fr; }
}
/* checkbox / switch */
.gp-check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: .86rem; color: var(--text-soft); }
.gp-check input { width: 17px; height: 17px; accent-color: var(--accent); margin: 2px 0 0; flex: 0 0 auto; cursor: pointer; }
.gp-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
.gp-switch input { opacity: 0; width: 0; height: 0; }
.gp-switch span {
position: absolute; inset: 0; cursor: pointer;
background: var(--border-strong); border-radius: 99px; transition: background .18s;
}
.gp-switch span::before {
content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px;
background: #fff; border-radius: 50%; transition: transform .18s;
}
.gp-switch input:checked + span { background: var(--accent); }
.gp-switch input:checked + span::before { transform: translateX(18px); }
/* ==========================================================================
Tarjetas
========================================================================== */
.gp-card {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r);
padding: 16px;
}
.gp-card.pad-0 { padding: 0; }
.gp-card-head {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
margin-bottom: 14px;
}
.gp-card-title { font-size: .95rem; font-weight: 650; }
.gp-card-sub { font-size: .78rem; color: var(--text-muted); font-weight: 500; }
/* KPI */
.gp-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;
}
.gp-kpi .k-top { display: flex; align-items: center; gap: 8px; }
.gp-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;
}
.gp-kpi .k-label { font-size: .76rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.gp-kpi .k-value { font-size: 1.65rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gp-kpi .k-foot { font-size: .76rem; color: var(--text-muted); display: flex; align-items: center; gap: 5px; }
.gp-kpi.info .k-ico { background: var(--info-soft); color: var(--info); }
.gp-kpi.warn .k-ico { background: var(--warn-soft); color: var(--warn); }
.gp-kpi.danger .k-ico { background: var(--danger-soft); color: var(--danger); }
.gp-kpi.purple .k-ico { background: var(--purple-soft); color: var(--purple); }
.gp-delta { font-weight: 650; font-size: .76rem; }
.gp-delta.up { color: var(--accent); }
.gp-delta.down { color: var(--danger); }
.gp-delta.flat { color: var(--text-muted); }
/* ==========================================================================
Badges / chips
========================================================================== */
.gp-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;
}
.gp-badge.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.gp-badge.accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.gp-badge.info { background: var(--info-soft); color: var(--info); border-color: transparent; }
.gp-badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.gp-badge.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.gp-badge.purple { background: var(--purple-soft); color: var(--purple); border-color: transparent; }
.gp-badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.gp-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;
}
.gp-chip:hover { border-color: var(--border-strong); color: var(--text); }
.gp-chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.gp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-chips .gp-chip { padding: 6px 12px; font-size: .78rem; }
/* Selector segmentado: dos o tres opciones excluyentes que se ven de golpe.
Un