sin acción) — misma
superficie, con feedback táctil y flecha para dejar claro que es
pulsable. */
.herbalife-trust-strip {
display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
background: var(--surface-2); border: 1px solid var(--border-soft);
border-radius: var(--radius-md); padding: 14px 16px; margin-top: 16px;
font-family: inherit; cursor: pointer; box-shadow: var(--shadow-sm);
transition: box-shadow 0.15s ease;
}
.herbalife-trust-strip:active { box-shadow: var(--shadow-md); }
.herbalife-trust-icon {
font-size: 18px; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
background: var(--gold-glow); display: flex; align-items: center; justify-content: center;
}
.herbalife-trust-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.herbalife-trust-title { font-size: 13px; font-weight: 800; color: var(--text-dark); }
.herbalife-trust-sub { font-size: 11px; color: var(--text-muted); line-height: 1.3; }
.herbalife-trust-arrow { font-size: 20px; color: var(--text-muted); flex-shrink: 0; }
/* ---- Placeholder de imagen en la ficha de producto ---- */
.producto-detalle-imagen-placeholder {
width: 100%; height: 200px; display: flex; align-items: center; justify-content: center;
font-size: 40px; color: var(--text-muted);
}
/* ---- Categorías — tiles con flecha indicadora ---- */
/* Flecha discreta — ya no vive sobre la imagen (que ya no es a
sangre), sino en la esquina inferior del tile completo, posicionada
respecto al propio .herbalife-cat-tile (position:relative). */
.herbalife-cat-tile-arrow {
position: absolute; bottom: 10px; right: 10px; z-index: 1;
width: 24px; height: 24px; border-radius: 50%;
background: var(--gold-glow); color: var(--gold);
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700;
}
/* ---- Ficha de producto individual — hero premium sobre fondo
oscuro, sin tocar la fotografía oficial en sí ---- */
.producto-detalle-hero {
position: relative;
background: radial-gradient(ellipse at 50% 20%, var(--surface-3), var(--surface-1) 75%);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
padding: 20px;
margin-bottom: 14px;
box-shadow: var(--shadow-md);
display: flex; align-items: center; justify-content: center;
}
/* .hexagon-badge ya aporta forma/fondo/tipografía — aquí solo el
posicionamiento específico dentro del hero de producto. */
.producto-detalle-badge {
position: absolute; top: 14px; right: 14px; z-index: 2;
font-size: 11.5px;
}
.producto-detalle-imagen {
width: 100%; max-height: 260px; object-fit: contain; border-radius: var(--radius-md);
background: transparent; margin-bottom: 0;
filter: drop-shadow(0 12px 20px rgba(0,0,0,0.35));
cursor: pointer;
}
.producto-detalle-tomando {
position: absolute; top: 14px; left: 14px; z-index: 2;
}
.producto-detalle-info-card { box-shadow: var(--shadow-sm); margin-bottom: 14px; }
.producto-detalle-info-card .producto-detalle-precio { margin-bottom: 0; font-size: 16px; }
/* ---- Carrito ---- */
#page-herbalife-carrito .carrito-item-row {
box-shadow: var(--shadow-sm);
}
#page-herbalife-carrito .carrito-qty-btn { background: var(--surface-3); }
@media (max-width: 380px) {
.discount-banner-value { font-size: 19px; }
}
/* ---- Jerarquía de CTA en ficha de producto — SOLO presentación,
mismo id/handler/routing/condición de siempre. Añadir al carrito
pasa a CTA principal (reutiliza .btn-primary global); WhatsApp
pasa a secundario — se restyla EXCLUSIVAMENTE aquí por id, sin
tocar la clase .wa-btn base (usada en otros puntos de la app). ---- */
#producto-detalle-carrito-btn { margin-bottom: 10px; }
#producto-detalle-wa.producto-detalle-wa-secundario {
background: transparent;
color: var(--gold);
border: 1px solid var(--gold);
box-shadow: none;
width: 100%;
justify-content: center;
}
/* ---- Botón discreto "Ver etiqueta oficial" — solo visible cuando el
producto tiene PDF asociado ---- */
.producto-detalle-etiqueta-btn {
display: block; text-align: center; margin: 10px auto 0; font-size: 12px;
}
/* ---- Señal discreta de imagen ampliable ---- */
.producto-detalle-zoom-hint {
position: absolute; bottom: 12px; right: 12px; z-index: 2;
width: 30px; height: 30px; border-radius: 50%;
background: rgba(0, 0, 0, 0.45); color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 14px; pointer-events: none; /* el clic real lo gestiona la imagen */
}
/* ---- Lightbox de imagen de producto ---- */
.lightbox-overlay {
position: fixed; inset: 0; z-index: 9999;
background: rgba(0, 0, 0, 0.85);
display: flex; align-items: center; justify-content: center;
padding: 24px;
cursor: zoom-out;
}
.lightbox-img {
max-width: 100%; max-height: 100%; object-fit: contain;
border-radius: var(--radius-md);
cursor: default;
}
.lightbox-close {
position: fixed; top: 16px; right: 16px; z-index: 10000;
width: 40px; height: 40px; border-radius: 50%;
background: rgba(255, 255, 255, 0.12); color: #fff; border: none;
font-size: 24px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
/* ---- Ficha de producto — ¿Qué es? / ✨ Beneficios / 🎯 Ideal para.
Mismo diseño para las 67 fichas, sin variación por categoría. ---- */
.producto-detalle-label {
font-size: 11.5px; font-weight: 800; letter-spacing: 0.02em;
color: var(--text-dark); margin: 14px 0 4px;
}
#producto-detalle-label-desc { margin-top: 0; }
.producto-beneficios-list {
list-style: none; margin: 0 0 4px; padding: 0;
display: flex; flex-direction: column; gap: 6px;
}
.producto-beneficios-list li {
font-size: 13px; color: var(--text-dark); line-height: 1.45;
background: var(--surface-2); border: 1px solid var(--border-soft);
border-radius: var(--radius-sm); padding: 8px 10px;
}
/* ============================================================
DASHBOARD — pulido UX (2ª ronda). Compactado ESCOPEADO a
#page-dashboard: .dash-card/.dash-chat-card/.dash-invite-card se
reutilizan en otras pantallas, así que sus reglas base no se tocan.
============================================================ */
#page-dashboard .dash-card { padding: 13px 16px; margin-bottom: 10px; }
#page-dashboard .dash-chat-card { padding: 11px 14px; margin-bottom: 10px; }
#page-dashboard .dash-chat-card-avatar,
#page-dashboard .dash-chat-card-icon { width: 36px; height: 36px; font-size: 22px; }
#page-dashboard .dash-chat-card-title { font-size: 13.5px; }
#page-dashboard .dash-chat-card-sub { font-size: 11.5px; }
#page-dashboard .dash-invite-card { padding: 11px 14px; }
/* ---- Tarjeta de recomendación contextual de suplemento ---- */
.dash-reco-suplemento-card {
position: relative;
background: var(--surface-2);
border: 1px solid rgba(255, 215, 0, 0.35);
border-radius: var(--radius-md);
padding: 14px;
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
}
.dash-reco-suplemento-cerrar {
position: absolute; top: 8px; right: 8px;
width: 24px; height: 24px; border-radius: 50%;
background: var(--surface-3); border: none; color: var(--text-muted);
font-size: 16px; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.dash-reco-suplemento-top { display: flex; gap: 12px; align-items: center; padding-right: 20px; }
.dash-reco-suplemento-img {
width: 52px; height: 52px; object-fit: contain; border-radius: var(--radius-sm);
background: var(--surface-1); flex-shrink: 0;
}
.dash-reco-suplemento-info { min-width: 0; }
.dash-reco-suplemento-label { font-size: 10px; font-weight: 800; color: var(--gold); margin: 0 0 2px; text-transform: uppercase; letter-spacing: 0.03em; }
.dash-reco-suplemento-nombre { font-size: 13.5px; font-weight: 800; color: var(--text-dark); margin: 0; }
.dash-reco-suplemento-texto { font-size: 11.5px; color: var(--text-muted); margin: 2px 0 0; line-height: 1.35; }
.dash-reco-suplemento-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.dash-reco-suplemento-acciones button { padding: 8px 6px; font-size: 12px; margin: 0; }
/* ---- Seguimiento — pestañas internas (mismo bloque/ruta) ---- */
.seguimiento-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.seguimiento-tab {
flex: 1; background: var(--surface-2); border: 1px solid var(--border-soft);
color: var(--text-muted); border-radius: 12px; padding: 10px; font-size: 13px;
font-weight: 700; cursor: pointer; font-family: inherit;
}
.seguimiento-tab.active { background: var(--gold); color: #111; border-color: var(--gold); }
/* ============================================================
RONDA 10 — Rediseño premium completo de Seguimiento
(#page-seguimiento), reproduciendo el mockup de referencia
(Registrar / Mi evolución) con el mismo lenguaje visual ya usado en
Entreno/Kilómetros/Bienestar: negro/gris oscuro, dorado NF24FIT,
cards oscuras con borde fino, glow dorado sutil, sombras suaves.
TODO lo de aquí abajo va scopeado a #page-seguimiento (o a IDs que
solo existen dentro de esta pantalla) precisamente porque
.seguimiento-tab / .metric-tabs / .tracker-card / .mi-rutina-card /
.muscle-card / .supplement-promo son clases COMPARTIDAS con otras
pantallas (fichas de admin, Kilómetros, Comunidad, Planes...) — nunca
se toca la regla base sin scope, solo se añade encima para esta
pantalla. No se cambia HTML estructural, ni IDs, ni listeners: solo
presentación. La lógica de cálculo/gráfica/foto/guardado/compartir
permanece intacta (js/app.js no se ha tocado en esta ronda).
============================================================ */
#page-seguimiento {
/* Acento local, misma familia dorada que --e-accent/--w-accent en
Entreno/Workday — mantiene la app coherente al cambiar de pantalla. */
--sg-accent: #FFD100;
--sg-accent-ink: #171310;
}
/* ---- 1) Selector premium "Registrar | Mi evolución" ---- */
#page-seguimiento .seguimiento-tabs { margin-bottom: 18px; gap: 8px; }
#page-seguimiento .seguimiento-tab {
background: var(--surface-1); border: 1px solid var(--border-soft);
color: var(--text-muted); border-radius: 13px; padding: 11px 10px;
font-size: 13px; font-weight: 700; transition: background .15s ease, box-shadow .15s ease, color .15s ease;
}
#page-seguimiento .seguimiento-tab.active {
background: linear-gradient(135deg, var(--sg-accent), #ffb700);
color: var(--sg-accent-ink); border-color: var(--sg-accent);
box-shadow: 0 6px 16px rgba(255, 209, 0, 0.30);
}
/* ---- 2) Card "Nuevo registro de progreso": el .reg-shell pasa a ser
una sección ligera (sin peso visual propio) y cada .reg-block es la
card real, oscura, con borde fino y sombra suave, tal como en el
mockup (varias cards apiladas, no un único bloque gigante). ---- */
#page-seguimiento .reg-shell {
background: transparent; box-shadow: none; padding: 0; border: none;
}
#page-seguimiento .reg-header,
#page-seguimiento .reg-shell > .reg-subtitle { padding: 0 2px; }
#page-seguimiento .reg-header-icon {
display: flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
background: linear-gradient(155deg, rgba(255,209,0,0.22), rgba(255,209,0,0.05));
border: 1px solid rgba(255,209,0,0.32); font-size: 17px;
}
#page-seguimiento .reg-block {
background: var(--surface-2); border: 1px solid var(--border-soft);
border-radius: 16px; padding: 15px 14px; margin-bottom: 12px;
box-shadow: var(--shadow-sm);
}
#page-seguimiento .reg-block-principal { border-top: none; border-color: rgba(255,209,0,0.22); }
/* ---- 3) Cabeceras de sección: icono + título + (info · o botón
Mostrar/chevron). Los iconos de Composición corporal / Medidas
corporales se añaden vía :has() sobre el propio botón-toggle real
(#reg-toggle-composicion / #reg-toggle-medidas) — nunca por el texto
del título — así que si esos IDs cambian de sitio el icono los sigue
automáticamente y nunca se "cuelga" de un título por casualidad. ---- */
#page-seguimiento .reg-section-title-row {
background: rgba(255,209,0,0.05); border-radius: 11px; padding: 9px 11px; margin: 0 0 10px;
}
#page-seguimiento .reg-block-principal .reg-section-title-row { margin-bottom: 12px; }
#page-seguimiento .reg-section-title-row:has(#reg-toggle-composicion) .reg-section-title::before,
#page-seguimiento .reg-section-title-row:has(#reg-toggle-medidas) .reg-section-title::before {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 7px; margin-right: 7px; font-size: 12px;
background: rgba(255,209,0,0.14); vertical-align: -5px;
}
#page-seguimiento .reg-section-title-row:has(#reg-toggle-composicion) .reg-section-title::before { content: "🧬"; }
#page-seguimiento .reg-section-title-row:has(#reg-toggle-medidas) .reg-section-title::before { content: "📏"; }
#page-seguimiento .reg-toggle-btn {
background: rgba(255,209,0,0.12); border-radius: 20px; padding: 5px 11px 5px 13px;
}
/* ---- 4) Inputs premium: mismo estilo, con glow dorado sutil al foco
(coherente con .btn-primary y el resto de inputs de la app). ---- */
#page-seguimiento .metric-input-wrap input:focus {
box-shadow: 0 0 0 3px var(--gold-glow);
}
/* ---- 5) Fotos de progreso: borde discontinuo premium, silueta local
(assets/seguimiento/silueta-*.svg) con halo dorado, insignia "+" y
texto "Toca para añadir" — la lógica real de selección/preview de
foto (REG_FOTO_SLOTS en js/app.js) no se toca. ---- */
#page-seguimiento .reg-photo-slot {
border-color: rgba(255,209,0,0.30); border-width: 1.5px; background: var(--surface-1);
padding: 20px 10px 16px; transition: border-color .15s ease;
box-shadow: inset 0 0 24px rgba(255,209,0,0.04);
}
#page-seguimiento .reg-photo-icon {
width: 46px; height: 46px; margin: 0 auto 8px; background-repeat: no-repeat;
background-position: center; background-size: contain;
filter: drop-shadow(0 0 10px rgba(255,209,0,0.35));
}
#page-seguimiento #reg-photo-slot-frente .reg-photo-icon,
#page-seguimiento #reg-photo-slot-espalda .reg-photo-icon {
background-image: url("../assets/seguimiento/silueta-frente.svg");
}
#page-seguimiento #reg-photo-slot-perfil .reg-photo-icon {
background-image: url("../assets/seguimiento/silueta-perfil.svg");
}
#page-seguimiento .reg-photo-slot:not(.has-file)::after {
content: "+"; position: absolute; right: 10px; bottom: 10px;
width: 22px; height: 22px; border-radius: 50%; background: var(--sg-accent);
color: var(--sg-accent-ink); font-size: 15px; font-weight: 800; line-height: 22px;
text-align: center; box-shadow: 0 3px 10px rgba(255,209,0,0.4);
}
#page-seguimiento .reg-photo-slot.has-file .reg-photo-icon { display: none; }
#page-seguimiento .reg-photo-slot.has-file { border-color: var(--sg-accent); box-shadow: 0 8px 20px rgba(0,0,0,0.28); }
/* Corrección de presentación: .reg-photo-badge no tenía "display:none"
por defecto en la regla base (solo se posiciona cuando hay foto), así
que sin foto se veía como texto duplicado junto al label. Es un ajuste
puramente visual, no toca el flujo real de selección de foto. */
#page-seguimiento .reg-photo-slot:not(.has-file) .reg-photo-badge { display: none; }
/* ---- 6) CTA "Guardar registro": mismo .btn-primary global (ya dorado
con glow), reforzado aquí para sentirse "grande y protagonista". ---- */
#page-seguimiento .reg-cta-row .btn-primary {
padding: 16px; border-radius: 15px; font-size: 15.5px;
box-shadow: 0 8px 22px rgba(255, 209, 0, 0.28);
}
/* ---- 7) Hero "Mi Transformación": imagen local cinematográfica
(assets/seguimiento/transformacion-hero.svg) a la derecha, overlay
oscuro y glow dorado — mismo #transformacion-shortcut, mismo click,
misma navegación (renderTransformacion no se toca). ---- */
#page-seguimiento #transformacion-shortcut {
height: auto; min-height: 118px; padding: 20px 22px; border-radius: 20px;
background:
linear-gradient(100deg, rgba(10,8,6,0.94) 0%, rgba(10,8,6,0.78) 45%, rgba(10,8,6,0.25) 100%),
url("../assets/seguimiento/transformacion-hero.svg");
background-size: cover; background-position: center right;
border: 1px solid rgba(255,209,0,0.30);
box-shadow: 0 14px 30px rgba(0,0,0,0.32);
position: relative; overflow: hidden;
}
#page-seguimiento #transformacion-shortcut .title { font-size: 19px; font-weight: 800; }
#page-seguimiento #transformacion-shortcut .extra { color: var(--sg-accent); }
#page-seguimiento #transformacion-shortcut .arrow {
width: 34px; height: 34px; border-radius: 50%; background: rgba(255,209,0,0.16);
border: 1px solid rgba(255,209,0,0.4); display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
/* ---- 8) Cards de métrica (Peso / % Grasa corporal / Masa muscular):
ya usan .evo-metric-card con icono+título+valor+badge (renderEvoCards
en js/app.js, sin tocar) — aquí solo se refuerza el acabado premium. ---- */
#page-seguimiento .evo-metric-card {
background: var(--surface-2); border-radius: 15px; padding: 12px 11px;
box-shadow: var(--shadow-sm);
}
#page-seguimiento .evo-metric-card .evo-mc-title span:first-child { font-size: 13px; }
#page-seguimiento .evo-metric-card .evo-mc-value { font-size: 18px; }
/* ---- 9) "Compartir mi progreso": mismo .share-progress-btn global +
mismo listener/lógica de compartir; solo se afina el acabado. ---- */
#page-seguimiento .share-progress-btn {
border-radius: 15px; padding: 15px; box-shadow: 0 8px 20px rgba(255, 209, 0, 0.26);
}
/* ---- 10) Card "Evolución": chips de métrica + selector de periodo +
gráfica. Mismos IDs (#metric-tabs, #evo-filtro-fechas, #pesoChart),
misma lógica de datos/cálculo — Chart.js ya dibuja línea dorada,
puntos con borde dorado y área con transparencia dorada (sin cambios
en js/app.js), solo se premium-iza el marco alrededor. ---- */
#page-seguimiento .evo-main-grid > .tracker-card {
background: var(--surface-2); border-radius: 18px; box-shadow: var(--shadow-md);
border-color: rgba(255,209,0,0.14);
}
#page-seguimiento .metric-tab {
background: var(--surface-1); border-radius: 20px; font-weight: 700;
}
#page-seguimiento .metric-tab.active {
background: linear-gradient(135deg, var(--sg-accent), #ffb700); color: var(--sg-accent-ink);
border-color: var(--sg-accent); box-shadow: 0 4px 12px rgba(255,209,0,0.32);
}
#page-seguimiento .evo-filtro-select {
background: var(--surface-1); border-radius: 20px; padding: 8px 14px; font-weight: 700;
}
#page-seguimiento canvas#pesoChart { padding-top: 4px; }
/* ---- 11) Panel derecho: "Último registro" / "Tu progreso" / "Desde
que empezaste" — mismos IDs (#evo-ultimo-registro, #evo-tu-progreso,
#evo-desde-inicio), mismo cálculo de diferencias, solo presentación. ---- */
#page-seguimiento .evo-panel {
background: var(--surface-2); border-radius: 18px; box-shadow: var(--shadow-md);
border-color: rgba(255,209,0,0.14);
}
#page-seguimiento .evo-ultimo-valor { color: var(--sg-accent); }
#page-seguimiento .evo-progreso-val.positivo { color: #4ade80; }
/* ---- 12) Aviso orientativo: card pequeña, discreta, icono + texto
gris — mismo texto legal/orientativo, sin cambios de contenido. ---- */
#page-seguimiento .evo-disclaimer {
background: var(--surface-1); border: 1px solid var(--border-soft);
border-radius: 13px; padding: 11px 13px; font-size: 10.5px; opacity: 0.9;
}
/* ---- 13) Historial: fila fecha (izq.) / valor (der.) + línea
divisoria fina — mismo #history-list, sin cambios de datos. ---- */
#page-seguimiento .history-list { margin-top: 18px; }
#page-seguimiento .history-row { padding: 13px 2px; }
#page-seguimiento .history-row .weight { color: var(--sg-accent); font-weight: 800; }
/* ---- 14) "Complementa tu nutrición": borde dorado fino + icono +
CTA "Ver productos →" — mismo #supplement-promo, mismo click hacia
page-herbalife (goToPage no se toca). Se escoge scope por ID en vez
de por .supplement-promo a secas porque esa clase también la usa
#supplement-promo-planes en la pantalla de Planes. ---- */
#page-seguimiento #supplement-promo {
background: var(--surface-2); border: 1px solid rgba(255,209,0,0.35);
border-radius: 18px; box-shadow: var(--shadow-sm);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
#page-seguimiento #supplement-promo .promo-text { color: var(--text-dark); flex: 1; }
#page-seguimiento #supplement-promo .promo-link { flex-shrink: 0; white-space: nowrap; }
/* ---- 15) Coherencia menor: racha / día de descanso / ranking, mismos
IDs y lógica, tono ajustado a la nueva paleta de la pantalla. ---- */
#page-seguimiento .streak-banner { background: var(--surface-2); border: 1px solid rgba(255,209,0,0.3); }
#page-seguimiento .descanso-btn { border-radius: 14px; }
#page-seguimiento .ranking-shortcut { border-radius: 14px; box-shadow: var(--shadow-sm); }
@media (min-width: 600px) {
#page-seguimiento #transformacion-shortcut { min-height: 150px; }
}
/* ---- Comunidad — compositor colapsable ---- */
.comunidad-compositor-resumen {
display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
background: none; border: none; cursor: pointer; font-family: inherit; padding: 0;
}
.comunidad-compositor-icon { font-size: 24px; }
.comunidad-compositor-texto { font-size: 14px; font-weight: 700; color: var(--text-dark); flex: 1; }
.comunidad-compositor-plus { font-size: 12px; font-weight: 700; color: var(--gold); white-space: nowrap; }
/* ---- Fase 4C — compositor único en modal (2 puntos de entrada) ---- */
body.modal-open { overflow: hidden; }
.comunidad-compositor-box { max-width: 460px; max-height: 88vh; overflow-y: auto; }
.comunidad-compositor-modal-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px; gap: 10px;
}
.comunidad-compositor-modal-header .close-btn {
background: var(--surface-3); border: none; width: 32px; height: 32px;
border-radius: 50%; font-size: 15px; cursor: pointer; color: var(--text-dark); flex-shrink: 0;
}
.comunidad-compositor-tipos-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;
}
@media (min-width: 480px) {
.comunidad-compositor-tipos-grid { grid-template-columns: repeat(5, 1fr); }
}
.comunidad-tipo-btn {
display: flex; flex-direction: column; align-items: center; gap: 6px;
background: var(--surface-2, var(--input-bg)); border: 1px solid var(--border-soft);
border-radius: 14px; padding: 14px 8px; cursor: pointer; font-size: 12px; font-weight: 700;
color: var(--text-dark);
}
.comunidad-tipo-btn:active { border-color: var(--gold); }
.comunidad-tipo-icono { font-size: 24px; }
.comunidad-compositor-solo-texto {
display: block; width: 100%; text-align: center; background: none; border: none;
color: var(--text-muted); font-size: 12.5px; font-weight: 600; cursor: pointer;
padding: 8px 0 4px; text-decoration: underline;
}
.comunidad-compositor-atras-btn {
display: block; background: none; border: none; color: var(--text-muted); font-size: 13px;
font-weight: 700; cursor: pointer; padding: 0; margin-bottom: 10px;
}
.comunidad-compositor-actividad-fila {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 10px 0; border-bottom: 1px solid var(--border-soft);
}
.comunidad-compositor-actividad-info { font-size: 13px; color: var(--text-dark); }
.comunidad-compositor-actividad-fecha { font-size: 11.5px; color: var(--text-muted); }
.comunidad-categoria-badge {
display: inline-block; font-size: 11px; font-weight: 700; color: var(--gold);
background: rgba(255,209,0,0.1); border-radius: 20px; padding: 2px 9px; margin-bottom: 6px;
}
/* ---- Insignia COACH (mejora móvil-first sobre Fase Social 4C) ----
Reutiliza el mismo token --gold y el mismo patrón de píldora que
.comunidad-categoria-badge / .food-grams-badge, sin colores nuevos. */
.coach-badge {
display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800;
letter-spacing: 0.3px; color: var(--gold); background: rgba(255,209,0,0.14);
border: 1px solid rgba(255,215,0,0.35); border-radius: 20px; padding: 1.5px 8px 1.5px 6px;
vertical-align: middle; white-space: nowrap; flex-shrink: 0;
}
.coach-badge-icon { font-size: 10px; line-height: 1; }
/* Insignia en la misma línea que el nombre (feed y perfil deportivo).
El nombre se trunca con puntos suspensivos si no hay espacio; la
insignia conserva siempre su tamaño y nunca desaparece ni se corta. */
.comunidad-autor-nombre-linea {
display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%;
}
.comunidad-autor-nombre-linea .comunidad-autor-nombre {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.perfil-resumen-nombre-linea {
display: flex; align-items: center; justify-content: center; gap: 6px;
min-width: 0; max-width: 100%;
}
.perfil-resumen-nombre-linea .perfil-resumen-nombre {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* ---- Reservas — semana compacta ya cubierta arriba (.week-nav-btn) ---- */
/* ---- Menú central + — oscurecido de fondo vía CSS puro relacional,
sin tocar ningún listener existente. #nav-more-menu y este overlay
son hermanos DOM consecutivos; el estado (oculto/visible) del menú
YA se gestiona en todos los puntos existentes (abrir, click fuera,
elegir una opción) — el overlay simplemente sigue ese mismo estado
automáticamente. */
.nav-more-overlay {
position: fixed; inset: 0; z-index: 98;
background: rgba(0, 0, 0, 0.5);
opacity: 0; pointer-events: none;
transition: opacity 0.15s ease;
}
#nav-more-menu:not(.hidden) + .nav-more-overlay {
opacity: 1; pointer-events: auto;
}
/* ---- Entreno — pulido sutil (sin reconstruir la pantalla) ---- */
#entreno-favoritos-link {
background: var(--surface-2); border: 1px solid var(--border-soft);
border-radius: var(--radius-pill); padding: 6px 12px;
}
#entrenamientos-cliente-shortcut { border-left: 2px solid var(--gold); }
.entreno-tool-badge-destacado {
display: block; font-size: 9.5px; font-weight: 800; letter-spacing: 0.03em;
color: var(--gold); margin-bottom: 2px;
}
.entreno-tool-card-destacada { border-color: rgba(255, 215, 0, 0.3); }
/* ============================================================
ONBOARDING — indicador de pasos + bloque de foto (Paso 1)
============================================================ */
.onb-progreso { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 18px; }
.onb-progreso-texto { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.onb-progreso-dots { display: flex; align-items: center; gap: 4px; }
.onb-progreso-dot {
width: 9px; height: 9px; border-radius: 50%;
background: var(--surface-3); border: 1px solid var(--border-soft);
}
.onb-progreso-dot.active { background: var(--gold); border-color: var(--gold); }
.onb-progreso-linea { width: 24px; height: 2px; background: var(--border-soft); }
.onb-foto-block { display: flex; flex-direction: column; align-items: center; text-align: center; margin: 4px 0 18px; }
/* "Ahora no" — solo minimiza visualmente el bloque, nunca avanza de
paso. El círculo sigue accesible por si el usuario cambia de idea. */
.onb-foto-block-minimizada .onb-foto-circle { width: 56px; height: 56px; opacity: 0.6; }
.onb-foto-block-minimizada .onb-foto-frase,
.onb-foto-block-minimizada .btn-secondary,
.onb-foto-block-minimizada #onb-foto-ahora-no { display: none; }
.onb-foto-circle {
position: relative;
width: 92px; height: 92px; border-radius: 50%;
background: var(--surface-2); border: 2px dashed rgba(255,215,0,0.4);
display: flex; align-items: center; justify-content: center;
cursor: pointer; overflow: hidden; margin-bottom: 10px;
}
.onb-foto-preview { width: 100%; height: 100%; object-fit: cover; }
.onb-foto-plus { font-size: 32px; font-weight: 300; color: var(--gold); line-height: 1; }
.onb-foto-label { font-size: 13.5px; font-weight: 800; color: var(--text-dark); margin: 0; }
.onb-foto-frase { font-size: 11.5px; color: var(--text-muted); margin: 2px 0 12px; }
.onb-foto-block .btn-secondary { margin: 0 0 8px; padding: 9px 20px; width: auto; }
.onb-nav-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.onb-nav-row .btn-primary, .onb-nav-row .btn-secondary { margin: 0; }
/* ============================================================
PERFIL — cabecera compacta
============================================================ */
.perfil-resumen-compacta {
background: var(--card-white); border: 1px solid var(--border-soft); border-radius: 16px;
padding: 14px; margin-bottom: 16px; text-align: center;
}
.perfil-resumen-linea { font-size: 15px; font-weight: 700; color: var(--text-dark); }
.perfil-resumen-sep { color: var(--text-muted); margin: 0 8px; }
.perfil-resumen-tel { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
/* ---- Admin / Mis clientes — tarjeta compacta (v10.2) ---- */
.admin-directo-card-compacta { padding: 10px 12px; }
.admin-directo-card-top { display: flex; align-items: center; gap: 10px; }
.admin-directo-verficha-link {
background: none; border: none; color: var(--gold); font-size: 12px;
font-weight: 700; cursor: pointer; padding: 4px; flex-shrink: 0;
}
/* ---- Panel Coach — banda de KPIs compacta (v10.2) ---- */
.coach-kpi-banda {
display: flex; background: var(--card-white); border: 1px solid var(--border-soft);
border-radius: 14px; overflow: hidden; margin-bottom: 18px;
}
.coach-kpi-banda-item {
flex: 1; display: flex; flex-direction: column; align-items: center;
gap: 2px; padding: 10px 4px; border-right: 1px solid var(--border-soft);
}
.coach-kpi-banda-item:last-child { border-right: none; }
.coach-kpi-banda-val { font-size: 16px; font-weight: 800; }
.coach-kpi-banda-lbl { font-size: 9.5px; color: var(--text-muted); text-align: center; }
/* ---- Panel Coach — filtros con scroll horizontal limpio (v10.2) ---- */
#coach-clientes-filtros { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; -webkit-overflow-scrolling: touch; }
#coach-clientes-filtros .admin-equipo-tab { flex-shrink: 0; white-space: nowrap; }
/* ---- Novedades de NF24 (v11) — reutiliza .lightbox-overlay ya
existente como base del overlay, solo el contenido interno es
nuevo. ---- */
.novedades-modal {
background: var(--card-white); border-radius: var(--radius-lg);
padding: 24px 20px; max-width: 360px; width: 100%;
border: 1px solid rgba(255, 215, 0, 0.25);
}
.novedades-titulo { font-size: 19px; font-weight: 800; color: var(--text-dark); margin: 0 0 2px; text-align: center; }
.novedades-version { font-size: 12px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; text-align: center; }
.novedades-lista { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.novedades-lista li { font-size: 13.5px; color: var(--text-dark); line-height: 1.4; }
/* ---- Tour guiado Panel Coach (v11) — overlay + spotlight sin
librerías. El elemento señalado se eleva por encima del fondo
oscurecido con z-index/outline; nunca se clona, nunca bloquea
overflow del body (nada aquí toca document.body.style). ---- */
.coach-tour-overlay {
position: fixed; inset: 0; z-index: 9998;
background: rgba(0, 0, 0, 0.72);
}
.coach-tour-resaltado {
position: relative !important; z-index: 9999 !important;
outline: 3px solid var(--gold); outline-offset: 3px;
border-radius: 12px;
box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.25);
}
.coach-tour-tooltip {
position: fixed; left: 16px; right: 16px; z-index: 10000;
background: var(--card-white); border: 1px solid rgba(255, 215, 0, 0.3);
border-radius: var(--radius-lg); padding: 16px; max-width: 380px; margin: 0 auto;
box-shadow: var(--shadow-lg);
}
.coach-tour-tooltip-titulo { font-size: 15px; font-weight: 800; color: var(--text-dark); margin: 0 0 4px; }
.coach-tour-tooltip-texto { font-size: 13px; color: var(--text-muted); line-height: 1.4; margin: 0 0 14px; }
.coach-tour-tooltip-nav { display: flex; align-items: center; gap: 8px; }
.coach-tour-tooltip-nav .onboarding-skip { padding: 8px 4px; }
.coach-tour-reabrir-btn {
width: 30px; height: 30px; border-radius: 50%; margin-left: auto;
background: var(--surface-2); border: 1px solid var(--border-soft);
color: var(--text-muted); font-weight: 800; font-size: 14px; cursor: pointer;
}
/* ============================================================
v11.4 — Insignias de rol NF24, rango Herbalife y productos
habituales. Chips pequeños, premium, sin saturar visualmente.
============================================================ */
.rol-nf24-chip {
display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
border-radius: 20px; padding: 3px 10px; margin-left: 6px; white-space: nowrap;
}
.rol-nf24-ceo { background: var(--gold); color: var(--black); }
.rol-nf24-coach { background: var(--black); color: var(--gold); border: 1px solid var(--gold); }
.rol-nf24-afiliado { background: var(--input-bg); color: var(--text-dark); }
.rol-nf24-cliente { background: transparent; color: var(--text-muted); border: 1px solid var(--border-soft); }
.admin-resumen-rango-row {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 8px; flex-wrap: wrap;
}
.admin-resumen-rango-texto { font-size: 12.5px; font-weight: 700; color: var(--text-dark); }
.admin-resumen-rango-btn {
font-size: 11px; font-weight: 700; color: var(--gold); background: none;
border: 1px solid var(--gold); border-radius: 20px; padding: 3px 10px; cursor: pointer;
}
.hl-producto-chip {
display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
background: var(--input-bg); color: var(--text-dark); border-radius: 20px; padding: 5px 8px 5px 12px;
}
.hl-producto-chip button {
border: none; background: none; color: var(--text-muted); font-size: 15px; line-height: 1;
cursor: pointer; padding: 2px 4px;
}
.hl-selector-fila {
display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-dark);
padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border-soft); cursor: pointer;
}
.hl-selector-fila:active { background: var(--gold-glow); }
/* ============================================================
v11.5 — Identidad NF24 en listados (Equipo/Coaches, Mis/Todos
clientes), estado de acceso del Coach y tipo de cliente. Todo con
flex-wrap para que nunca provoque overflow horizontal en móvil.
============================================================ */
.admin-identidad-compacta {
display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.admin-client-identidad-row-v4 { margin-top: 4px; display: flex; flex-wrap: wrap; }
.admin-mini-rango {
display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 700;
color: var(--text-dark); background: var(--input-bg); border-radius: 20px; padding: 2px 8px 2px 2px;
white-space: nowrap;
}
.admin-coach-rango-row { margin: -2px 0 8px; }
/* ============================================================
v11.7 — Seguimiento de clientes (vista global). Card compacta,
mismo lenguaje visual NF24 ya usado en el resto de cards Admin.
============================================================ */
.admin-seguimiento-card {
background: var(--card-white); border: 1px solid var(--border-soft);
border-radius: 14px; padding: 12px; margin-bottom: 10px;
}
.admin-seguimiento-top { display: flex; align-items: flex-start; gap: 10px; }
.admin-seguimiento-info { flex: 1; min-width: 0; }
.admin-seguimiento-detalle { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.admin-seguimiento-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.admin-seguimiento-acciones > * { flex: 1; min-width: 110px; padding: 7px 8px; font-size: 11.5px; text-align: center; }
.admin-seguimiento-chip {
font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 3px 8px;
white-space: nowrap; flex-shrink: 0;
}
.admin-seguimiento-chip.pendiente { background: rgba(224,49,49,0.12); color: var(--danger); }
.admin-seguimiento-chip.actualizar { background: rgba(251,146,60,0.14); color: #fb923c; }
.admin-seguimiento-chip.al-dia { background: rgba(74,222,128,0.12); color: #4ade80; }
@media (min-width: 900px) {
#admin-seguimiento-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
#admin-prospectos-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
/* ============================================================
v11.8 — Prospectos (CRM ligero). Reutiliza .admin-seguimiento-card/
-acciones/-detalle para mantener el mismo lenguaje visual; solo se
añade el chip neutro de "próximo contacto futuro" (vencido/hoy ya
reutilizan los colores de .admin-seguimiento-chip existentes).
============================================================ */
.admin-prospecto-chip-futuro {
font-size: 10.5px; font-weight: 700; border-radius: 8px; padding: 3px 8px;
white-space: nowrap; flex-shrink: 0; background: var(--input-bg); color: var(--text-dark);
}
.admin-prospecto-estado-lbl { font-size: 12.5px; font-weight: 700; color: var(--text-dark); margin-top: 6px; }
/* ============================================================
v11.18 — Herbalife Lead Engine. Scope exclusivo Suplementos/evaluación.
============================================================ */
.herbalife-eval-card{width:100%;display:flex;align-items:center;gap:14px;text-align:left;background:linear-gradient(145deg,var(--surface-2),var(--surface-1));border:1px solid rgba(255,215,0,.22);border-radius:var(--radius-lg);padding:17px;margin:16px 0 4px;cursor:pointer;font-family:inherit;box-shadow:var(--shadow-sm)}
.herbalife-eval-icon{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center;background:rgba(255,215,0,.11);font-size:22px;flex-shrink:0}
.herbalife-eval-copy{display:flex;flex-direction:column;min-width:0}.herbalife-eval-kicker{font-size:9.5px;font-weight:800;letter-spacing:.7px;color:var(--gold);margin-bottom:4px}.herbalife-eval-title{font-size:15px;font-weight:800;color:var(--text-dark);line-height:1.25}.herbalife-eval-sub{font-size:11.5px;color:var(--text-muted);line-height:1.4;margin-top:3px}.herbalife-eval-cta{font-size:11.5px;font-weight:800;color:var(--gold);margin-top:7px}
.herbalife-eval-modal{max-width:420px}.herbalife-eval-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px}.herbalife-eval-head h2{font-size:20px;margin:2px 0 0;color:var(--text-dark)}.herbalife-eval-close{border:0;background:transparent;color:var(--text-muted);font-size:19px;cursor:pointer;padding:3px 0 3px 8px}.herbalife-eval-progress{height:6px;border-radius:99px;background:var(--input-bg);overflow:hidden;margin-bottom:13px}.herbalife-eval-progress>div{height:100%;width:14.28%;background:var(--gold);border-radius:99px;transition:width .2s ease}.herbalife-eval-step-label{font-size:10px;color:var(--text-muted);font-weight:700;margin-bottom:7px}.herbalife-eval-question{font-size:18px;line-height:1.35;font-weight:800;color:var(--text-dark);margin-bottom:16px}.herbalife-eval-option{width:100%;display:block;text-align:left;background:var(--surface-2);border:1px solid var(--border-soft);color:var(--text-dark);border-radius:14px;padding:13px 14px;margin-bottom:8px;font:600 13px/1.35 inherit;cursor:pointer}.herbalife-eval-option:active{border-color:var(--gold);background:rgba(255,215,0,.08)}.herbalife-eval-result-icon{text-align:center;font-size:34px;margin:4px 0}.herbalife-eval-result h2{text-align:center;margin:4px 0 7px;color:var(--text-dark)}.herbalife-eval-result-sub{text-align:center;color:var(--text-muted);font-size:12.5px;line-height:1.5;margin:0 0 16px}.herbalife-eval-priority{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:13px;padding:12px 13px;margin-bottom:8px}.herbalife-eval-priority span:first-child{font-size:18px}.herbalife-eval-priority strong{font-size:13px;color:var(--text-dark)}.herbalife-eval-disclaimer{font-size:10.5px;color:var(--text-muted);line-height:1.45;margin:13px 0}.herbalife-eval-result .wa-btn{display:block;text-align:center;text-decoration:none;box-sizing:border-box}.herbalife-eval-result .onboarding-skip{display:block;margin:11px auto 0}
/* v11.18 — Centro de Oportunidades */
.opportunity-card{margin-bottom:10px}.opportunity-summary{font-size:13px;line-height:1.45;color:var(--text-muted);margin:10px 0 12px;text-transform:none}.opportunity-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.opportunity-status{min-width:138px;flex:1;background:var(--surface-2,#171717);color:var(--text-dark,#fff);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:9px 10px;font-size:12px}.opportunity-actions .workday-action{margin:0}.workday-icon-box{font-size:19px}
/* v11.19.1 — Reservas Paco: calendario de gestión + asistentes */
.admin-reservas-tabs{display:flex;gap:8px;margin:0 0 16px;padding:4px;background:var(--surface-1);border:1px solid var(--border-soft);border-radius:14px}
.admin-reservas-tab{flex:1;border:0;background:transparent;color:var(--text-muted);padding:10px 12px;border-radius:10px;font:inherit;font-weight:700;cursor:pointer}
.admin-reservas-tab.active{background:var(--surface-3);color:var(--text);box-shadow:var(--shadow-sm)}
.admin-cal-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.admin-cal-nav button{width:38px;height:38px;border-radius:12px;border:1px solid var(--border-soft);background:var(--surface-2);color:var(--text);font-size:18px}
.admin-calendar-table .admin-cal-class{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px;width:100%}
.admin-calendar-table .admin-cal-class small{font-size:9px;line-height:1.1;opacity:.75;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-cal-detail{margin-top:16px;padding:16px;border:1px solid var(--border-soft);border-radius:16px;background:var(--surface-1)}
.admin-cal-detail .clase-titulo{font-weight:800;margin-bottom:5px}
.admin-cal-count{font-size:12px;color:var(--text-muted);margin-bottom:10px}
.admin-cal-detail .cliente-row{padding:9px 0;border-bottom:1px solid var(--border-soft);font-size:13px}
.empty-state.compact{padding:12px 0;text-align:left}
/* v11.19.4 — Iconografía de interfaz NF24: títulos sin emojis, SVG lineal */
.nf24-title-with-icon{display:flex;align-items:center;gap:10px;}
.nf24-title-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex:0 0 30px;color:var(--accent,#ffd400);}
.nf24-title-icon svg{width:100%;height:100%;display:block;}
.header-row>.nf24-title-icon{width:26px;height:26px;flex-basis:26px;}
/* v11.21 — Mensajería Multi-Coach */
.chat-support-switch{width:100%;border:0;border-bottom:1px solid var(--border-soft);background:rgba(255,215,0,.06);color:var(--gold);font-size:11.5px;font-weight:700;padding:9px 14px;text-align:left;cursor:pointer}
.chat-support-switch:hover{background:rgba(255,215,0,.1)}
.workday-message-row{width:100%;display:flex;align-items:center;gap:11px;background:var(--surface-2,#17181b);border:1px solid var(--border-soft);border-radius:16px;padding:12px 13px;margin-bottom:9px;text-align:left;color:var(--text-dark);cursor:pointer}
.workday-message-row img{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0}
.workday-message-body{flex:1;min-width:0}.workday-message-name{font-size:13.5px;font-weight:800}.workday-message-preview{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.workday-message-role{font-size:10.5px;color:var(--gold);margin-top:2px}.workday-message-unread{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--gold);color:#111;font-size:10px;font-weight:900;display:flex;align-items:center;justify-content:center}
/* v11.21.2 — Home operativo exclusivo Paco/Coach */
.dash-workday-brief{margin:0 0 14px;padding:15px;border:1px solid rgba(255,215,0,.28);border-radius:18px;background:linear-gradient(145deg,#1a1b1e,#141517);box-shadow:0 10px 28px rgba(0,0,0,.18)}
.dash-workday-brief-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.dash-workday-brief-head>div{display:flex;flex-direction:column;gap:2px}.dash-workday-brief-kicker{font-size:10.5px;font-weight:900;letter-spacing:.08em;color:var(--gold)}.dash-workday-brief-head strong{font-size:16px;color:var(--text-dark)}.dash-workday-brief-head button{border:0;background:none;color:var(--gold);font:inherit;font-size:12px;font-weight:800;padding:5px 0;cursor:pointer;white-space:nowrap}
.dash-workday-brief-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.dash-workday-brief-item{border:1px solid var(--border-soft);background:rgba(255,255,255,.025);border-radius:13px;padding:10px 8px;text-align:left;cursor:pointer;color:var(--text-dark)}.dash-workday-brief-item strong{display:block;font-size:20px;line-height:1;color:var(--gold);margin-bottom:5px}.dash-workday-brief-item span{display:block;font-size:10.5px;line-height:1.2;color:var(--text-muted);font-weight:700}
.dash-workday-brief-admin{margin-top:10px;padding-top:10px;border-top:1px solid var(--border-soft)}.dash-workday-brief-admin-title{font-size:10px;font-weight:900;letter-spacing:.07em;color:var(--text-muted);margin-bottom:7px}.dash-workday-admin-row{display:flex;flex-wrap:wrap;gap:6px}.dash-workday-admin-pill{border:1px solid var(--border-soft);border-radius:999px;background:transparent;color:var(--text-muted);padding:6px 9px;font:inherit;font-size:10.5px;font-weight:700;cursor:pointer}.dash-workday-admin-pill strong{color:var(--gold);margin-right:3px}
.dash-invite-icon svg{width:25px;height:25px;color:var(--text-muted)}
@media(max-width:430px){.dash-workday-brief{padding:13px}.dash-workday-brief-kpis{gap:6px}.dash-workday-brief-item{padding:9px 6px}.dash-workday-brief-item strong{font-size:18px}.dash-workday-brief-item span{font-size:9.8px}.dash-workday-brief-head strong{font-size:15px}}
/* v11.3x — Workday Paco: tipo/servicios del cliente */
.workday-item-title-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0; }
.workday-service-badges { display:inline-flex; align-items:center; gap:5px; flex-wrap:wrap; }
.workday-service-badge { display:inline-flex; align-items:center; min-height:20px; padding:2px 7px; border-radius:999px; font-size:10.5px; line-height:1; font-weight:800; border:1px solid var(--border-soft); white-space:nowrap; }
.workday-service-badge--nf { color:#ffd400; background:rgba(255,212,0,.10); border-color:rgba(255,212,0,.35); }
.workday-service-badge--herbalife { color:#35d978; background:rgba(53,217,120,.10); border-color:rgba(53,217,120,.35); }
.workday-service-badge--dieta { color:#7bb8ff; background:rgba(123,184,255,.10); border-color:rgba(123,184,255,.35); }
.workday-service-badge--premium { color:#d9a7ff; background:rgba(217,167,255,.10); border-color:rgba(217,167,255,.35); }
.workday-service-badge--trial { color:#ffd400; background:rgba(255,212,0,.10); border-color:rgba(255,212,0,.38); }
.workday-kpi-pill--service b { color:var(--w-text); font-size:14px; }
@media (max-width:560px) {
.workday-service-badge { font-size:10px; padding:2px 6px; }
.workday-item-top { align-items:flex-start; }
}
/* v11.22.4 — KPI de servicios de Paco como filtros interactivos */
.workday-kpi-service-btn { cursor:pointer; font:inherit; color:inherit; transition:border-color .15s ease, background .15s ease, transform .15s ease; }
.workday-kpi-service-btn:hover { border-color:rgba(255,212,0,.45); }
.workday-kpi-service-btn.active { border-color:#ffd400; background:rgba(255,212,0,.12); box-shadow:0 0 0 1px rgba(255,212,0,.08) inset; }
.workday-kpi-service-btn:active { transform:translateY(1px); }
/* Medición mínima — Admin / Uso de NF24 */
.admin-usage-wrap{margin:0 0 22px}
.admin-usage-period{font-size:12px;color:var(--muted,#7b8493);font-weight:600}
.admin-usage-loading,.admin-usage-note{font-size:13px;color:var(--muted,#7b8493);padding:8px 2px}
.admin-usage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:12px 0 4px}
.admin-usage-card{background:var(--card,#fff);border:1px solid rgba(127,127,127,.16);border-radius:14px;padding:13px 10px;min-height:74px;display:flex;flex-direction:column;justify-content:center}
.admin-usage-card strong{font-size:23px;line-height:1.05;letter-spacing:-.5px;color:#111827}
.admin-usage-card span{font-size:11px;color:var(--muted,#7b8493);margin-top:6px;line-height:1.2}
.admin-usage-card-main{border-color:rgba(34,197,94,.28)}
@media(max-width:620px){.admin-usage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-usage-card{min-height:70px}}
/* ============================================================
NF24 — cierre seguro del reproductor + estiramiento final
Solo se muestra después de que la lógica existente entra en fase "fin".
============================================================ */
#page-admin-clase-reproductor .repro-estiramiento-overlay {
position: absolute;
inset: 0;
z-index: 45;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: radial-gradient(circle at 50% 25%, rgba(255,215,0,.11), transparent 35%), #050505;
color: #fff;
}
#page-admin-clase-reproductor .repro-estiramiento-intro {
width: min(560px, 96%);
text-align: center;
}
#page-admin-clase-reproductor .repro-estiramiento-icon { font-size: 54px; line-height: 1; margin-bottom: 12px; }
#page-admin-clase-reproductor .repro-estiramiento-intro h2 { margin: 0; font-size: clamp(27px, 4vw, 46px); }
#page-admin-clase-reproductor .repro-estiramiento-intro > p { color: rgba(255,255,255,.72); font-size: 17px; }
#page-admin-clase-reproductor .repro-estiramiento-card {
margin: 22px auto 14px;
padding: 18px;
border: 1px solid rgba(255,215,0,.32);
border-radius: 18px;
background: rgba(255,215,0,.07);
}
#page-admin-clase-reproductor .repro-estiramiento-card strong { display:block; font-size: 21px; color: var(--gold); }
#page-admin-clase-reproductor .repro-estiramiento-card span { display:block; margin-top:5px; color: rgba(255,255,255,.64); }
#page-admin-clase-reproductor .repro-estiramiento-cuenta { min-height: 24px; margin: 14px 0; color: var(--gold) !important; font-weight: 800; }
#page-admin-clase-reproductor .repro-estiramiento-acciones { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
#page-admin-clase-reproductor .repro-estiramiento-acciones button { width:100%; }
#page-admin-clase-reproductor .repro-estiramiento-video-wrap {
position:absolute;
inset:0;
display:flex;
flex-direction:column;
background:#000;
}
#page-admin-clase-reproductor .repro-estiramiento-video-head {
min-height:64px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:10px 16px;
border-bottom:1px solid rgba(255,255,255,.10);
background:#090909;
}
#page-admin-clase-reproductor .repro-estiramiento-video-head span { display:block; font-size:10px; letter-spacing:.12em; color:var(--gold); font-weight:900; }
#page-admin-clase-reproductor .repro-estiramiento-video-head strong { display:block; margin-top:2px; font-size:17px; }
#page-admin-clase-reproductor .repro-estiramiento-skip {
border:1px solid rgba(255,255,255,.16);
background:rgba(255,255,255,.06);
color:#fff;
border-radius:12px;
padding:9px 13px;
font-weight:750;
}
#page-admin-clase-reproductor .repro-estiramiento-video {
flex:1;
width:100%;
min-height:0;
object-fit:contain;
background:#000;
}
#page-admin-clase-reproductor .repro-estiramiento-play {
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:4;
border:1px solid rgba(255,215,0,.55);
background:rgba(10,10,10,.92);
color:#fff;
border-radius:16px;
padding:14px 20px;
font-size:16px;
font-weight:850;
}
#page-admin-clase-reproductor .repro-fin-overlay { z-index: 50; }
@media (max-width: 560px) {
#page-admin-clase-reproductor .repro-estiramiento-overlay { padding: 18px; }
#page-admin-clase-reproductor .repro-estiramiento-acciones { grid-template-columns:1fr; }
#page-admin-clase-reproductor .repro-estiramiento-video-head { min-height:58px; padding:8px 10px; }
}
/* ============================================================
NF24 · Reproductor — mejoras visuales solicitadas 14/09/2026
Alcance limitado: ronda/progreso, color por modalidad, transición
final a estiramiento y progreso del vídeo de recuperación.
============================================================ */
#page-admin-clase-reproductor .repro-wrap {
--repro-accent: #FFD400;
--repro-accent-rgb: 255,212,0;
}
/* Ronda mucho más visible para clases a distancia */
@media (min-width: 900px) {
#page-admin-clase-reproductor #repro-ronda-label {
font-size: clamp(30px, 2.4vw, 46px) !important;
padding: 10px 22px !important;
border-color: rgba(var(--repro-accent-rgb), .72) !important;
background: rgba(var(--repro-accent-rgb), .15) !important;
}
}
@media (max-width: 899px) {
#page-admin-clase-reproductor #repro-ronda-label {
font-size: 16px !important;
border-color: rgba(var(--repro-accent-rgb), .65) !important;
background: rgba(var(--repro-accent-rgb), .14) !important;
}
}
/* Barra global de progreso de la clase */
#page-admin-clase-reproductor .repro-progreso-global {
width: min(88%, 1180px);
height: 5px;
margin: 0 auto 10px;
flex-shrink: 0;
border-radius: 999px;
overflow: hidden;
background: rgba(255,255,255,.14);
}
#page-admin-clase-reproductor .repro-progreso-global-fill {
height: 100%;
width: 0;
border-radius: inherit;
background: var(--repro-accent);
box-shadow: 0 0 14px rgba(var(--repro-accent-rgb), .40);
transition: width .25s ease;
}
#page-admin-clase-reproductor #repro-ronda-label::after {
background:
linear-gradient(
to right,
var(--repro-accent) 0%,
var(--repro-accent) var(--nf24-round-progress, 0%),
rgba(255,255,255,.20) var(--nf24-round-progress, 0%),
rgba(255,255,255,.20) 100%
) !important;
box-shadow: 0 0 10px rgba(var(--repro-accent-rgb), .28) !important;
}
/* Acento automático por modalidad sin alterar el fondo oscuro ni el cronómetro */
#page-admin-clase-reproductor .repro-ctrl-btn-grande {
background: var(--repro-accent) !important;
color: #111 !important;
box-shadow: 0 0 20px rgba(var(--repro-accent-rgb), .20);
}
#page-admin-clase-reproductor .repro-wrap.nf24-fase-trabajo .repro-fase,
#page-admin-clase-reproductor .repro-wrap.nf24-fase-prestretch .repro-fase {
color: var(--repro-accent) !important;
}
#page-admin-clase-reproductor .repro-wrap.nf24-fase-trabajo .repro-panel,
#page-admin-clase-reproductor .repro-wrap.nf24-fase-prestretch .repro-panel {
background: linear-gradient(90deg, rgba(var(--repro-accent-rgb), .085), rgba(0,0,0,0) 72%) !important;
}
/* Los 20 s tras el último ejercicio son una preparación especial, no un descanso normal */
#page-admin-clase-reproductor .repro-descanso-overlay.repro-prestretch {
background:
radial-gradient(circle at 50% 34%, rgba(var(--repro-accent-rgb), .16), transparent 40%),
#080808 !important;
}
#page-admin-clase-reproductor .repro-descanso-overlay.repro-prestretch .repro-descanso-titulo {
color: var(--repro-accent) !important;
}
#page-admin-clase-reproductor .repro-descanso-overlay.repro-prestretch .repro-descanso-tiempo {
color: #fff !important;
}
#page-admin-clase-reproductor .repro-descanso-overlay.repro-prestretch .repro-descanso-siguiente {
max-width: 820px !important;
color: #fff !important;
font-size: clamp(34px, 3vw, 58px) !important;
text-align: center;
}
/* Pantalla de estiramiento: CTA principal NF24 y omitir oscuro */
#page-admin-clase-reproductor .repro-estiramiento-btn-primary {
background: var(--repro-accent) !important;
color: #111 !important;
border-color: var(--repro-accent) !important;
font-weight: 900 !important;
}
#page-admin-clase-reproductor .repro-estiramiento-btn-secondary {
background: #171717 !important;
color: #fff !important;
border: 1px solid rgba(255,255,255,.22) !important;
font-weight: 800 !important;
}
#page-admin-clase-reproductor .repro-estiramiento-card {
border-color: rgba(var(--repro-accent-rgb), .40) !important;
background: rgba(var(--repro-accent-rgb), .075) !important;
}
#page-admin-clase-reproductor .repro-estiramiento-card strong,
#page-admin-clase-reproductor .repro-estiramiento-cuenta,
#page-admin-clase-reproductor .repro-estiramiento-video-head span {
color: var(--repro-accent) !important;
}
/* Progreso discreto del vídeo de recuperación */
#page-admin-clase-reproductor .repro-estiramiento-progreso-wrap {
padding: 8px 16px 9px;
background: #090909;
border-bottom: 1px solid rgba(255,255,255,.08);
}
#page-admin-clase-reproductor .repro-estiramiento-progreso-copy {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 6px;
color: rgba(255,255,255,.68);
font-size: 11px;
}
#page-admin-clase-reproductor .repro-estiramiento-progreso-copy strong {
color: #fff;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
#page-admin-clase-reproductor .repro-estiramiento-progreso-track {
height: 4px;
border-radius: 999px;
overflow: hidden;
background: rgba(255,255,255,.14);
}
#page-admin-clase-reproductor .repro-estiramiento-progreso-fill {
width: 0;
height: 100%;
border-radius: inherit;
background: var(--repro-accent);
transition: width .20s linear;
}
@media (max-width: 560px) {
#page-admin-clase-reproductor .repro-progreso-global {
width: 92%;
height: 4px;
}
#page-admin-clase-reproductor .repro-estiramiento-progreso-copy {
font-size: 10px;
}
}
/* ============================================================
NF24 · Descanso limpio
Solo elimina duplicados del panel derecho durante descanso y
preparación final. No altera tiempos, vídeo, controles ni motor.
============================================================ */
#page-admin-clase-reproductor .repro-panel.repro-panel-descanso-limpio .repro-fase,
#page-admin-clase-reproductor .repro-panel.repro-panel-descanso-limpio .repro-ejercicio-nombre,
#page-admin-clase-reproductor .repro-panel.repro-panel-descanso-limpio .repro-tiempo,
#page-admin-clase-reproductor .repro-panel.repro-panel-descanso-limpio .repro-siguiente {
display: none !important;
}
#page-admin-clase-reproductor .repro-panel.repro-panel-descanso-limpio .repro-bloque-nombre-label {
margin-bottom: 28px;
}
#page-admin-clase-reproductor .repro-panel.repro-panel-descanso-limpio .repro-controles {
margin-top: auto;
}
/* ============================================================
NF24 · Logo de marca en descansos
SOLO PRESENTACIÓN: ocupa el espacio libre del panel derecho
únicamente en descanso normal y preparación al estiramiento.
============================================================ */
#page-admin-clase-reproductor .repro-descanso-brand {
display: none;
}
#page-admin-clase-reproductor .repro-panel.repro-panel-descanso-limpio .repro-descanso-brand {
display: flex;
flex: 1 1 auto;
min-height: 0;
align-items: center;
justify-content: center;
width: 100%;
padding: 18px 22px 10px;
}
#page-admin-clase-reproductor .repro-panel.repro-panel-descanso-limpio .repro-descanso-brand-logo {
display: block;
width: min(88%, 460px);
max-height: 38vh;
height: auto;
object-fit: contain;
filter: drop-shadow(0 10px 28px rgba(var(--repro-accent-rgb), .16));
}
@media (max-width: 899px) {
#page-admin-clase-reproductor .repro-panel.repro-panel-descanso-limpio .repro-descanso-brand {
padding: 10px 12px 6px;
}
#page-admin-clase-reproductor .repro-panel.repro-panel-descanso-limpio .repro-descanso-brand-logo {
width: min(78%, 300px);
max-height: 24vh;
}
}
/* ============================================================
NF24 · Logo de modalidad en el reproductor
Identifica visualmente la clase durante el trabajo sin reducir
el tamaño del contador. En descanso/prestretch se oculta para
dejar el espacio al logo NF24 ya existente.
============================================================ */
#page-admin-clase-reproductor .repro-modalidad-logo-wrap {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 54px;
margin: -2px 0 10px;
padding: 0 12px;
}
#page-admin-clase-reproductor .repro-modalidad-logo-wrap.hidden {
display: none !important;
}
#page-admin-clase-reproductor .repro-modalidad-logo {
display: block;
width: min(76%, 360px);
max-height: 82px;
height: auto;
object-fit: contain;
filter: drop-shadow(0 8px 20px rgba(var(--repro-accent-rgb), .18));
}
#page-admin-clase-reproductor .repro-panel.repro-panel-descanso-limpio .repro-modalidad-logo-wrap {
display: none !important;
}
@media (max-width: 899px) {
#page-admin-clase-reproductor .repro-modalidad-logo-wrap {
min-height: 42px;
margin-bottom: 6px;
padding: 0 8px;
}
#page-admin-clase-reproductor .repro-modalidad-logo {
width: min(72%, 260px);
max-height: 58px;
}
}
/* ============================================================
NF24 · Compatibilidad táctil Android + fullscreen móvil
15/09/2026. No altera lógica del reproductor ni navegación.
============================================================ */
/* En dispositivos táctiles dejamos el gesto vertical en manos del
navegador. Evita que Chrome/WebView Android requiera un gesto
multitáctil para desplazar la SPA. */
@media (hover: none) and (pointer: coarse) {
html, body {
touch-action: auto !important;
overscroll-behavior-y: auto !important;
-webkit-overflow-scrolling: touch;
}
.page.active {
touch-action: pan-y pinch-zoom;
}
/* Los carruseles/tabs horizontales conservan su gesto lateral. */
.calendar-wrap,
.workday-tabs,
.stat-scroll,
.metric-tabs,
.admin-quick-actions,
.admin-filter-chips,
.entcli-categorias-wrap,
#coach-clientes-filtros,
#admin-ficha-tabs {
touch-action: pan-x pan-y;
}
}
/* Fallback de pantalla completa para iOS/Safari/PWA, donde un DIV no
siempre puede usar requestFullscreen(). */
html.nf24-repro-fullscreen,
body.nf24-repro-fullscreen {
overflow: hidden !important;
}
#page-admin-clase-reproductor .repro-wrap.nf24-pseudo-fullscreen {
position: fixed !important;
inset: 0 !important;
z-index: 20000 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
min-height: 100vh !important;
min-height: 100dvh !important;
max-width: none !important;
margin: 0 !important;
border-radius: 0 !important;
background: #000 !important;
padding-top: max(10px, env(safe-area-inset-top)) !important;
padding-right: max(10px, env(safe-area-inset-right)) !important;
padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
padding-left: max(10px, env(safe-area-inset-left)) !important;
}
body.nf24-repro-fullscreen .bottom-nav,
body.nf24-repro-fullscreen #bottom-nav {
display: none !important;
}
/* Captación NF24 — home: 4 KPIs sin perder legibilidad */
@media(min-width:700px){.dash-workday-brief-kpis{grid-template-columns:repeat(4,1fr)}}
@media(max-width:699px){.dash-workday-brief-kpis{grid-template-columns:repeat(2,1fr)}}
/* v72 — Reserva de centro: tarjeta premium y compacta */
#page-dashboard #dash-next-card.dash-reserva-centro-principal {
position: relative;
margin: 14px 0 20px;
padding: 20px 22px 17px;
border: 1px solid rgba(255,209,0,.34);
border-radius: 20px;
background:
radial-gradient(circle at 88% 10%, rgba(255,209,0,.12), transparent 34%),
linear-gradient(145deg, rgba(30,30,31,.98), rgba(17,17,18,.98));
box-shadow: 0 14px 34px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.035);
overflow: hidden;
}
#page-dashboard #dash-next-card.dash-reserva-centro-principal::before {
content: "";
position: absolute;
left: 0;
top: 18px;
bottom: 18px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--gold);
}
#page-dashboard #dash-next-card.dash-reserva-centro-principal::after { display:none; }
#page-dashboard #dash-next-card.dash-reserva-centro-principal .dash-reserva-premium-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
}
#page-dashboard #dash-next-card.dash-reserva-centro-principal .dash-reserva-centro-kicker {
margin-bottom:7px;
color:var(--gold);
font-size:11px;
font-weight:900;
letter-spacing:1.15px;
}
#page-dashboard #dash-next-card.dash-reserva-centro-principal .dash-card-main {
margin:0;
color:#fff;
font-size:20px;
line-height:1.2;
font-weight:850;
}
#page-dashboard #dash-next-card.dash-reserva-centro-principal .dash-card-sub {
margin-top:7px;
color:rgba(255,255,255,.62);
font-size:14px;
line-height:1.35;
}
#page-dashboard #dash-next-card.dash-reserva-centro-principal .dash-reserva-fecha {
width:64px;
height:64px;
flex:0 0 64px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
border:1px solid rgba(255,209,0,.38);
border-radius:17px;
background:rgba(255,209,0,.08);
color:#fff;
}
#page-dashboard #dash-next-card.dash-reserva-centro-principal .dash-reserva-fecha span {
font-size:24px;
line-height:1;
font-weight:900;
}
#page-dashboard #dash-next-card.dash-reserva-centro-principal .dash-reserva-fecha small {
margin-top:5px;
color:var(--gold);
font-size:10px;
font-weight:900;
letter-spacing:.8px;
}
#page-dashboard #dash-next-card.dash-reserva-centro-principal .dash-reserva-fecha-vacia {
font-size:25px;
}
#page-dashboard #dash-next-card.dash-reserva-centro-principal .dash-reserva-centro-cta {
display:flex;
align-items:center;
gap:7px;
width:max-content;
margin-top:15px;
color:var(--gold);
font-size:12px;
font-weight:900;
letter-spacing:.55px;
}
#page-dashboard #dash-next-card.dash-reserva-centro-principal .dash-reserva-centro-cta span {
font-size:16px;
transition:transform .18s ease;
}
#page-dashboard #dash-next-card.dash-reserva-centro-principal:hover .dash-reserva-centro-cta span { transform:translateX(3px); }
@media (max-width:520px) {
#page-dashboard #dash-next-card.dash-reserva-centro-principal { padding:18px 18px 15px; }
#page-dashboard #dash-next-card.dash-reserva-centro-principal .dash-card-main { font-size:18px; }
#page-dashboard #dash-next-card.dash-reserva-centro-principal .dash-card-sub { font-size:13px; }
#page-dashboard #dash-next-card.dash-reserva-centro-principal .dash-reserva-fecha { width:58px;height:58px;flex-basis:58px;border-radius:15px; }
#page-dashboard #dash-next-card.dash-reserva-centro-principal .dash-reserva-fecha span { font-size:22px; }
}
/* v11.31 — identidad visual por centro */
.centro-brand-card{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:0 0 14px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.centro-brand-logo{width:54px;height:54px;border-radius:14px;object-fit:cover;background:#111;border:1px solid var(--border)}
.centro-brand-card>div{display:flex;flex-direction:column;gap:2px}.centro-brand-kicker{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
.centro-brand-card strong{font-size:16px}.mi-centro-identidad{display:flex;align-items:center;gap:16px}.mi-centro-logo{width:78px;height:78px;border-radius:18px;object-fit:cover;background:#111;border:1px solid var(--border);flex:0 0 auto}.mi-centro-identidad-texto{min-width:0}.mi-centro-logo-ayuda{display:block;font-size:11px;color:var(--text-muted);margin-top:7px}@media(max-width:520px){.mi-centro-logo{width:68px;height:68px}.mi-centro-identidad{align-items:flex-start}}
/* ============================================================
v75 — Agenda Premium: lavado de cara UX/UI sin cambiar su lógica
============================================================ */
#page-agenda-nf24 .header-row{margin-bottom:18px}
#page-agenda-nf24 #agenda-nueva-tarea-btn{padding:11px 16px;border-radius:14px;box-shadow:0 8px 24px rgba(255,215,0,.10)}
.agenda-premium-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 24px;margin:0 0 16px;border:1px solid rgba(255,215,0,.20);border-radius:22px;background:radial-gradient(circle at 90% 10%,rgba(255,215,0,.11),transparent 36%),linear-gradient(145deg,rgba(31,31,34,.96),rgba(18,18,20,.98));box-shadow:0 18px 50px rgba(0,0,0,.20)}
.agenda-premium-kicker{display:block;color:var(--yellow);font-size:10px;font-weight:900;letter-spacing:.12em;margin-bottom:7px}
.agenda-premium-hero h2{margin:0;color:var(--text-dark);font-size:22px;line-height:1.15}
.agenda-premium-hero p{margin:7px 0 0;color:var(--text-muted);font-size:13px}
.agenda-premium-stats{display:grid;grid-template-columns:repeat(3,minmax(72px,1fr));gap:8px;flex:0 0 auto}
.agenda-premium-stats>div{min-width:76px;padding:11px 12px;border:1px solid var(--border-soft);border-radius:14px;background:rgba(255,255,255,.025);text-align:center}
.agenda-premium-stats strong{display:block;color:var(--text-dark);font-size:19px;line-height:1}
.agenda-premium-stats span{display:block;color:var(--text-muted);font-size:10px;margin-top:5px}
.agenda-premium-stats .has-overdue{border-color:rgba(255,74,74,.35);background:rgba(255,74,74,.06)}
.agenda-premium-stats .has-overdue strong{color:#ff5a5f}
.agenda-view-switch{padding:4px;background:rgba(255,255,255,.025);border:1px solid var(--border-soft);border-radius:15px;width:max-content}
#agenda-tabs{margin:12px 0 14px}
#agenda-lista .workday-item-card,#agenda-cal-dia-lista .workday-item-card{border-radius:18px;padding:16px 17px;margin-bottom:10px;transition:transform .16s ease,border-color .16s ease;background:linear-gradient(145deg,rgba(30,30,33,.98),rgba(23,23,25,.98))}
#agenda-lista .workday-item-card:hover,#agenda-cal-dia-lista .workday-item-card:hover{transform:translateY(-1px);border-color:rgba(255,215,0,.22)}
#agenda-lista .workday-item-title,#agenda-cal-dia-lista .workday-item-title{font-size:15px}
#agenda-lista .workday-item-meta,#agenda-cal-dia-lista .workday-item-meta{margin-top:5px}
.agenda-modal-premium{border:1px solid rgba(255,215,0,.15)!important;box-shadow:0 30px 90px rgba(0,0,0,.55)!important}
.agenda-modal-head{display:flex;gap:12px;align-items:center;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border-soft)}
.agenda-modal-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--yellow);color:#111;font-weight:1000;font-size:18px;flex:0 0 auto}
.agenda-modal-sub{margin:4px 0 0;color:var(--text-muted);font-size:11.5px;line-height:1.35}
.agenda-field-hint{font-size:10px;color:var(--text-muted);margin:5px 2px 0}
.agenda-more-options{border:1px solid var(--border-soft);border-radius:14px;background:rgba(255,255,255,.018);overflow:hidden}
.agenda-more-options summary{cursor:pointer;list-style:none;padding:12px 13px;color:var(--text-dark);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:space-between;gap:10px}
.agenda-more-options summary::-webkit-details-marker{display:none}
.agenda-more-options summary:after{content:'+';color:var(--yellow);font-size:18px;font-weight:500}
.agenda-more-options[open] summary:after{content:'–'}
.agenda-more-options summary span{font-size:9.5px;color:var(--text-muted);font-weight:500;margin-left:auto}
.agenda-more-options-body{padding:0 12px 12px;display:flex;flex-direction:column;gap:12px}
@media(max-width:640px){.agenda-premium-hero{align-items:flex-start;flex-direction:column;padding:18px}.agenda-premium-stats{width:100%;grid-template-columns:repeat(3,1fr)}.agenda-premium-stats>div{min-width:0}.agenda-premium-hero h2{font-size:20px}#page-agenda-nf24 #agenda-nueva-tarea-btn span{display:none}.agenda-modal-premium{max-height:92vh!important}}
/* v11.31 — Cuotas de Mi centro: resumen premium y legible */
.centro-cuotas-kpis {
display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin:4px 0 14px;
}
.centro-cuotas-kpi {
min-height:78px; padding:13px 14px; border:1px solid var(--w-border); border-radius:16px;
background:linear-gradient(145deg,var(--w-surface),rgba(255,212,0,.035));
display:flex; flex-direction:column; justify-content:space-between; gap:8px;
}
.centro-cuotas-kpi-label { color:var(--w-text-muted); font-size:11px; font-weight:700; line-height:1.2; }
.centro-cuotas-kpi strong { color:var(--w-text); font-size:22px; line-height:1; letter-spacing:-.02em; }
.centro-cuotas-kpi--money { border-color:rgba(255,212,0,.28); background:linear-gradient(145deg,var(--w-surface),rgba(255,212,0,.09)); }
.centro-cuotas-kpi--money strong { color:var(--w-accent); }
@media (max-width:760px){
.centro-cuotas-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
.centro-cuotas-kpi--money{grid-column:1/-1;}
}
/* Natural Fitness: KPI Pausa/Ausentes accionable + lista WhatsApp */
.gnf-kpi-click{cursor:pointer;transition:filter .15s ease,transform .15s ease}.gnf-kpi-click:hover{filter:brightness(1.18);transform:translateY(-1px)}
.gnf-pausas-overlay{position:fixed;inset:0;z-index:10050;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:20px}.gnf-pausas-overlay.hidden{display:none}.gnf-pausas-card{width:min(620px,96vw);max-height:82vh;overflow:auto;background:#151515;border:1px solid #333;border-radius:18px;padding:20px}.gnf-pausas-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}.gnf-pausas-head h3{margin:0 0 4px}.gnf-pausas-head p{margin:0;color:#999}.gnf-pausas-head button{border:0;background:#292929;color:#fff;width:36px;height:36px;border-radius:10px;font-size:24px;cursor:pointer}.gnf-pausa-persona{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-top:1px solid #2b2b2b}.gnf-pausa-persona small{display:block;color:#999;margin-top:3px}
.gnf-acciones-menu .gnf-menu-link{display:block;width:100%;padding:10px 12px;color:inherit;text-decoration:none;white-space:nowrap}.gnf-acciones-menu .gnf-menu-link:hover{background:rgba(255,255,255,.07)}
/* v87 — Facturación Natural Fitness: cuotas + otros ingresos + visión anual */
.gnf-facturacion-extra{margin-top:10px;display:grid;grid-template-columns:minmax(220px,.8fr) minmax(300px,1.2fr);gap:10px}.gnf-facturacion-total,.gnf-otros-detalle{border:1px solid rgba(255,212,0,.22);background:rgba(255,212,0,.045);border-radius:14px;padding:12px 14px}.gnf-facturacion-total{display:flex;flex-direction:column;gap:3px}.gnf-facturacion-total small,.gnf-facturacion-total span,.gnf-otros-detalle small{color:var(--text-muted);font-size:10.5px}.gnf-facturacion-total strong{font-size:22px;color:var(--yellow)}.gnf-otros-detalle summary{cursor:pointer;font-size:12px;font-weight:800}.gnf-otros-detalle summary small{display:block;margin-top:4px;font-weight:500}.gnf-otros-detalle>div{display:grid;gap:6px;margin-top:10px}.gnf-otros-detalle>div span{display:flex;justify-content:space-between;gap:12px;font-size:11px;border-top:1px solid rgba(255,255,255,.06);padding-top:6px}.gnf-grafica-anual{margin:12px 0 18px;border:1px solid var(--w-border);border-radius:16px;padding:14px;background:var(--w-surface)}.gnf-grafica-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:12px}.gnf-grafica-head small{color:var(--text-muted);font-size:10px}.gnf-grafica-barras{height:150px;display:grid;grid-template-columns:repeat(12,minmax(34px,1fr));gap:6px;align-items:end;overflow-x:auto}.gnf-bar-col{height:135px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:34px}.gnf-bar{width:70%;max-width:28px;background:var(--yellow);border-radius:6px 6px 2px 2px;min-height:0}.gnf-bar-col small{font-size:9px;color:var(--text-muted);margin-top:5px}.gnf-bar-valor{font-size:8px;color:var(--text-muted);margin-bottom:3px;white-space:nowrap}@media(max-width:700px){.gnf-facturacion-extra{grid-template-columns:1fr}.gnf-grafica-barras{grid-template-columns:repeat(12,38px)}}
/* v88 · Ficha editable Natural Fitness */
.gnf-cliente-link{background:none;border:0;padding:0;color:inherit;font:inherit;font-weight:700;text-align:left;cursor:pointer}.gnf-cliente-link:hover{text-decoration:underline;text-decoration-color:#ffd400}.gnf-ficha-overlay{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;padding:24px}.gnf-ficha-card{width:min(980px,96vw);max-height:92vh;overflow:auto;background:#171717;border:1px solid #343434;border-radius:20px;padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.5)}.gnf-ficha-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;border-bottom:1px solid #303030;padding-bottom:16px;margin-bottom:18px}.gnf-ficha-head h2{margin:0 0 5px}.gnf-ficha-head p{margin:0;color:#999}.gnf-ficha-x{border:0;border-radius:12px;background:#303030;color:#fff;font-size:26px;width:42px;height:42px;cursor:pointer}.gnf-ficha-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.gnf-ficha-campo{display:flex;flex-direction:column;gap:6px;color:#aaa;font-size:12px}.gnf-ficha-campo input,.gnf-ficha-campo textarea{width:100%;box-sizing:border-box;background:#0e0e0e;color:#fff;border:1px solid #363636;border-radius:10px;padding:11px 12px;font:inherit}.gnf-ficha-campo input:focus,.gnf-ficha-campo textarea:focus{outline:1px solid #ffd400;border-color:#ffd400}.gnf-ficha-ancho{grid-column:1/-1}.gnf-ficha-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}@media(max-width:760px){.gnf-ficha-grid{grid-template-columns:1fr}.gnf-ficha-ancho{grid-column:auto}.gnf-ficha-overlay{padding:10px}.gnf-ficha-card{padding:16px}}
/* v89 estabilizacion Gestion Natural Fitness */
#gnf-facturacion-extra,#gnf-grafica-anual{display:none!important}
.gnf-celda-backdrop{position:fixed;inset:0;z-index:99990;background:rgba(0,0,0,.72)}
#gnf-celda-form.gnf-celda-modal{display:block!important;position:fixed;z-index:99991;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,94vw);max-height:88vh;overflow:auto;margin:0!important;background:#171717;border:1px solid #343434;border-radius:20px;padding:20px;box-shadow:0 24px 80px rgba(0,0,0,.6)}
.gnf-fila-otro td{background:rgba(255,212,0,.035)}.gnf-fila-otro .gnf-col-cliente{color:#ffd400;font-weight:800}.gnf-fila-anadir td{text-align:left;padding:14px!important;border-top:1px solid rgba(255,212,0,.25)}
.gnf-hist-detalle{font-size:14px;line-height:1.55}.gnf-hist-aviso{margin-top:18px;padding:12px;border-radius:10px;background:#101010;color:#999;font-size:12px}
/* v90 — búsqueda rápida Natural Fitness */
.gnf-buscador-wrap{display:flex;align-items:center;gap:10px;margin:10px 0 12px;}
.gnf-buscador-wrap .input{max-width:430px;margin:0;}
.gnf-buscador-contador{font-size:12px;color:var(--text-muted);white-space:nowrap;}
@media(max-width:640px){.gnf-buscador-wrap{align-items:stretch;flex-direction:column}.gnf-buscador-wrap .input{max-width:none}.gnf-buscador-contador{padding-left:2px}}
/* v93 — base histórica Natural Fitness */
.gnf-bd-lista{display:grid;gap:7px;margin:10px 0 18px}.gnf-bd-fila{margin:0!important;padding:10px 12px!important;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.gnf-bd-info{min-width:220px;flex:1}.gnf-bd-meta{font-size:12px;color:var(--text-muted);margin-top:3px}.gnf-bd-actions{display:flex;gap:7px;flex-wrap:wrap}.gnf-bd-actions .btn-secondary,.gnf-bd-actions .btn-primary{padding:7px 10px;text-decoration:none}
/* v93 — base histórica Natural Fitness */
.gnf-bd-lista{display:grid;gap:7px;margin:10px 0 18px}.gnf-bd-fila{margin:0!important;padding:10px 12px!important;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.gnf-bd-info{min-width:220px;flex:1}.gnf-bd-meta{font-size:12px;color:var(--text-muted);margin-top:3px}.gnf-bd-actions{display:flex;gap:7px;flex-wrap:wrap}.gnf-bd-actions .btn-secondary,.gnf-bd-actions .btn-primary{padding:7px 10px;text-decoration:none}
/* v93.1 — accesos visibles Natural Fitness + WhatsApp inline en plazas */
.gnf-nav-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0 8px}.gnf-nav-tab{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:10px;padding:9px 13px;font-weight:800;cursor:pointer}.gnf-nav-tab:hover,.gnf-nav-tab.active{border-color:var(--accent);color:var(--accent)}.gnf-cliente-nombre-wa{display:flex;align-items:center;gap:7px}.gnf-wa-inline{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding:0 6px;border-radius:7px;background:#25D366;color:#07150b!important;font-size:10px;font-weight:900;text-decoration:none;line-height:1}.gnf-wa-inline:hover{filter:brightness(1.08)}
/* v94 — estadísticas Natural Fitness */
#gnf-grafica-anual{display:block!important}
.gnf-comparativa-anual{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:14px}.gnf-comparativa-anual>div{border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:9px 10px;display:flex;justify-content:space-between;gap:8px}.gnf-comparativa-anual span{color:var(--text-muted);font-size:11px}.gnf-comparativa-anual strong{font-size:12px;color:var(--yellow)}
/* v95 — estadísticas Natural Fitness compactas */
#gnf-grafica-anual{margin:12px 0 18px!important;padding:14px 16px!important;background:rgba(255,255,255,.018)!important}
.gnf-stats-top{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:12px}.gnf-stats-top>div:first-child{display:flex;flex-direction:column;gap:2px}.gnf-stats-top strong{font-size:16px}.gnf-stats-top small{font-size:11px;color:var(--text-muted)}.gnf-stats-kpis{display:flex;gap:8px}.gnf-stats-kpis>div{min-width:110px;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:7px 10px;display:flex;flex-direction:column}.gnf-stats-kpis span{font-size:9px;color:var(--text-muted);text-transform:uppercase}.gnf-stats-kpis b{font-size:15px;color:var(--yellow)}
.gnf-bars-clean{height:178px;display:grid;grid-template-columns:repeat(12,minmax(48px,1fr));gap:8px;align-items:end;overflow-x:auto;padding-top:4px}.gnf-bar-clean-col{height:170px;display:grid;grid-template-rows:22px 128px 20px;align-items:end;text-align:center;min-width:48px}.gnf-bar-clean-col>span{font-size:10px;color:var(--text-muted);white-space:nowrap}.gnf-bar-clean-track{height:128px;display:flex;align-items:flex-end;justify-content:center;border-bottom:1px solid rgba(255,255,255,.12);background:linear-gradient(to top,rgba(255,255,255,.025),transparent)}.gnf-bar-clean-track i{display:block;width:64%;max-width:38px;background:#ffd400;border-radius:7px 7px 2px 2px;box-shadow:0 0 0 1px rgba(255,212,0,.08)}.gnf-bar-clean-col small{font-size:10px;color:var(--text-muted);padding-top:5px}.gnf-years-clean{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.gnf-years-clean>button{appearance:none;background:transparent;color:inherit;border:1px solid rgba(255,255,255,.10);border-radius:9px;padding:8px 11px;display:flex;gap:12px;align-items:center;cursor:pointer;font:inherit}.gnf-years-clean>button:hover{border-color:rgba(255,212,0,.65);background:rgba(255,212,0,.04)}.gnf-years-clean>button.actual{border-color:rgba(255,212,0,.55);background:rgba(255,212,0,.05)}.gnf-years-clean span{font-size:10px;color:var(--text-muted)}.gnf-years-clean b{font-size:11px}.gnf-years-clean .actual b{color:var(--yellow)}
@media(max-width:700px){.gnf-stats-kpis{width:100%}.gnf-stats-kpis>div{flex:1}.gnf-bars-clean{grid-template-columns:repeat(12,46px)}}
/* v97 — pulido visual Gestión Natural Fitness. Solo presentación + borrar fila de otros ingresos. */
.gnf-tabla{border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:14px}
.gnf-tabla thead th{position:sticky;top:0;z-index:3;background:#151515;box-shadow:0 1px 0 rgba(255,255,255,.08);letter-spacing:.03em}
.gnf-tabla tbody tr{transition:background .15s ease}
.gnf-tabla tbody tr:not(.gnf-fila-otro):hover td{background:rgba(255,255,255,.025)}
.gnf-fila-otro td{background:rgba(255,212,0,.028);border-color:rgba(255,212,0,.10)}
.gnf-fila-otro:hover td{background:rgba(255,212,0,.055)!important}
.gnf-otro-nombre{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.gnf-otro-nombre>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gnf-otro-eliminar{flex:0 0 25px;width:25px;height:25px;border-radius:8px;border:1px solid rgba(255,255,255,.10);background:#1d1d1d;color:#8d8d8d;font-size:18px;line-height:20px;cursor:pointer;opacity:.55;transition:.15s ease}
.gnf-fila-otro:hover .gnf-otro-eliminar,.gnf-otro-eliminar:focus{opacity:1}
.gnf-otro-eliminar:hover{border-color:#d85858;color:#ff7474;background:rgba(216,88,88,.08)}
.gnf-fila-anadir td{background:#151515!important}
.gnf-fila-anadir button{color:#d7d7d7!important;font-weight:700;cursor:pointer;padding:2px 0!important}
.gnf-fila-anadir button:hover{color:#ffd400!important}
.gnf-ficha-card{scrollbar-width:thin;scrollbar-color:#555 #171717}
.gnf-ficha-head{position:sticky;top:-22px;z-index:5;background:#171717;padding-top:4px}
.gnf-ficha-actions{position:sticky;bottom:-22px;z-index:5;background:linear-gradient(to top,#171717 75%,rgba(23,23,23,.90));padding-top:12px;padding-bottom:4px}
.gnf-stats-top strong{font-size:18px}.gnf-stats-kpis>div{background:rgba(255,255,255,.018)}
.gnf-bar-clean-track i{transition:height .25s ease,filter .15s ease}.gnf-bar-clean-col:hover i{filter:brightness(1.12)}
.gnf-bar-clean-col:hover>span{color:#fff}
#gnf-tabla-wrap{padding-bottom:92px}
@media(max-width:760px){.gnf-ficha-head{top:-16px}.gnf-ficha-actions{bottom:-16px}.gnf-otro-eliminar{opacity:1}}
/* ============================================================
v98 — NF24FIT LIQUID GLASS · Gestión Natural Fitness
EXCLUSIVAMENTE VISUAL. No modifica HTML, JS, datos ni comportamiento.
============================================================ */
#page-admin-gestion-nf{
--gnf-glass:rgba(25,25,27,.58);
--gnf-glass-strong:rgba(30,30,33,.72);
--gnf-glass-soft:rgba(255,255,255,.045);
--gnf-line:rgba(255,255,255,.105);
--gnf-line-hi:rgba(255,255,255,.18);
--gnf-shadow:0 22px 65px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.055);
position:relative;
}
#page-admin-gestion-nf:before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
background:
radial-gradient(700px 420px at 76% 7%,rgba(255,212,0,.055),transparent 65%),
radial-gradient(520px 360px at 8% 52%,rgba(255,255,255,.025),transparent 70%);
}
#page-admin-gestion-nf .header-row h1{letter-spacing:-.025em;font-weight:850}
#page-admin-gestion-nf .gnf-anio-nav{gap:16px;margin:18px auto 14px}
#page-admin-gestion-nf .gnf-anio-nav .btn-secondary{
background:linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.035))!important;
border:1px solid var(--gnf-line-hi)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.22);
backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);
}
#page-admin-gestion-nf .gnf-resumen-card,
#page-admin-gestion-nf #gnf-grafica-anual{
position:relative;overflow:hidden;
background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018))!important;
border:1px solid var(--gnf-line)!important;border-radius:22px!important;
box-shadow:var(--gnf-shadow)!important;
backdrop-filter:blur(28px) saturate(155%);-webkit-backdrop-filter:blur(28px) saturate(155%);
}
#page-admin-gestion-nf .gnf-resumen-card:before,
#page-admin-gestion-nf #gnf-grafica-anual:before{
content:"";position:absolute;left:3%;right:3%;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
}
#page-admin-gestion-nf .gnf-resumen-card{padding:13px 14px!important}
#page-admin-gestion-nf .gnf-resumen-mes-picker .input,
#page-admin-gestion-nf .gnf-buscador-wrap .input{
background:rgba(255,255,255,.065)!important;border:1px solid rgba(255,255,255,.13)!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 8px 20px rgba(0,0,0,.10);
backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
#page-admin-gestion-nf .admin-kpi-banda{
overflow:hidden;border:1px solid rgba(255,255,255,.075)!important;border-radius:15px!important;
background:rgba(0,0,0,.12)!important;
}
#page-admin-gestion-nf .admin-kpi-banda>*{
background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.005))!important;
border-color:rgba(255,255,255,.075)!important;
}
#page-admin-gestion-nf .gnf-stats-kpis>div,
#page-admin-gestion-nf .gnf-years-clean>button{
background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018))!important;
border-color:rgba(255,255,255,.11)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
#page-admin-gestion-nf .gnf-years-clean>button.actual{
border-color:rgba(255,212,0,.48)!important;background:linear-gradient(145deg,rgba(255,212,0,.12),rgba(255,212,0,.025))!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 24px rgba(255,212,0,.045);
}
#page-admin-gestion-nf .gnf-bar-clean-track{background:linear-gradient(to top,rgba(255,255,255,.025),transparent)!important;border-bottom-color:rgba(255,255,255,.10)!important}
#page-admin-gestion-nf .gnf-bar-clean-track i{box-shadow:0 8px 26px rgba(255,212,0,.12),inset 0 1px 0 rgba(255,255,255,.30)!important}
#page-admin-gestion-nf .gnf-nav-tabs{gap:7px;margin-top:18px}
#page-admin-gestion-nf .gnf-nav-tab{
border-radius:999px!important;padding:9px 15px!important;background:rgba(255,255,255,.035)!important;
border:1px solid rgba(255,255,255,.08)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:.18s ease;
}
#page-admin-gestion-nf .gnf-nav-tab:hover{background:rgba(255,255,255,.065)!important;border-color:rgba(255,255,255,.15)!important}
#page-admin-gestion-nf .gnf-nav-tab.active{color:#111!important;background:linear-gradient(180deg,#ffe34e,#ffd400)!important;border-color:rgba(255,224,68,.9)!important;box-shadow:0 7px 22px rgba(255,212,0,.12),inset 0 1px 0 rgba(255,255,255,.55)}
#page-admin-gestion-nf .gnf-tabla-wrap{border-radius:20px;filter:drop-shadow(0 18px 38px rgba(0,0,0,.16))}
#page-admin-gestion-nf .gnf-tabla{
background:rgba(20,20,22,.48)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:18px!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035);backdrop-filter:blur(20px) saturate(135%);-webkit-backdrop-filter:blur(20px) saturate(135%);
}
#page-admin-gestion-nf .gnf-tabla thead th{background:rgba(31,31,34,.82)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-color:rgba(255,255,255,.08)!important}
#page-admin-gestion-nf .gnf-tabla tbody td{border-color:rgba(255,255,255,.065)!important}
#page-admin-gestion-nf .gnf-tabla tbody tr:not(.gnf-fila-otro):hover td{background:rgba(255,255,255,.045)!important}
#page-admin-gestion-nf .gnf-fila-otro td{background:rgba(255,212,0,.035)!important}
#page-admin-gestion-nf .gnf-fila-otro:hover td{background:rgba(255,212,0,.065)!important}
#page-admin-gestion-nf .gnf-celda-estado,
#page-admin-gestion-nf .gnf-tabla button:not(.gnf-otro-eliminar){box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 5px 13px rgba(0,0,0,.11)}
#page-admin-gestion-nf .gnf-bd-fila,
#page-admin-gestion-nf #gnf-interesados-wrap .workday-item-card{
background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018))!important;
border:1px solid rgba(255,255,255,.09)!important;border-radius:16px!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
/* Modales Natural Fitness: cristal profundo, sin alterar estructura/controles */
.gnf-ficha-overlay,.gnf-pausas-overlay,.gnf-celda-backdrop{background:rgba(3,3,5,.66)!important;backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%)}
.gnf-ficha-card,.gnf-pausas-card,#gnf-celda-form.gnf-celda-modal{
background:linear-gradient(145deg,rgba(36,36,39,.82),rgba(17,17,19,.76))!important;
border:1px solid rgba(255,255,255,.14)!important;border-radius:24px!important;
box-shadow:0 32px 100px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.09)!important;
backdrop-filter:blur(34px) saturate(155%);-webkit-backdrop-filter:blur(34px) saturate(155%);
}
.gnf-ficha-head{background:linear-gradient(to bottom,rgba(28,28,31,.97) 70%,rgba(28,28,31,.76))!important;border-bottom-color:rgba(255,255,255,.09)!important}
.gnf-ficha-actions{background:linear-gradient(to top,rgba(24,24,27,.98) 72%,rgba(24,24,27,.70))!important}
.gnf-ficha-x,.gnf-pausas-head button{background:rgba(255,255,255,.095)!important;border:1px solid rgba(255,255,255,.08)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.gnf-ficha-campo input,.gnf-ficha-campo textarea,.gnf-ficha-campo select{
background:rgba(0,0,0,.24)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.gnf-ficha-campo input:focus,.gnf-ficha-campo textarea:focus,.gnf-ficha-campo select:focus{border-color:rgba(255,212,0,.72)!important;box-shadow:0 0 0 3px rgba(255,212,0,.07)!important;outline:none!important}
@media(max-width:760px){
#page-admin-gestion-nf .gnf-resumen-card,#page-admin-gestion-nf #gnf-grafica-anual{border-radius:18px!important}
#page-admin-gestion-nf .gnf-tabla-wrap{border-radius:16px}
}
/* ============================================================
v98.1 — LIQUID GLASS OPTIMIZADO
SOLO RENDIMIENTO VISUAL: reduce blur/filtros en superficies grandes.
No modifica HTML, JS, datos ni comportamiento.
============================================================ */
/* Superficies grandes: apariencia glass simulada sin backdrop-filter */
#page-admin-gestion-nf .gnf-resumen-card,
#page-admin-gestion-nf #gnf-grafica-anual{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
background:linear-gradient(145deg,rgba(31,31,34,.88),rgba(18,18,20,.82))!important;
box-shadow:0 16px 44px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.055)!important;
}
#page-admin-gestion-nf .gnf-tabla-wrap{
filter:none!important;
}
#page-admin-gestion-nf .gnf-tabla{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
background:rgba(20,20,22,.94)!important;
}
#page-admin-gestion-nf .gnf-tabla thead th{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
background:rgba(31,31,34,.97)!important;
}
#page-admin-gestion-nf .gnf-bd-fila,
#page-admin-gestion-nf #gnf-interesados-wrap .workday-item-card{
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
background:linear-gradient(145deg,rgba(31,31,34,.90),rgba(21,21,23,.88))!important;
}
/* Controles pequeños: conservan cristal, con blur más ligero */
#page-admin-gestion-nf .gnf-anio-nav .btn-secondary{
backdrop-filter:blur(8px) saturate(125%)!important;
-webkit-backdrop-filter:blur(8px) saturate(125%)!important;
}
#page-admin-gestion-nf .gnf-resumen-mes-picker .input,
#page-admin-gestion-nf .gnf-buscador-wrap .input,
#page-admin-gestion-nf .gnf-stats-kpis>div,
#page-admin-gestion-nf .gnf-years-clean>button,
#page-admin-gestion-nf .gnf-nav-tab{
backdrop-filter:blur(6px)!important;
-webkit-backdrop-filter:blur(6px)!important;
}
/* Modales: mantienen efecto premium pero reducen recomposición */
.gnf-ficha-overlay,.gnf-pausas-overlay,.gnf-celda-backdrop{
backdrop-filter:blur(6px)!important;
-webkit-backdrop-filter:blur(6px)!important;
}
.gnf-ficha-card,.gnf-pausas-card,#gnf-celda-form.gnf-celda-modal{
backdrop-filter:blur(14px) saturate(125%)!important;
-webkit-backdrop-filter:blur(14px) saturate(125%)!important;
}
/* ============================================================
NF24 v99 — Ficha Natural Fitness compacta + modal cuota móvil
SOLO PRESENTACIÓN / RESPONSIVE. Sin cambios en lógica económica.
============================================================ */
#gnf-ficha-modal .gnf-ficha-card{
width:min(900px,95vw);
max-height:88vh;
padding:16px 18px;
border-radius:18px;
}
#gnf-ficha-modal .gnf-ficha-head{
padding-bottom:10px;
margin-bottom:12px;
align-items:center;
}
#gnf-ficha-modal .gnf-ficha-head h2{font-size:24px;margin-bottom:2px}
#gnf-ficha-modal .gnf-ficha-head p{font-size:12px}
#gnf-ficha-modal .gnf-ficha-x{width:36px;height:36px;font-size:22px}
#gnf-ficha-modal .gnf-ficha-grid{gap:9px 11px}
#gnf-ficha-modal .gnf-ficha-campo{gap:4px;font-size:11px}
#gnf-ficha-modal .gnf-ficha-campo input,
#gnf-ficha-modal .gnf-ficha-campo textarea{padding:8px 10px;border-radius:9px;min-height:36px}
#gnf-ficha-modal .gnf-ficha-campo textarea{min-height:52px;resize:vertical}
#gnf-ficha-modal .gnf-ficha-grid + div{margin:10px 0!important;padding:10px 12px!important}
#gnf-ficha-modal .gnf-ficha-actions{gap:7px;margin-top:10px;align-items:stretch}
#gnf-ficha-modal .gnf-ficha-actions .btn-secondary,
#gnf-ficha-modal .gnf-ficha-actions .btn-primary{min-height:40px;padding:8px 12px}
@media(max-width:760px){
/* En iOS el blur del backdrop podía quedar por encima visualmente del editor. */
.gnf-celda-backdrop{
z-index:9998!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
background:rgba(0,0,0,.78)!important;
}
#gnf-celda-form.gnf-celda-modal{
z-index:2147483646!important;
left:10px!important;
right:10px!important;
bottom:10px!important;
top:auto!important;
transform:none!important;
width:auto!important;
max-width:none!important;
max-height:calc(100dvh - 20px)!important;
overflow-y:auto!important;
overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
padding:16px!important;
border-radius:20px!important;
backdrop-filter:none!important;
-webkit-backdrop-filter:none!important;
background:rgba(25,25,27,.98)!important;
}
#gnf-ficha-modal.gnf-ficha-overlay{padding:8px;align-items:flex-end}
#gnf-ficha-modal .gnf-ficha-card{width:100%;max-height:calc(100dvh - 16px);padding:14px;border-radius:20px}
#gnf-ficha-modal .gnf-ficha-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#gnf-ficha-modal .gnf-ficha-ancho{grid-column:1/-1}
#gnf-ficha-modal .gnf-ficha-head h2{font-size:20px}
#gnf-ficha-modal .gnf-ficha-head p{font-size:11px}
#gnf-ficha-modal .gnf-ficha-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
#gnf-ficha-modal .gnf-ficha-actions #gnf-ficha-guardar{grid-column:1/-1}
#gnf-ficha-modal .gnf-ficha-actions #gnf-ficha-eliminar{margin-right:0!important}
}
@media(max-width:430px){
#gnf-ficha-modal .gnf-ficha-grid{grid-template-columns:1fr 1fr}
#gnf-ficha-modal .gnf-ficha-campo{font-size:10px}
#gnf-ficha-modal .gnf-ficha-campo input{font-size:12px}
}
/* Modal cuota: por encima del backdrop y navegación al trasladarse a body. */
body > #gnf-celda-backdrop.gnf-celda-backdrop{z-index:2147483000!important;}
body > #gnf-celda-form.gnf-celda-modal{z-index:2147483001!important;isolation:isolate;color:#f5f5f5!important;opacity:1!important;filter:none!important;}
body > #gnf-celda-form.gnf-celda-modal label,
body > #gnf-celda-form.gnf-celda-modal p,
body > #gnf-celda-form.gnf-celda-modal h3,
body > #gnf-celda-form.gnf-celda-modal h4{color:#f5f5f5!important;}
@media(max-width:760px){
body > #gnf-celda-form.gnf-celda-modal{top:10px!important;bottom:10px!important;left:10px!important;right:10px!important;max-height:none!important;height:auto!important;overflow-y:auto!important;box-sizing:border-box!important;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))!important;}
}
/* ============================================================
NF24 — Pulido visual Gestión Natural Fitness (contraste + tarjetas
compactas Base de Datos/Interesados + modal Pausa/Ausentes compacto)
SOLO PRESENTACIÓN. Todo el bloque queda deliberadamente acotado a
IDs/clases exclusivos de Gestión Natural Fitness — no se toca
ninguna regla global (.input, .btn-primary, .field, etc.) ni
ninguna otra pantalla de la app. No cambia consultas, permisos,
lógica de negocio ni el comportamiento de ningún botón.
============================================================ */
/* 1) Contraste en modo oscuro — los dos buscadores (Plazas y Base de
Datos) y el selector de mes del resumen usan class="input" sin
envolver en .field, así que no heredaban ningún color de texto
explícito y el navegador aplicaba negro por defecto sobre un fondo
oscuro/semitransparente: prácticamente ilegible. */
#page-admin-gestion-nf .gnf-buscador-wrap .input,
#page-admin-gestion-nf .gnf-resumen-mes-picker .input {
color: #fff !important;
}
#page-admin-gestion-nf .gnf-buscador-wrap .input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
#page-admin-gestion-nf .gnf-resumen-mes-picker .input option {
background: #171717;
color: #fff;
}
/* 2) Base de Datos / Interesados — la causa de la altura excesiva era
que "Reactivar"/"Dar de alta" son .btn-primary, y esa clase global
trae width:100%, así que siempre rompían a su propia línea entera
dentro de la fila. Aquí se anula ESE width SOLO dentro de estas dos
listas — .btn-primary en el resto de la app no se toca. */
#gnf-bd-wrap .btn-primary,
#gnf-interesados-wrap .btn-primary {
width: auto;
margin-top: 0;
}
#gnf-bd-wrap .gnf-bd-fila {
padding: 9px 12px !important;
gap: 9px 12px;
}
#gnf-bd-wrap .gnf-bd-info {
min-width: 200px;
}
#gnf-interesados-wrap .workday-item-card {
padding: 9px 12px !important;
}
#gnf-bd-wrap .gnf-bd-actions .btn-secondary,
#gnf-bd-wrap .gnf-bd-actions .btn-primary,
#gnf-interesados-wrap .btn-secondary,
#gnf-interesados-wrap .btn-primary {
padding: 6px 10px;
font-size: 12.5px;
}
@media (max-width: 640px) {
/* En móvil el nombre nunca debe cortarse: pasa a ocupar toda la
fila y las acciones se colocan debajo, en vez de intentar
comprimirlo junto a los botones. */
#gnf-bd-wrap .gnf-bd-fila,
#gnf-interesados-wrap .workday-item-card {
flex-direction: column;
align-items: stretch !important;
}
#gnf-bd-wrap .gnf-bd-info {
min-width: 0;
}
}
/* 3) Modal "Pausa / Ausentes" compacto, con cabecera y botón de cierre
siempre visibles. Antes el overflow/scroll estaba en TODA la
tarjeta (cabecera incluida), así que al bajar por la lista el
título y la "×" podían desaparecer de la vista. Ahora el scroll
queda únicamente dentro de la lista de personas. */
.gnf-pausas-card {
display: flex;
flex-direction: column;
overflow: hidden;
}
.gnf-pausas-head {
position: sticky;
top: 0;
background: #151515;
flex-shrink: 0;
padding-bottom: 8px;
margin-bottom: 4px;
z-index: 2;
}
.gnf-pausas-lista {
overflow-y: auto;
flex: 1;
min-height: 0;
}
.gnf-pausa-persona {
padding: 9px 0;
}
.gnf-pausa-persona .btn-secondary {
padding: 6px 10px;
font-size: 12.5px;
flex-shrink: 0;
}
@media (max-width: 480px) {
.gnf-pausa-persona {
flex-wrap: wrap;
row-gap: 6px;
}
}
/* Pulido visual — segunda pasada: aún más compacto en Base de
Datos/Interesados, a petición explícita tras revisar la primera
versión. Mismo alcance (solo estos dos listados, solo
presentación), simplemente se aprietan más los márgenes, la
tipografía y los botones. */
#gnf-bd-wrap .gnf-bd-fila,
#gnf-interesados-wrap .workday-item-card {
padding: 6px 10px !important;
margin-bottom: 5px !important;
}
#gnf-bd-wrap .gnf-cliente-link {
font-size: 13px;
}
#gnf-bd-wrap .gnf-bd-meta {
font-size: 11px;
margin-top: 1px;
}
#gnf-interesados-wrap .workday-item-card strong {
font-size: 13px;
}
#gnf-interesados-wrap .workday-item-card > div:first-child > div {
font-size: 11px;
margin-top: 1px !important;
}
#gnf-bd-wrap .gnf-bd-actions,
#gnf-interesados-wrap .workday-item-card > div:last-child {
gap: 5px !important;
}
#gnf-bd-wrap .gnf-bd-actions .btn-secondary,
#gnf-bd-wrap .gnf-bd-actions .btn-primary,
#gnf-interesados-wrap .btn-secondary,
#gnf-interesados-wrap .btn-primary {
padding: 4px 8px !important;
font-size: 11px !important;
border-radius: 8px;
}
/* ============================================================
NF24 — Visual System V3: LIQUID GLASS (aplicación)
Extiende (no sustituye) el Visual System V2 ya existente. Cambios
SOLO de presentación: ningún selector aquí toca id/clase generada
por lógica de negocio, ningún atributo funcional, ninguna consulta.
Principio de rendimiento: el cristal (backdrop-filter) se aplica
SOLO a superficies flotantes/overlay que aparecen una vez por
pantalla (nav, modales, botones flotantes, bandas de resumen) —
nunca a filas repetidas de listas/tablas/históricos.
============================================================ */
/* Utilidad reutilizable + fallback para navegadores sin soporte de
backdrop-filter (degrada a superficie sólida opaca, nunca a
transparente-sin-blur, para que el contraste no se resienta). */
.lg-glass {
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
box-shadow: var(--glass-shadow);
backdrop-filter: blur(var(--glass-blur)) saturate(150%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.lg-glass { background: var(--card-white); }
}
/* ---- 1) Dock de navegación inferior — cristal flotante ----
Solo se toca el ::before decorativo (el fondo visual de la isla);
los .nav-btn reales no cambian de posición/tamaño/hit-area. */
#bottom-nav::before {
background: var(--glass-bg-strong);
border-color: var(--glass-border);
backdrop-filter: blur(var(--glass-blur)) saturate(160%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}
[data-theme="dark"] #bottom-nav::before {
background: var(--glass-bg-strong);
border-color: var(--glass-border);
backdrop-filter: blur(var(--glass-blur)) saturate(160%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
#bottom-nav::before { background: var(--card-white); }
[data-theme="dark"] #bottom-nav::before { background: var(--surface-3); }
}
/* ---- 2) Menú "Más" (nav-more-menu) — mismo cristal que el dock ---- */
.nav-more-menu {
background: var(--glass-bg-strong);
border-color: var(--glass-border);
backdrop-filter: blur(var(--glass-blur)) saturate(150%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
[data-theme="dark"] .nav-more-menu {
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
backdrop-filter: blur(var(--glass-blur)) saturate(150%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.nav-more-menu { background: var(--card-white); }
[data-theme="dark"] .nav-more-menu { background: var(--surface-2); }
}
/* ---- 3) Botones flotantes redondos (tema/perfil) — chip de cristal ---- */
.theme-toggle, .profile-toggle {
background: var(--glass-bg-strong);
border: 1px solid var(--glass-border);
backdrop-filter: blur(var(--glass-blur)) saturate(150%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.theme-toggle, .profile-toggle { background: var(--card-white); }
}
/* ---- 4) Modal genérico de la app (.modal-box) — cristal ----
Usado en avisos/confirmaciones puntuales por toda la app (no es
una lista repetida, aparece de una en una), buen candidato a
cristal con impacto visual alto y coste bajo. */
.modal-box {
background: var(--glass-bg-strong);
border-color: var(--glass-border);
box-shadow: var(--glass-shadow);
backdrop-filter: blur(var(--glass-blur)) saturate(150%);
-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.modal-box { background: var(--card-white); }
}
/* ---- 5) Banda de indicadores (.admin-kpi-banda) — cristal sutil ----
Aparece 1-2 veces por pantalla (resúmenes), nunca como fila
repetida, así que el coste de blur es asumible. La versión ya
existente y más específica dentro de Gestión Natural Fitness
(#page-admin-gestion-nf .admin-kpi-banda) sigue ganando ahí por
especificidad — esto solo afecta a las demás pantallas que usan
la misma banda. */
.admin-kpi-banda {
background: var(--glass-bg);
border: 1px solid var(--glass-border);
backdrop-filter: blur(calc(var(--glass-blur) * 0.6)) saturate(140%);
-webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.6)) saturate(140%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.admin-kpi-banda { background: var(--surface-1); }
}
/* ---- 6) Tarjetas repetidas (.tracker-card, .workday-item-card) ----
NUNCA cristal aquí (aparecen decenas de veces por pantalla) — solo
un toque de profundidad barato: un reflejo superior sutil vía
box-shadow inset, que no añade ningún coste de renderizado real. */
.tracker-card, .workday-item-card {
box-shadow: var(--shadow-sm), inset 0 1px 0 var(--surface-highlight);
transition: box-shadow 0.15s ease, transform 0.1s ease;
}
/* ---- 7) Botones — reflejo superior barato (gradiente, sin blur) ----
.btn-primary/.btn-secondary se usan 200+ veces en total: cualquier
backdrop-filter aquí sería inasumible. En su lugar, un gradiente
superpuesto sobre el color ya existente (mismo color base, mismo
texto, mismo contraste) da la sensación de superficie pulida sin
coste de blur. */
.btn-primary {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 55%);
background-color: var(--gold);
background-blend-mode: overlay;
}
.btn-secondary {
background-image: linear-gradient(180deg, var(--surface-highlight) 0%, rgba(255, 255, 255, 0) 60%);
background-color: var(--surface-3);
}
/* ============================================================
NF24FIT · LIQUID GLASS GLOBAL V2 — presentación únicamente
Extensión de V3: profundidad consistente sin blur en listas.
============================================================ */
:root {
--lg-v2-edge: rgba(255,255,255,.72);
--lg-v2-glow: rgba(255,215,0,.075);
--lg-v2-inset: rgba(255,255,255,.8);
}
[data-theme="dark"] {
--lg-v2-edge: rgba(255,255,255,.12);
--lg-v2-glow: rgba(255,215,0,.065);
--lg-v2-inset: rgba(255,255,255,.075);
}
/* Unificar la profundidad de las superficies sin alterar su fondo
ni imponer transparencia sobre formularios o tablas. */
.page-header, .admin-kpi-banda, .modal-box, .nav-more-menu {
box-shadow: var(--shadow-md), inset 0 1px 0 var(--lg-v2-inset);
}
/* Los controles conservan sus colores, estados y tamaños originales. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
box-shadow: inset 0 1px 0 var(--surface-highlight);
transition: border-color .16s ease, box-shadow .16s ease;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus-visible,
select:focus-visible, textarea:focus-visible {
box-shadow: 0 0 0 3px var(--lg-v2-glow), inset 0 1px 0 var(--surface-highlight);
}
/* Micro-reflejo barato: no se aplica backdrop-filter a cada botón. */
.btn-primary, .btn-secondary {
box-shadow: inset 0 1px 0 var(--lg-v2-inset), var(--shadow-sm);
}
/* Respeto a quienes prefieren reducir las animaciones. */
@media (prefers-reduced-motion: reduce) {
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea { transition: none; }
}
/* NF24FIT: navegación guiada sobre el registro de series existente */
.nf-guia-iniciar{display:block;width:100%;margin:8px 0 16px;padding:14px;border:1px solid rgba(126,200,173,.65);border-radius:14px;background:rgba(34,145,111,.18);color:inherit;font-weight:700;cursor:pointer}
.nf-guia-entreno{margin:12px 0 16px;padding:14px;border:1px solid rgba(126,200,173,.5);border-radius:16px;background:rgba(60,145,123,.12)}
.nf-guia-entreno p{font-size:13px;line-height:1.45;margin:8px 0 12px;opacity:.85}
.nf-guia-botones{display:flex;flex-wrap:wrap;gap:8px}
.nf-guia-botones button{flex:1;min-width:135px;padding:11px;border-radius:11px;border:1px solid rgba(126,200,173,.55);background:rgba(60,145,123,.18);color:inherit;font-weight:600;cursor:pointer}
.nf-guia-botones button:disabled{opacity:.35;cursor:default}
/* NF24FIT — Entrenamiento guiado V2: progreso y registro simplificado */
.nf-guia-progreso{display:flex;align-items:center;gap:10px;margin:10px 0 2px}
.nf-guia-progreso-barra{flex:1;height:7px;border-radius:999px;background:rgba(255,255,255,.10);overflow:hidden}
.nf-guia-progreso-barra span{display:block;height:100%;border-radius:inherit;background:#ffd400;transition:width .2s ease}
.nf-guia-progreso small{white-space:nowrap;font-size:12px;opacity:.8}
.entreno-hoy-row{grid-template-columns:42px minmax(0,1fr) minmax(0,1fr) auto !important}
@media(max-width:520px){.entreno-hoy-row{grid-template-columns:42px minmax(0,1fr) minmax(0,1fr) auto !important}}
/* NF24FIT Seguimiento V2 — Mi Transformación */
#page-transformacion #transformacion-hitos{display:grid;gap:14px;margin-top:18px}
#page-transformacion .hito-card{position:relative;display:flex;align-items:center;gap:16px;padding:18px;border:1px solid rgba(255,215,0,.20);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018));box-shadow:0 12px 32px rgba(0,0,0,.18);overflow:hidden}
#page-transformacion .hito-card::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:4px;background:var(--gold,#ffd700)}
#page-transformacion .hito-card.pendiente{opacity:.58;border-color:rgba(255,255,255,.08)}
#page-transformacion .hito-card.pendiente::before{background:rgba(255,255,255,.18)}
#page-transformacion .hito-card img{width:76px;height:92px;object-fit:cover;border-radius:16px;background:#111;border:1px solid rgba(255,255,255,.08);flex:0 0 auto}
#page-transformacion .hito-info{min-width:0;flex:1}
#page-transformacion .hito-titulo{font-size:20px;font-weight:800;color:var(--gold,#ffd700);margin-bottom:4px}
#page-transformacion .hito-fecha{font-size:13px;color:var(--text-muted,#999);margin-bottom:9px}
#page-transformacion .hito-datos{font-size:14px;line-height:1.55;color:var(--text,#fff)}
#page-transformacion .hito-badge{display:inline-flex;margin-top:10px;padding:6px 10px;border-radius:999px;background:rgba(255,215,0,.10);color:var(--gold,#ffd700);font-size:11px;font-weight:800}
#page-transformacion .transformacion-resumen{margin:14px 0 4px;padding:18px;border-radius:22px;background:linear-gradient(135deg,rgba(255,215,0,.12),rgba(255,255,255,.035));border:1px solid rgba(255,215,0,.25)}
#page-transformacion .transformacion-resumen-titulo{font-weight:800;font-size:18px;margin-bottom:12px}
#page-transformacion .transformacion-resumen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#page-transformacion .transformacion-resumen-item{padding:12px;border-radius:15px;background:rgba(0,0,0,.20);border:1px solid rgba(255,255,255,.06)}
#page-transformacion .transformacion-resumen-item small{display:block;color:var(--text-muted,#999);margin-bottom:4px}
#page-transformacion .transformacion-resumen-item strong{font-size:18px}
@media(max-width:430px){#page-transformacion .hito-card{padding:15px;gap:13px}#page-transformacion .hito-card img{width:66px;height:82px}#page-transformacion .hito-titulo{font-size:18px}}
/* ============================================================
NF Assistant V1 — estado visible en Mensajes / chat
============================================================ */
.nf-assistant-panel{margin:12px 0 14px;padding:14px;border:1px solid rgba(255,213,0,.32);border-radius:16px;background:linear-gradient(135deg,rgba(255,213,0,.075),rgba(255,255,255,.025))}
.nf-assistant-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.nf-assistant-panel-head>div{display:flex;flex-direction:column;gap:3px}.nf-assistant-panel-head strong{font-size:14px}.nf-assistant-panel-head span{font-size:10.5px;color:var(--text-muted)}
#nf-assistant-global-toggle{border:1px solid rgba(255,213,0,.42);background:var(--gold);color:#111;border-radius:999px;padding:7px 12px;font-size:11px;font-weight:900;cursor:pointer}
#nf-assistant-global-toggle.paused{background:transparent;color:var(--text-muted);border-color:var(--border-soft)}
.nf-assistant-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:12px}.nf-assistant-stats>div{border:1px solid var(--border-soft);border-radius:12px;padding:9px;background:rgba(0,0,0,.14)}
.nf-assistant-stats strong{display:block;color:var(--gold);font-size:18px}.nf-assistant-stats span{display:block;color:var(--text-muted);font-size:9.5px;font-weight:700;margin-top:3px}
.nf-assistant-panel p{font-size:10.5px;color:var(--text-muted);line-height:1.45;margin:10px 0 0}
.nf-assistant-row-status{flex-shrink:0;border-radius:999px;padding:5px 7px;font-size:9px;font-weight:900;white-space:nowrap;border:1px solid var(--border-soft)}
.nf-assistant-row-status.auto{color:#75e7a5;border-color:rgba(55,200,115,.35);background:rgba(55,200,115,.09)}
.nf-assistant-row-status.revisar{color:var(--gold);border-color:rgba(255,213,0,.35);background:rgba(255,213,0,.08)}
.nf-assistant-row-status.necesita_paco{color:#ff7474;border-color:rgba(255,80,80,.38);background:rgba(255,80,80,.08)}
.nf-assistant-row-status.manual{color:var(--text-muted)}
.nf-assistant-chat-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-bottom:1px solid var(--border-soft);background:rgba(255,213,0,.055)}
.nf-assistant-chat-bar>div{display:flex;flex-direction:column;gap:2px;min-width:0}.nf-assistant-chat-bar strong{font-size:11px;color:var(--gold)}.nf-assistant-chat-bar span{font-size:9.5px;color:var(--text-muted)}
#nf-assistant-chat-action{border:1px solid rgba(255,213,0,.35);background:transparent;color:var(--gold);border-radius:999px;padding:6px 9px;font-size:9.5px;font-weight:900;white-space:nowrap;cursor:pointer}
.chat-bubble .nf-assistant-msg-label{display:block;font-size:9px;font-weight:900;color:var(--gold);margin-bottom:4px;letter-spacing:.01em}
@media(max-width:520px){.nf-assistant-row-status{font-size:8px;padding:4px 6px}.nf-assistant-panel{padding:12px}.nf-assistant-stats strong{font-size:16px}}
/* ============================================================
Herbalife — buscador de productos (v Packs)
============================================================ */
.herbalife-search-wrap{position:relative;margin:16px 0 4px;}
.herbalife-product-search{width:100%;box-sizing:border-box;border:1px solid var(--border-soft);background:var(--card-white);color:var(--text-dark);border-radius:16px;padding:14px 44px 14px 44px;font-size:15px;font-weight:600;outline:none;transition:border-color .2s,box-shadow .2s;}
.herbalife-product-search:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,215,0,.10);}
.herbalife-product-search::placeholder{color:var(--text-muted);font-weight:500;}
.herbalife-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--text-muted);pointer-events:none;}
.herbalife-search-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;border-radius:50%;background:var(--surface-3);color:var(--text-muted);font-size:22px;line-height:1;cursor:pointer;}
.herbalife-search-result-block{margin-bottom:12px;}
.herbalife-search-result-cat{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);margin:0 0 6px 6px;}
.herbalife-search-empty{border:1px dashed var(--border-soft);border-radius:16px;padding:22px 16px;text-align:center;color:var(--text-muted);font-size:14px;background:var(--card-white);}
@media(max-width:640px){.herbalife-product-search{font-size:16px;padding-top:13px;padding-bottom:13px;}}
/* v11.28 — Recomendador de packs Herbalife */
.herbalife-pack-result-card{overflow:hidden;border:1px solid rgba(255,215,0,.25);border-radius:18px;background:var(--surface-2);margin:8px 0 12px;box-shadow:var(--shadow-sm)}
.herbalife-pack-result-media{background:#10150f;min-height:170px;display:flex;align-items:center;justify-content:center;font-size:36px}
.herbalife-pack-result-media img{width:100%;height:210px;object-fit:cover;display:block}
.herbalife-pack-result-body{padding:15px}
.herbalife-pack-result-kicker{font-size:9.5px;font-weight:900;letter-spacing:.8px;color:var(--gold)}
.herbalife-pack-result-body h3{font-size:20px;line-height:1.2;color:var(--text-dark);margin:5px 0 8px}
.herbalife-pack-result-body p{font-size:12.5px;line-height:1.5;color:var(--text-muted);margin:0 0 10px}
.herbalife-pack-result-incluye{font-size:11.5px;line-height:1.45;color:var(--text-dark);background:var(--surface-1);border:1px solid var(--border-soft);border-radius:11px;padding:9px 10px;margin-bottom:12px}
.herbalife-pack-add-btn{width:100%;margin:0}
.herbalife-pack-alt-btn{width:100%;border:1px solid var(--border-soft);background:transparent;border-radius:13px;padding:11px 12px;text-align:left;color:var(--text-dark);font-family:inherit;cursor:pointer;margin:0 0 8px}
.herbalife-pack-alt-btn span{display:block;font-size:10px;color:var(--text-muted);margin-bottom:3px}
.herbalife-pack-alt-btn strong{display:block;font-size:12.5px;color:var(--gold)}
@media(max-width:520px){.herbalife-pack-result-media img{height:185px}.herbalife-pack-result-body h3{font-size:18px}}
/* Paquete 8, punto 1/4 -- Ideas y Recordatorios: estado visual cuando
una idea esta marcada como completada (title semi-transparente,
igual de discreto que el resto de la app; nunca oculta la tarjeta). */
.idea-card--completada .workday-item-title { opacity: .55; text-decoration: line-through; }
/* Paquete 8, punto 7 -- iconos de redes sociales en el perfil deportivo.
Solo se pintan los que el usuario tiene configurados; mismo tamano
tactil (44px) que el resto de botones de icono de la app. */
.pd-redes-row { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.pd-red-icon {
display: flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 50%;
background: var(--surface-2); border: 1px solid var(--border-soft);
font-size: 18px; text-decoration: none; cursor: pointer;
}
/* Ajustes finales Paquete 8 -- galeria de fotos del perfil deportivo
(ahora hasta 30, independiente de la foto de perfil y de las fotos
de progreso corporal). Cuadricula tipo galeria social, 3 columnas en
movil (antes era un carrusel horizontal). */
.pd-galeria-carrusel {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
padding: 4px 0 10px;
}
.pd-galeria-foto {
width: 100%; aspect-ratio: 1 / 1; border-radius: 10px;
object-fit: cover; cursor: pointer; background: var(--surface-2);
}
@media (min-width: 520px) {
.pd-galeria-carrusel { grid-template-columns: repeat(4, 1fr); gap: 8px; }
}
/* Ajustes finales Paquete 8 -- Bienestar: temporizador con mas
protagonismo (numero mas grande y centrado, frase de guia debajo),
controles mas grandes y tactiles en movil. */
.bienestar-timer-vista { text-align: center; padding-top: 6px; }
.bienestar-timer-numero {
position: relative; isolation: isolate;
font-size: 84px; font-weight: 800; color: var(--gold); letter-spacing: 1px;
margin: 10px 0 4px; line-height: 1;
}
/* ---- Onda/resplandor zen detrás del número -- puro CSS (radial-gradient
+ una animación ligera de transform/opacity, sin JS ni imágenes), así
que no añade coste de rendimiento real. isolation:isolate mantiene el
resplandor (z-index:-1) contenido dentro de este elemento, sin que se
escape por detrás de otras tarjetas. ---- */
.bienestar-timer-numero::before {
content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -50%);
width: 230px; height: 230px; max-width: 90vw; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 215, 0, 0.32) 0%, rgba(255, 215, 0, 0) 70%);
pointer-events: none;
animation: bienestarTimerPulse 3.6s ease-in-out infinite;
}
@keyframes bienestarTimerPulse {
0%, 100% { transform: translate(-50%, -50%) scale(0.92); opacity: 0.7; }
50% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.bienestar-timer-numero::before { animation: none; }
}
.bienestar-timer-frase {
font-size: 14.5px; color: var(--text-muted); min-height: 20px;
margin: 0 0 20px; transition: opacity .4s ease;
}
.bienestar-timer-control-btn { padding: 15px 22px; font-size: 15.5px; border-radius: 16px; min-width: 130px; }
@media (max-width: 400px) { .bienestar-timer-numero { font-size: 68px; } }
/* ================================================================
Ajustes finales Paquete 8 -- Cardio/Kilometros: segunda pasada
visual (solo estilos, la logica de GPS/manual no se toca). Metricas
mas grandes y legibles, jerarquia mas clara (distancia como
protagonista), controles mas grandes en movil, historial mas claro.
Mismas clases de siempre (.km-live-stats, .km-row...), asi que esto
mejora a la vez la pantalla en vivo Y el resumen final, que ya
reutiliza las mismas clases.
================================================================ */
.km-live-stats {
background: var(--surface-2, var(--bg)); border-radius: 16px; padding: 16px 8px;
border: 1px solid var(--border-soft);
}
.km-live-stat { background: transparent; padding: 6px 4px; }
.km-live-stat .val { font-size: 30px; font-weight: 800; letter-spacing: .2px; }
.km-live-stat .lbl { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; margin-top: 4px; }
/* La primera métrica (distancia) es la protagonista, un poco más
grande que tiempo/ritmo -- misma jerarquía en vivo y en el resumen. */
.km-live-stat:first-child .val { font-size: 38px; color: var(--gold); }
.km-mode-tab { padding: 13px 14px; font-size: 14px; border-radius: 13px; }
.km-gps-actions button, #km-add-btn, #km-gps-start-btn { padding: 16px; font-size: 15.5px; border-radius: 16px; font-weight: 800; }
.km-gps-actions { gap: 12px; }
.km-map { height: 240px; }
/* Historial más claro: se mantiene la tarjeta por fila (mismo lenguaje
visual que el resto de la app), solo se refuerza la jerarquía --
tipo de actividad más legible arriba, distancia como dato principal
más grande a la derecha. */
.km-row { padding: 13px 15px; gap: 10px; }
.km-row .km-tipo-lbl { font-size: 13.5px; }
.km-row .km-dist { font-size: 17px; }
#km-resumen-modal .modal-box::before {
content: "🎉"; display: block; font-size: 38px; margin-bottom: 4px;
}
/* Ajustes finales Paquete 8 -- feedback visual claro cuando un +/- de
"Hacer crecer tu negocio" está deshabilitado (límite alcanzado o
guardado en curso), para que nunca parezca que "no responde". */
.workday-action:disabled { opacity: .35; cursor: default; }
/* ================================================================
Paquete final -- Cardio/Kilometros: TERCERA pasada visual (A5).
Solo estilos, cero cambios de logica GPS/manual. Objetivo: que la
pantalla en vivo se sienta como un tracker deportivo (tipo Strava,
sin copiar su interfaz), no como un formulario -- mapa protagonista
arriba del todo, distancia como unico gran numero, controles aun
mas grandes y diferenciados.
================================================================ */
/* Reordena SOLO visualmente (flex order) los hijos ya existentes de la
vista en vivo: mapa primero (protagonista), luego metricas, estado y
controles -- el HTML no cambia de orden, por lo que la inicializacion
del mapa (que busca #km-live-map por id) no se ve afectada. */
#km-gps-running { display: flex; flex-direction: column; gap: 14px; }
#km-gps-running .km-map { order: -2; height: 260px; }
#km-gps-running .km-live-stats { order: -1; }
@media (min-width: 420px) { #km-gps-running .km-map { height: 300px; } }
.km-live-stat:first-child .val { font-size: 46px; }
.km-live-stat .val { font-size: 32px; }
.km-live-stats { padding: 18px 8px 16px; }
/* Boton de finalizar con acento propio -- "stop" siempre reconocible a
simple vista, distinto del resto de botones primarios de la app. */
#km-gps-parar-btn { box-shadow: 0 0 0 2px rgba(255, 90, 90, .35) inset; }
/* Resumen final -- metricas del resumen (misma tarjeta .km-live-stats
reutilizada) con un poco mas de aire, y titulo del modal mas visible. */
#km-resumen-modal .modal-box h2, #km-resumen-modal .modal-box .section-title {
text-align: center;
}
/* Historial -- separacion mas clara entre actividades consecutivas del
mismo dia, sin abandonar la tarjeta ya establecida en toda la app. */
#km-history .km-row + .km-row { margin-top: 2px; }
/* ================================================================
Paquete final -- B5: tarjetas compactas de "Mis clientes" (Paco y
Coach comparten estas mismas clases). Foto grande a la izquierda,
info a la derecha, mucha menos altura que el formato anterior.
================================================================ */
.cliente-card-compacta {
display: flex; align-items: flex-start; gap: 12px; padding: 12px;
}
.cliente-card-compacta-avatar {
width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
flex: 0 0 auto; background: var(--bg);
}
.cliente-card-compacta-info { flex: 1; min-width: 0; }
.cliente-card-compacta-top {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.cliente-card-compacta-nombre {
font-size: 14.5px; font-weight: 800; color: var(--text-dark);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cliente-card-compacta-badges:empty { display: none; }
.cliente-card-compacta-detalle {
font-size: 12px; color: var(--text-muted); margin-top: 3px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cliente-card-compacta-acciones {
display: flex; gap: 8px; margin-top: 8px;
}
.cliente-card-compacta-acciones .workday-action {
padding: 7px 10px; font-size: 12.5px;
}
/* Responsive: 1 columna en móvil, 2 en pantallas más anchas (tablet /
escritorio) si el ancho disponible lo permite -- listas de "Mis
clientes" de Paco y Coach. */
#paco-clientes-lista, #coach-mis-clientes-lista {
display: grid; grid-template-columns: 1fr; gap: 10px;
}
@media (min-width: 720px) {
#paco-clientes-lista, #coach-mis-clientes-lista { grid-template-columns: 1fr 1fr; }
}
/* ================================================================
Paquete final -- B6: aviso global de nuevos seguidores/solicitudes.
Arriba a la derecha (nunca sobre la barra inferior), discreto, con
contador solo cuando hay algo pendiente.
================================================================ */
.social-aviso-fab {
position: fixed; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 160;
width: 42px; height: 42px; border-radius: 50%; background: var(--surface-2, var(--bg));
color: var(--text-dark); border: 1px solid var(--border-soft); font-size: 19px;
box-shadow: 0 4px 14px rgba(0,0,0,0.25); cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.social-aviso-fab-badge {
position: absolute; top: -3px; right: -3px; background: var(--danger); color: #fff;
font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px;
display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.social-aviso-fila {
display: flex; align-items: center; gap: 10px; padding: 10px 0;
border-bottom: 1px solid var(--border-soft);
}
.social-aviso-fila:last-child { border-bottom: none; }
.social-aviso-fila img {
width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
.social-aviso-fila-nombre { font-size: 14px; font-weight: 700; color: var(--text-dark); flex: 1; min-width: 0; }
.social-aviso-fila-acciones { display: flex; gap: 6px; flex: 0 0 auto; }
/* ================================================================
AJUSTE FINAL -- Workday: bloques plegables (accordion nativo
/). Reutiliza las variables --w-* ya definidas
en .workday-shell para que el bloque se vea parte del mismo
sistema visual (misma superficie, mismo borde, mismo acento).
================================================================ */
.workday-accordion {
border: 1px solid var(--w-border);
border-radius: 16px;
background: var(--w-surface);
margin: 0 0 12px;
overflow: hidden;
}
.workday-accordion:last-child { margin-bottom: 0; }
.workday-accordion.is-empty { display: none; }
.workday-accordion-summary {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 14px 16px; cursor: pointer; list-style: none; user-select: none;
font-size: 14.5px; font-weight: 800; color: var(--w-text);
}
.workday-accordion-summary::-webkit-details-marker { display: none; }
.workday-accordion-summary::marker { content: ""; }
.workday-accordion-summary-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.workday-accordion-chevron {
flex-shrink: 0; color: var(--w-text-muted); display: flex; transition: transform .2s ease;
}
.workday-accordion-chevron svg { width: 17px; height: 17px; }
.workday-accordion[open] > .workday-accordion-summary .workday-accordion-chevron { transform: rotate(90deg); }
.workday-accordion-body {
padding: 2px 14px 14px; border-top: 1px solid var(--w-border); padding-top: 12px;
}
.workday-accordion-body .workday-grid:first-child,
.workday-accordion-body > div:first-child { margin-top: 0; }
/* ================================================================
Ajuste UI premium (mockups) -- Kilometros y Bienestar. Cuarta
pasada visual de Kilometros (las tres anteriores ya dejaron el
modo GPS en vivo casi listo) y primera pasada "zen" de Bienestar.
Solo estilos + los pequenos fragmentos de contenido nuevo que
trajo su HTML/JS (mini indicador semanal, tarjeta descriptiva de
sesion): NINGUNA logica de guardado, GPS, temporizador, sonido o
navegacion se toca aqui.
================================================================ */
/* ---- Kilometros: tarjeta de resumen semanal con jerarquia clara -- */
#page-kilometros #km-goal-card.dash-card {
background: linear-gradient(155deg, var(--surface-2, var(--card-white)) 0%, var(--surface-1, var(--card-white)) 100%);
border-radius: var(--radius-lg, 20px);
padding: 20px;
box-shadow: var(--shadow-md);
cursor: default;
}
#page-kilometros #km-goal-card .dash-card-title { font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; }
#page-kilometros #km-goal-card .dash-card-main { font-size: 27px; font-weight: 800; color: var(--text-dark); margin-top: 2px; }
#page-kilometros #km-goal-card .dash-card-sub { font-size: 12.5px; margin-top: 5px; }
#page-kilometros .km-resumen-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
#page-kilometros .km-resumen-sesiones { text-align: center; flex-shrink: 0; }
#page-kilometros .km-resumen-sesiones-num { font-size: 20px; font-weight: 800; color: var(--gold); line-height: 1; }
#page-kilometros .km-resumen-sesiones-lbl {
font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; margin: 2px 0 8px;
}
#page-kilometros .km-semana-dias { display: flex; gap: 4px; }
#page-kilometros .km-semana-dia {
width: 18px; height: 18px; border-radius: 5px; background: var(--surface-3, var(--input-bg));
color: var(--text-muted); font-size: 9px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
}
#page-kilometros .km-semana-dia.activo { background: var(--gold); color: var(--black); }
/* ---- Kilometros: pestanas GPS/manual como segmented control ---- */
#page-kilometros .km-mode-tabs {
background: var(--surface-1, var(--input-bg)); border: 1px solid var(--border-soft);
border-radius: 16px; padding: 4px;
}
#page-kilometros .km-mode-tab:not(.active) { border: none; background: transparent; color: var(--text-muted); }
#page-kilometros .km-mode-tab.active { background: var(--gold); color: var(--black); border-color: var(--gold); box-shadow: var(--shadow-sm); }
/* ---- Kilometros: selector de periodo Semana | Mes | Año ---- */
.km-periodo-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.km-periodo-tab {
flex: 1; padding: 8px 10px; border-radius: 10px; border: none; background: transparent;
color: var(--text-muted); font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background .15s ease, color .15s ease;
}
.km-periodo-tab.active { background: var(--gold); color: var(--black); }
.km-objetivo-cta-btn {
margin-top: 12px; width: 100%; background: transparent; border: 1px dashed var(--gold);
color: var(--gold); font-weight: 700; font-size: 12.5px; padding: 10px; border-radius: 12px; cursor: pointer;
}
/* ---- Kilometros: tarjeta de actividad unica -- mapa protagonista
siempre visible (o su placeholder), metricas grandes debajo, y una
fila inferior que solo cambia entre "config" y "en marcha" (misma
logica GPS de siempre, solo su composicion visual cambia). ---- */
.km-activity-card { padding: 16px; }
#page-kilometros .km-activity-card .km-live-stats { margin-bottom: 12px; }
.km-activity-map-wrap {
position: relative; width: 100%; height: 220px; border-radius: 14px; overflow: hidden;
background: var(--bg); margin-bottom: 12px;
}
/* Mismo fondo "premium" que el placeholder mientras cargan las teselas
del mapa (antes heredaba var(--bg), un gris/negro plano que se veia
como una caja rota si la red iba lenta) -- puramente cosmetico, no
afecta al mapa real una vez cargado. */
.km-activity-map-wrap .km-map {
height: 100%; margin: 0; border-radius: 0;
background: linear-gradient(155deg, var(--surface-2, var(--card-white)) 0%, var(--surface-1, var(--card-white)) 100%);
}
.km-map-placeholder {
position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 8px; color: var(--text-muted); font-size: 12.5px; text-align: center; padding: 0 20px;
background: linear-gradient(155deg, var(--surface-2, var(--card-white)) 0%, var(--surface-1, var(--card-white)) 100%);
}
.km-map-placeholder-icon { font-size: 26px; }
.km-activity-bottom { margin-top: 2px; }
.km-activity-tipo-label {
display: block; font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px;
margin-bottom: 7px; font-weight: 700;
}
/* ---- Fila Tipo + Empezar -- antes el boton (heredaba un padding
pensado para ir solo en la fila) se comia todo el ancho y el