/* =============================================================================
* FÍSIC v2 — Capa de rediseño (design system "Vital Balance")
* -----------------------------------------------------------------------------
* Basado en el proyecto de diseño "Rediseño FÍSIC móvil.dc.html" (Claude Design).
*
* REGLA DE ORO: todo cuelga de .fv2 y usa prefijo .fv2-
* Nada de esto puede afectar al resto de la aplicación (backoffice, tablas,
* diálogos, calendario...). Si se quita el SI se leia.
*
* :where() aporta especificidad CERO, así que la regla queda en 0,0,1: sigue
* ganando al azul de Bootstrap (misma especificidad, pero este archivo carga
* despues) y pierde contra cualquier clase nuestra, que es lo que se quiere.
*/
:where(.fv2) a {
color: inherit;
text-decoration: none;
}
.fv2 *,
.fv2 *::before,
.fv2 *::after {
box-sizing: border-box;
}
/* La app pinta un fondo distinto en ; lo igualamos sólo en la home v2 */
body.fv2-page,
body.fv2-page #wrapper,
body.fv2-page main#middle {
background: #f9f9ff;
}
/*
* Sticky footer.
* #wrapper no es un contenedor flex en base.tpl, así que el .flex-fill de
* hoy no hace nada y el footer queda flotando a media
* página cuando el contenido es corto. La Home v2 es bastante más compacta
* que el menú anterior (iconos de 58px en vez de imágenes de 100px), así que
* el hueco se nota. Lo convertimos en columna flex — sólo en body.fv2-page,
* para no alterar el layout del resto de la aplicación.
*/
body.fv2-page #wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100dvh; /* evita el salto por la barra de URL en móvil */
}
/*
* ⚠️ NO QUITAR EL !important DE AQUÍ ABAJO.
*
* En base.tpl, #wrapper_content y llevan la clase .flex-fill,
* y los utilities de Bootstrap 5 se declaran con !important:
*
* .flex-fill { flex: 1 1 auto !important; } <- css/fisic-css/core.css:5998
*
* Al convertir #wrapper en columna flex, #wrapper_content (que sólo contiene la
* modal de reserva, oculta) se volvió un item que CRECE y se repartió el espacio
* libre con , empujando la portada hacia abajo: salía una banda vacía de
* ~185px entre la cabecera y el saludo. Sin !important estas dos reglas pierden
* contra .flex-fill y el hueco vuelve.
*/
body.fv2-page #wrapper_content {
flex: 0 0 auto !important; /* la modal está oculta: no debe ocupar alto */
}
body.fv2-page main#middle {
flex: 1 1 auto !important; /* es el único que debe crecer */
/*
* ⚠️ LAS DOS DECLARACIONES VAN JUNTAS. Quitar una rompe la otra.
*
* lleva la clase mx-auto de base.tpl. En flexbox, un item con margen
* AUTO en el eje transversal NO se estira: la spec sólo da stretch si
* "neither of the cross-axis margins are auto". Como #wrapper es flex en
* columna, el eje transversal es el horizontal, así que mx-auto dejaba
* #middle en shrink-to-fit y la portada salía estrecha.
*
* El primer arreglo fue poner los márgenes a 0. Funcionó para el ancho, pero
* creó otro problema: el tema le pone a #middle un max-width propio, y sin
* márgenes automáticos no puede centrarse dentro de ese tope. En una pantalla
* de 2552px quedaba de 1655px pegado a la izquierda, con 900px de vacío a la
* derecha, y todo lo de dentro heredaba ese descentrado.
*
* La solución correcta es no depender del stretch: con width:100% el ancho ya
* es definido, así que los márgenes automáticos vuelven a ser seguros y hacen
* su trabajo de centrar.
*/
width: 100%;
margin-left: auto !important;
margin-right: auto !important;
/*
* El tema admin mete padding: 30px en #middle. Para la Home v2 lo ajustamos:
* el saludo ya trae su propio aire y en móvil esos 30px se notan.
*/
padding-top: 10px;
padding-bottom: 0;
}
body.fv2-page #footer {
flex: none;
margin-top: auto;
}
/*
* ANCHO COMPLETO en todas las pantallas del rediseño.
*
* El tema recorta el área de contenido en pantallas grandes (core.css:20024):
*
* @media (min-width: 992px) {
* body.layout-admin #middle.mx-auto { max-width: 1655px !important; }
* }
*
* En un monitor de 2500px eso deja 850px de vacío a un lado. Las pantallas v2
* gobiernan su propio ancho: el contenedor .fv2 limita a 640px cuando toca (la
* portada del socio, pensada para el móvil) y lo libera cuando la pantalla lo
* pide (.fv2-ficha, .fv2-listado). Así que el tope del tema sobra.
*
* ⚠️ El selector lleva .mx-auto y main a propósito: la regla del tema es
* !important, así que sólo se puede ganar con MÁS ESPECIFICIDAD. La del tema es
* (1,2,1); ésta es (1,2,2). Quitarle el `main` o el `.mx-auto` la deja empatada
* o por debajo y el tope vuelve, sin que nada avise.
*/
body.fv2-page main#middle.mx-auto {
max-width: none !important;
}
/* =============================================================================
* CABECERA EN MÓVIL (body.fv2-tema)
* -----------------------------------------------------------------------------
* Va sobre .fv2-tema y no sobre .fv2-page a propósito: la cabecera es la misma en
* TODAS las pantallas de la app, migradas o no, y verla cambiar de forma al pasar
* de /usuarios a /caja sería peor que dejarla como estaba. .fv2-tema la marca
* base.tpl cuando el cliente tiene home_diseno="v2", así que los clientes sin el
* rediseño no se ven afectados.
*
* EL PROBLEMA (medido): en móvil la cabecera ocupaba 149px —un 17% de la
* pantalla— en tres filas: logos, los cinco iconos de navegación y las acciones
* de usuario. Mucho sitio para lo que hay.
*
* ⚠️ POR QUÉ NO SE COMPRIME A DOS FILAS.
*
* El primer intento subió las acciones al hueco vacío de la derecha del logo con
* position:absolute. Funcionaba en /usuarios (acciones de 155px) y se rompía en
* la portada: cuando el usuario tiene MÁS DE UN CENTRO, ese bloque incluye además
* un con los centros y pasa a medir ~290px, así que empezaba en x=101 y
* se montaba encima del logo, que llega hasta x=185.
*
* Y no hay forma de decidirlo en CSS: la anchura de las acciones depende de si
* ese cliente tiene varios centros, o sea de los datos. Cualquier tope fijo
* acierta en unas instalaciones y falla en otras.
*
* Así que se dejan las tres filas —que se recolocan solas según lo que quepa— y
* lo que se hace es APRETARLAS. Medido desactivando cada cosa por separado en la
* portada, que es la pantalla peor (lleva el selector de centros):
*
* 149px original
* 135px con esto (los rellenos aportan 24px; el tope del logo, 28px)
*
* Tres filas de objetivos táctiles de ~40px tienen ese suelo: no se puede bajar
* mucho más sin hacer los iconos incómodos de pulsar.
* ========================================================================== */
@media (max-width: 991.98px) {
/* El tema deja 12px arriba y abajo del navbar; en móvil se notan */
body.fv2-tema #header .navbar {
padding-top: 2px;
padding-bottom: 2px;
row-gap: 0;
}
/* La fila de iconos de navegación traía su propio relleno vertical */
body.fv2-tema #header .navbar-nav.flex-row > li {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Las acciones de usuario, pegadas a la fila de iconos */
body.fv2-tema #header .navbar > ul.list-inline {
margin-top: 0;
margin-bottom: 0;
}
/*
* El logo del cliente lo sube él y puede venir con cualquier alto, así que en
* móvil se le pone tope. Es la palanca que MÁS baja la cabecera —medido: 28px—
* pero también la única que el cliente nota, porque le encoge la marca.
*
* 46px es un punto medio deliberado: el de fisic pasa de 60 a 46 y sigue
* leyéndose. Bajarlo a 40 sólo ahorra 6px más y no compensa. Si algún cliente
* quiere su logo entero, subir este número es todo lo que hay que tocar.
*/
body.fv2-tema #header .navbar-brand img {
max-height: 46px;
width: auto;
}
}
/* Icon font (Material Symbols Outlined, subconjunto — ver head.tpl) */
.fv2 .fv2-ms {
font-family: 'Material Symbols Outlined';
font-weight: 400;
font-style: normal;
line-height: 1;
display: inline-block;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
direction: ltr;
font-feature-settings: 'liga';
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
/* -------------------------------------------------- 3. Greeting ---------- */
.fv2-greet {
padding: 18px var(--fv2-gutter) 2px;
}
.fv2-greet-eyebrow {
font: 400 13px/1.4 var(--fv2-font-body);
color: var(--fv2-outline);
}
.fv2-greet-name {
font: 700 27px/1.05 var(--fv2-font-head);
letter-spacing: -.01em;
color: var(--fv2-on-surface);
margin: 0;
}
/* -------------------------------------------------- 4. SectionHeader ----- */
.fv2-section {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 24px var(--fv2-gutter) 12px;
}
.fv2-section-title {
font: 600 12px/1.4 var(--fv2-font-body);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--fv2-outline);
margin: 0;
}
.fv2-section-extra {
display: inline-flex;
align-items: center;
gap: 4px;
font: 500 11px var(--fv2-font-body);
color: var(--fv2-muted);
}
.fv2-section-extra .fv2-ms {
font-size: 16px;
color: var(--fv2-muted);
}
/* -------------------------------------------------- 5. HeroCard ---------- */
.fv2-hero-wrap {
padding: 0 var(--fv2-gutter);
padding-top: 19px;
}
.fv2-hero {
position: relative;
display: block;
height: 158px;
border-radius: var(--fv2-radius-card);
overflow: hidden;
box-shadow: var(--fv2-shadow-hero);
transition: transform .18s ease, box-shadow .18s ease;
}
.fv2-hero:hover,
.fv2-hero:focus-visible {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(18, 28, 44, .14);
}
/*
* Placeholder de imagen.
* El diseño original lleva fotografía (componente ). Mientras no
* haya fotos gestionables, pintamos un degradado de marca con un icono
* "fantasma": queda intencionado, no roto. Para activar foto real basta con
* poner background-image en .fv2-hero-media (atributo style desde el .tpl).
*/
.fv2-hero-media,
.fv2-feat-media {
position: absolute;
inset: 0;
background:
radial-gradient(120% 110% at 12% 8%, rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 55%),
linear-gradient(135deg, var(--fv2-accent) 0%, var(--fv2-accent-strong) 58%, #2b2496 100%);
background-size: cover;
background-position: center;
}
.fv2-hero-ghost,
.fv2-feat-ghost {
position: absolute;
right: -14px;
bottom: -22px;
font-size: 132px;
color: rgba(255, 255, 255, .16);
pointer-events: none;
user-select: none;
}
.fv2-feat-ghost {
font-size: 96px;
right: -10px;
bottom: -16px;
}
/*
* Icono personalizado del cliente sobre una Hero/FeatureCard (sin foto).
* Los iconos del catálogo son trazo oscuro pensados para fondo claro; aquí van
* sobre el degradado de marca, así que se pintan en blanco (brightness+invert)
* y centrados, dejando el título abajo. Es el equivalente v2 del "icono grande"
* del diseño anterior. Si la foto está puesta, esto no se pinta (manda la foto).
*/
.fv2-hero-icoimg,
.fv2-feat-icoimg {
position: absolute;
left: 50%;
top: 42%;
transform: translate(-50%, -50%);
width: 76px;
height: 76px;
object-fit: contain;
pointer-events: none;
user-select: none;
filter: brightness(0) invert(1) drop-shadow(0 2px 6px rgba(18, 20, 52, .35));
}
.fv2-feat-icoimg {
width: 56px;
height: 56px;
top: 40%;
}
.fv2-hero-scrim,
.fv2-feat-scrim {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(18, 20, 52, .82), rgba(18, 20, 52, .05) 62%);
pointer-events: none;
}
.fv2-hero-body {
position: absolute;
left: 16px;
right: 62px;
bottom: 14px;
pointer-events: none;
}
.fv2-hero-title {
font: 700 23px/1.05 var(--fv2-font-head);
color: #fff;
margin: 0;
}
.fv2-hero-sub {
font: 400 12px/1.4 var(--fv2-font-body);
color: rgba(255, 255, 255, .85);
margin: 3px 0 0;
}
.fv2-hero-go {
position: absolute;
top: 14px;
right: 14px;
width: 34px;
height: 34px;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.fv2-hero-go .fv2-ms {
font-size: 20px;
}
/* -------------------------------------------------- 6. FeatureCard ------- */
.fv2-feat-grid {
padding: 12px var(--fv2-gutter) 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.fv2-feat {
position: relative;
display: block;
height: 132px;
border-radius: var(--fv2-radius-card);
overflow: hidden;
box-shadow: var(--fv2-shadow-hero);
transition: transform .18s ease, box-shadow .18s ease;
}
.fv2-feat:hover,
.fv2-feat:focus-visible {
transform: translateY(-2px);
box-shadow: 0 10px 26px rgba(18, 28, 44, .14);
}
/* Segunda tarjeta con un tinte distinto para que la pareja no se lea plana */
.fv2-feat--alt .fv2-feat-media {
background:
radial-gradient(120% 110% at 12% 8%, rgba(255, 255, 255, .28) 0%, rgba(255, 255, 255, 0) 55%),
linear-gradient(135deg, #3f7ea8 0%, #2c5f86 58%, #1d4260 100%);
}
.fv2-feat-scrim {
background: linear-gradient(to top, rgba(18, 20, 52, .82), rgba(18, 20, 52, 0) 65%);
}
.fv2-feat-title {
position: absolute;
left: 12px;
right: 12px;
bottom: 11px;
font: 700 17px/1.05 var(--fv2-font-head);
color: #fff;
pointer-events: none;
}
/* -------------------------------------------------- 7. IconTile ---------- */
.fv2-tiles {
padding: 0 14px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px 4px;
}
.fv2-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: 7px;
padding: 6px 2px;
position: relative;
min-height: 88px;
border-radius: 12px;
transition: transform .15s ease;
}
.fv2-tile:hover,
.fv2-tile:focus-visible {
transform: translateY(-2px);
}
.fv2-tile:focus-visible {
outline: 2px solid var(--fv2-accent);
outline-offset: 2px;
}
.fv2-tile-ico {
width: 58px;
height: 58px;
border-radius: var(--fv2-radius-tile);
background: var(--fv2-accent-soft);
display: flex;
align-items: center;
justify-content: center;
flex: none;
}
.fv2-tile-ico .fv2-ms {
font-size: 25px;
}
/*
* Tipo 'img' — icono personalizado por el cliente desde
* Configuración > Empresa > Logos del menú (upload/menu/).
* Los SVG del tema son ilustraciones a color, así que no se recolorean:
* se muestran tal cual dentro de la pastilla, con un poco menos de tamaño
* que el icono de fuente para que la rejilla siga alineada.
*/
.fv2-tile-ico img {
width: 34px;
height: 34px;
object-fit: contain;
}
/*
* Tipo 'foto' — foto grande subida a upload/menu/hero/.
* La tile pasa a ocupar dos columnas y se pinta como una FeatureCard.
*/
.fv2-tile--foto {
grid-column: span 2;
min-height: 104px;
padding: 0;
border-radius: var(--fv2-radius-card);
overflow: hidden;
box-shadow: var(--fv2-shadow-hero);
justify-content: flex-end;
align-items: flex-start;
}
.fv2-tile-foto {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-color: var(--fv2-accent-soft);
}
.fv2-tile-foto-scrim {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(18, 20, 52, .82), rgba(18, 20, 52, 0) 68%);
pointer-events: none;
}
.fv2-tile--foto .fv2-tile-label {
position: relative;
z-index: 1;
text-align: left;
color: #fff;
font: 700 15px/1.15 var(--fv2-font-head);
padding: 0 12px 11px;
text-shadow: 0 1px 3px rgba(18, 20, 52, .5);
}
.fv2-tile--foto .fv2-tile-badge {
right: 10px;
transform: none;
top: 10px;
}
.fv2-tile--foto .fv2-tile-progress {
position: absolute;
bottom: 6px;
right: 10px;
z-index: 1;
background: rgba(255, 255, 255, .35);
}
/* En pantallas de 3 columnas, una foto a doble ancho deja hueco: que ocupe todo */
@media (max-width: 575px) {
.fv2-tile--foto { grid-column: 1 / -1; }
}
/*
* Tamaño de las etiquetas. El mockup era un móvil de 392px, donde 10.5px
* cuadraba; en escritorio se leía diminuto al lado del menú anterior (que usa
* ~18px). Se sube la escala en todos los breakpoints.
*/
.fv2-tile-label {
font: 500 11.5px/1.25 var(--fv2-font-body);
text-align: center;
color: var(--fv2-on-surface-var);
display: block;
max-width: 100%;
}
/* Contador (chats sin leer, sugerencias pendientes) */
.fv2-tile-badge {
position: absolute;
top: 0;
right: 50%;
transform: translateX(38px);
min-width: 19px;
height: 19px;
padding: 0 5px;
border-radius: 10px;
background: var(--fv2-error);
color: #fff;
font: 700 10px/19px var(--fv2-font-body);
text-align: center;
box-shadow: 0 0 0 2px var(--fv2-surface);
}
/* Barra de avance de desarrollo — se conserva, pero discreta */
.fv2-tile-progress {
width: 34px;
height: 3px;
border-radius: 2px;
background: var(--fv2-divider);
overflow: hidden;
margin-top: -2px;
}
.fv2-tile-progress > span {
display: block;
height: 100%;
background: var(--fv2-ok);
}
.fv2-tile.is-incomplete .fv2-tile-progress > span { background: var(--fv2-warn); }
.fv2-tile.is-disabled .fv2-tile-progress > span { background: var(--fv2-muted); }
.fv2-tile.is-disabled {
opacity: .45;
pointer-events: none;
}
/* -------------------------------------------------- 8. InfoRow / lista --- */
.fv2-list {
background: var(--fv2-card);
border: 1px solid var(--fv2-border);
border-radius: var(--fv2-radius-card);
overflow: hidden;
box-shadow: var(--fv2-shadow-card);
}
.fv2-row {
display: flex;
align-items: center;
gap: 13px;
padding: 15px 16px;
border-bottom: 1px solid var(--fv2-divider);
background: var(--fv2-card);
transition: background .15s ease;
}
.fv2-row:last-child {
border-bottom: 0;
}
.fv2-row:hover {
background: var(--fv2-card-alt);
}
.fv2-row > .fv2-ms {
font-size: 20px;
flex: none;
}
.fv2-row-icon-img {
width: 20px;
height: 20px;
object-fit: contain;
flex: none;
}
/* Miniatura para filas con FOTO propia (p.ej. avisos CMS con cms_icono): más
* grande y con "cover" para que se vea la foto, no un icono de 20px encogido. */
.fv2-row-thumb {
width: 44px;
height: 44px;
border-radius: 10px;
object-fit: cover;
flex: none;
}
.fv2-row-label {
flex: 1;
font: 500 13px/1.4 var(--fv2-font-body);
color: var(--fv2-on-surface);
min-width: 0;
}
.fv2-row-chev {
font-size: 18px !important;
color: var(--fv2-chevron) !important;
flex: none;
}
/* -------------------------------------------------- 9. Aviso / alerta ---- */
.fv2-alert {
margin: 12px var(--fv2-gutter) 0;
display: flex;
align-items: center;
gap: 12px;
background: var(--fv2-error-container);
border-radius: var(--fv2-radius-card);
padding: 14px;
}
.fv2-alert .fv2-ms {
font-size: 24px;
color: var(--fv2-error);
}
.fv2-alert-title {
font: 600 13px var(--fv2-font-body);
color: var(--fv2-on-error-cont);
}
.fv2-alert-sub {
font: 400 11px var(--fv2-font-body);
color: var(--fv2-error);
}
/* -------------------------------------------------- 10. Responsive ------- */
/* Móvil pequeño: los rótulos de 3 columnas se estrechan mucho */
@media (max-width: 359px) {
.fv2 { --fv2-gutter: 14px; }
.fv2-tile-ico { width: 52px; height: 52px; }
.fv2-tile-ico .fv2-ms { font-size: 23px; }
}
/* Tablet en adelante: más columnas y tarjetas algo más altas */
@media (min-width: 576px) {
.fv2-tiles { grid-template-columns: repeat(4, 1fr); gap: 16px 6px; }
.fv2-tile-label { font-size: 12.5px; }
}
@media (min-width: 768px) {
.fv2 { max-width: 720px; padding-top: 4px; }
.fv2-tiles { grid-template-columns: repeat(5, 1fr); }
.fv2-hero { height: 190px; }
.fv2-feat { height: 150px; }
/*
* En móvil las secciones se separan solas por el scroll. En pantalla ancha
* quedaban flotando en medio de la nada, así que se les pone una línea
* de pelo que las lee como bloques.
*/
.fv2-section {
border-top: 1px solid var(--fv2-border);
margin-top: 10px;
padding-top: 22px;
}
}
/*
* Escritorio: el diseño nace de un mockup de móvil, y a 1900px de ancho una
* columna de 640px se ve perdida. Se ensancha el contenido, se añaden columnas
* y se agrandan las pastillas para que ocupe el espacio con intención en vez
* de parecer un móvil estirado.
*/
@media (min-width: 1200px) {
.fv2 {
max-width: 940px;
--fv2-gutter: 24px;
}
.fv2-tiles {
grid-template-columns: repeat(6, 1fr);
gap: 22px 10px;
padding: 0 18px;
}
.fv2-tile { min-height: 108px; }
.fv2-tile-ico { width: 72px; height: 72px; }
.fv2-tile-ico .fv2-ms { font-size: 32px; }
.fv2-tile-ico img { width: 42px; height: 42px; }
.fv2-tile-label { font-size: 14px; }
/* Los rótulos de sección acompañan al tamaño de las etiquetas */
.fv2-section-title { font-size: 13px; }
.fv2-greet { padding-top: 22px; }
.fv2-greet-name { font: 700 32px/1.05 var(--fv2-font-head); }
.fv2-hero { height: 220px; }
.fv2-hero-title { font-size: 26px; }
.fv2-feat { height: 168px; }
.fv2-feat-title { font-size: 19px; }
.fv2-row-label { font-size: 14px; }
.fv2-row { padding: 17px 18px; }
}
@media (min-width: 1600px) {
.fv2 { max-width: 1080px; }
.fv2-tiles { grid-template-columns: repeat(7, 1fr); }
}
/* =============================================================================
* FICHA DE CLIENTE (mockup 2b)
* -----------------------------------------------------------------------------
* Sólo la carcasa: cabecera de perfil + navegación. El contenido de cada
* pestaña llega por AJAX desde otras plantillas y conserva su aspecto actual.
*
* móvil una columna, pestañas como chips con scroll horizontal
* tablet más aire, datos a dos columnas, chips sin scroll
* ≥1200px dos columnas: perfil + navegación | contenido
* ========================================================================== */
/*
* La ficha usa TODO el ancho disponible: lleva contenido denso (tablas de bonos,
* valoraciones, la programación) y el tope de la página ya lo pone el .container
* de la app según ancho_pantalla.
*
* ⚠️ Los max-width de la ficha se escriben con DOBLE clase (.fv2.fv2-ficha).
* El elemento lleva .fv2 y .fv2-ficha a la vez, así que contra un `.fv2` suelto
* habría empate de especificidad y decidiría el orden en el archivo — que es
* justo lo que pasaba: `body.layout-ancho .fv2` (más abajo) le ganaba a
* `body.layout-ancho .fv2-ficha` y la ficha se quedaba en el ancho de la
* portada. Con dos clases gana siempre, esté donde esté.
*/
.fv2.fv2-ficha { max-width: none; }
/* -------------------------------------------------- ProfileHeader -------- */
.fv2-profile {
background: var(--fv2-card);
border-radius: var(--fv2-radius-card);
box-shadow: var(--fv2-shadow-card);
margin: 0 var(--fv2-gutter) 16px;
padding: 18px;
}
.fv2-profile-main {
display: flex;
align-items: center;
gap: 14px;
}
.fv2-avatar {
flex: 0 0 auto;
width: 62px;
height: 62px;
border-radius: 50%;
overflow: hidden;
background: var(--fv2-accent-soft);
display: flex;
align-items: center;
justify-content: center;
}
.fv2-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Sin foto: iniciales. Evita el hueco gris y no obliga a subir imagen. */
.fv2-avatar-ini {
font: 700 22px/1 var(--fv2-font-head);
color: var(--fv2-accent);
letter-spacing: .02em;
}
.fv2-profile-id { min-width: 0; }
.fv2-profile-name {
font: 700 24px/1.1 var(--fv2-font-head);
letter-spacing: -.01em;
color: var(--fv2-on-surface);
margin: 0;
overflow-wrap: anywhere;
}
.fv2-profile-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.fv2-badge {
font: 600 10.5px/1 var(--fv2-font-body);
border: 1px solid var(--fv2-border);
color: var(--fv2-on-surface-var);
padding: 3px 10px;
border-radius: 8px;
white-space: nowrap;
}
.fv2-badge--on { background: var(--fv2-accent); border-color: var(--fv2-accent); color: var(--fv2-on-accent); }
.fv2-badge--off { background: var(--fv2-error-container); border-color: var(--fv2-error-container); color: var(--fv2-on-error-cont); }
/* -------------------------------------------------- Datos de contacto ---- */
.fv2-profile-data {
display: grid;
grid-template-columns: 1fr;
gap: 2px;
margin-top: 16px;
border-top: 1px solid var(--fv2-divider);
padding-top: 12px;
}
.fv2-data {
display: flex;
align-items: center;
gap: 11px;
padding: 7px 0;
color: inherit;
}
.fv2-data .fv2-ms { font-size: 19px; flex: none; color: var(--fv2-muted); }
.fv2-data-body { display: flex; flex-direction: column; min-width: 0; }
.fv2-data-lbl { font: 400 10.5px/1.3 var(--fv2-font-body); color: var(--fv2-outline); }
.fv2-data-val { font: 500 13.5px/1.35 var(--fv2-font-body); color: var(--fv2-on-surface); overflow-wrap: anywhere; }
a.fv2-data:hover .fv2-data-val { color: var(--fv2-accent); }
/*
* Input de fecha de alta (staff): un datepicker dentro de la fila .fv2-data, con
* la misma pinta que un valor pero editable. Sin esto heredaba el form-control de
* Bootstrap y desentonaba (era lo que salía descuadrado en el rediseño).
*/
.fv2-data-input {
width: 130px;
max-width: 100%;
margin-top: 2px;
padding: 5px 9px;
font: 500 13.5px/1.2 var(--fv2-font-body);
color: var(--fv2-on-surface);
background: var(--fv2-card);
border: 1px solid var(--fv2-border);
border-radius: var(--fv2-radius-sm);
}
.fv2-data-input:focus {
outline: none;
border-color: var(--fv2-accent);
box-shadow: 0 0 0 3px var(--fv2-accent-soft);
}
.fv2-profile .fv2-stats { margin-top: 14px; }
/* -------------------------------------------------- Navegación ----------- */
/*
* display explícito y con la especificidad de .fv2-ficha a propósito: el
* reutiliza el id #nav_responsive de la ficha clásica, donde llevaba las clases
* .collapse .d-lg-block de Bootstrap. Si algo del tema (o un $.SOW.reinit tras
* cargar una pestaña por AJAX) vuelve a tratarlo como un collapse, .collapse
* pondría display:none y las pestañas desaparecerían sin más.
*/
.fv2-ficha .fv2-tabs { display: block; }
.fv2-ficha .fv2-tablist { display: flex; }
.fv2-tabs { margin: 0 0 16px; }
.fv2-tablist {
list-style: none;
margin: 0;
padding: 0 var(--fv2-gutter);
display: flex;
gap: 8px;
/* Móvil: no caben todas, se deslizan. Sin barra visible. */
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.fv2-tablist::-webkit-scrollbar { display: none; }
.fv2-tablist .nav-item { flex: 0 0 auto; }
.fv2-tab {
position: relative;
display: flex;
align-items: center;
gap: 7px;
white-space: nowrap;
cursor: pointer;
background: var(--fv2-card);
border: 1px solid var(--fv2-border);
border-radius: var(--fv2-radius-sm);
padding: 10px 14px;
font: 600 12.5px/1 var(--fv2-font-body);
color: var(--fv2-on-surface-var);
/*
* ⚠️ NO animar aquí "background" ni "color": SÓLO el borde.
*
* El fondo y el texto de una pestaña se invierten al activarse (fondo claro +
* texto oscuro -> fondo acento + texto claro). Si se animan, durante los
* 150 ms de la transición cada uno va por su cuenta y hay fotogramas con los
* dos claros o los dos oscuros: el texto se vuelve ilegible justo al cambiar
* de pestaña. Y como .fv2-ms no heredaba la transición, el icono saltaba de
* golpe y el texto no, que era aún más raro de ver.
*
* Con el cambio instantáneo el par fondo/texto nunca se descompone.
*/
transition: border-color .15s ease;
}
.fv2-tab .fv2-ms { font-size: 19px; color: var(--fv2-muted); }
.fv2-tab:hover { border-color: var(--fv2-accent); }
/* .active lo pone y lo quita mi_cuenta.tpl.js sobre el */
.fv2-tablist .nav-item.active .fv2-tab {
background: var(--fv2-accent);
border-color: var(--fv2-accent);
color: var(--fv2-on-accent);
}
.fv2-tablist .nav-item.active .fv2-tab .fv2-ms { color: var(--fv2-on-accent); }
/* Aviso de mensajes sin leer */
.fv2-tab-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--fv2-error);
flex: none;
}
/* -------------------------------------------------- Contenido ------------ */
.fv2-ficha-body { padding: 0 var(--fv2-gutter); }
.fv2-ficha-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.fv2-btn-wide {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--fv2-card);
border: 1px solid var(--fv2-border);
border-radius: 10px;
padding: 7px 12px;
font: 600 11.5px/1 var(--fv2-font-body);
color: var(--fv2-on-surface-var);
cursor: pointer;
}
.fv2-btn-wide .fv2-ms { font-size: 17px; color: var(--fv2-muted); }
.fv2-btn-wide:hover { border-color: var(--fv2-accent); }
/* El botón de ensanchar sólo tiene sentido donde hay dos columnas */
.fv2-btn-wide { display: none; }
/* -------------------------------------------------- Tablet --------------- */
@media (min-width: 768px) {
.fv2-profile { padding: 22px; }
.fv2-avatar { width: 76px; height: 76px; }
.fv2-avatar-ini { font-size: 27px; }
.fv2-profile-name { font-size: 28px; }
/* Los datos caben a dos columnas y el bloque deja de ser una lista larga */
.fv2-profile-data { grid-template-columns: 1fr 1fr; column-gap: 20px; }
/* Ya caben todas las pestañas: se envuelven en vez de deslizarse */
.fv2-tablist { flex-wrap: wrap; overflow-x: visible; }
.fv2-tab { font-size: 13px; padding: 11px 16px; }
}
/* -------------------------------------------------- Escritorio ----------- */
@media (min-width: 1200px) {
/*
* SIN TOPE DE ANCHO (decisión del usuario, ago-2026). Antes había aquí un
* max-width: 1320px que dejaba la ficha centrada con bandas de vacío a los
* lados en monitores grandes. La columna del perfil sigue fija en 380px, así
* que todo el ancho que se gana se lo lleva el contenido de las pestañas, que
* es donde están las tablas y los formularios.
*
* ⚠️ Esto sólo surte efecto porque el tope de #middle también está levantado
* (ver "ANCHO COMPLETO" arriba); si alguien devuelve aquel max-width, la ficha
* vuelve a cortarse en 1655px sin que nada avise.
*/
.fv2.fv2-ficha {
max-width: none;
display: grid;
/* 380px: con 320 el nombre se partía en tres líneas y las tres cifras
salían apretadas contra los bordes de su tarjeta */
grid-template-columns: 380px minmax(0, 1fr);
column-gap: 26px;
align-items: start;
}
/*
* UNA sola fila, y perfil+pestañas en una única celda.
*
* ⚠️ NO volver a repartirlos en dos filas con el contenido en
* "grid-row: 1 / span 2". Cuando un item abarca varias filas automáticas, el
* navegador reparte su altura ENTRE ellas en vez de echarla a la última: con
* una pestaña de contenido alto la fila 1 crecía enormemente y las pestañas,
* que estaban en la fila 2, terminaban fuera de la pantalla. Medían bien y
* eran visibles, pero quedaban miles de píxeles más abajo.
*/
/*
* La columna izquierda es UNA SOLA TARJETA: perfil y pestañas dentro, sin
* costuras. Antes el perfil traía su propio fondo, sombra y márgenes, así que
* se veían dos cajas sueltas una encima de otra con un hueco en medio.
*
* El cromo va aquí y no en .fv2-profile porque en móvil .fv2-ficha-side es
* display:contents —no existe como caja— y allí el perfil sí debe ser su
* propia tarjeta. Por eso todo esto vive dentro del @media.
*/
.fv2-ficha > .fv2-ficha-side {
display: block;
grid-column: 1;
grid-row: 1;
background: var(--fv2-card);
border-radius: var(--fv2-radius-card);
box-shadow: var(--fv2-shadow-card);
margin-left: var(--fv2-gutter);
overflow: hidden;
}
.fv2-ficha > .fv2-ficha-body {
grid-column: 2;
grid-row: 1;
padding-right: var(--fv2-gutter);
padding-left: 0;
}
/*
* El perfil deja de ser una tarjeta y pasa a ser el contenido de arriba de la
* columna: fuera fondo, sombra, esquinas y márgenes propios. Sólo conserva su
* relleno, que ahora es el de la tarjeta común.
*/
.fv2-ficha-side .fv2-profile {
background: transparent;
box-shadow: none;
border-radius: 0;
margin: 0;
}
/* Las pestañas, en la misma tarjeta, separadas por una línea */
.fv2-ficha-side .fv2-tabs {
margin: 0;
padding: 8px 10px 12px;
border-top: 1px solid var(--fv2-divider);
}
/*
* DEFENSA: cualquier hijo que NO sea uno de los dos esperados se manda a una
* fila propia por debajo, a todo el ancho. El contenido de las pestañas es
* HTML heredado inyectado dentro de la rejilla; si a una le falta un cierre,
* el navegador no cierra .fv2-ficha y el pie pasa a ser hijo de la rejilla.
* Así, en el peor caso queda debajo y a la vista, no encima de nada.
*/
.fv2-ficha > :not(.fv2-ficha-side):not(.fv2-ficha-body) {
grid-column: 1 / -1;
grid-row: 2;
}
/* Y aunque algo se solape, las pestañas quedan por encima */
.fv2-ficha .fv2-tabs { position: relative; z-index: 2; }
/* En la columna estrecha los datos vuelven a una sola columna */
.fv2-profile-data { grid-template-columns: 1fr; }
/* El perfil gana presencia: es la identidad de la pantalla */
.fv2-profile { padding: 24px 22px 20px; }
.fv2-profile-main { gap: 18px; }
.fv2-avatar { width: 92px; height: 92px; }
.fv2-avatar-ini { font-size: 33px; }
.fv2-profile-name { font-size: 31px; }
.fv2-data { padding: 9px 0; }
.fv2-data .fv2-ms { font-size: 21px; }
.fv2-data-lbl { font-size: 11.5px; }
.fv2-data-val { font-size: 15px; }
.fv2-profile .fv2-stat-num { font-size: 23px; }
.fv2-profile .fv2-stat-lbl { font-size: 10px; }
/* Y las pestañas pasan de chips a lista vertical.
Sin sangría propia: el relleno lo pone ya .fv2-ficha-side .fv2-tabs */
.fv2-ficha .fv2-tablist {
flex-direction: column;
flex-wrap: nowrap;
gap: 2px;
padding-left: 0;
padding-right: 0;
}
.fv2-tablist .nav-item { flex: 1 1 auto; }
.fv2-tab {
border-color: transparent;
background: transparent;
padding: 11px 12px;
border-radius: 10px;
}
/* --fv2-card seria invisible: es el fondo de la propia tarjeta de la columna */
.fv2-tab:hover { background: var(--fv2-card-alt); border-color: transparent; }
.fv2-tab-dot { margin-left: auto; }
.fv2-btn-wide { display: inline-flex; }
/* Ensanchar: se oculta la columna izquierda y el contenido ocupa todo.
Doble clase por el mismo motivo que los max-width de arriba. */
.fv2.fv2-ficha--wide { grid-template-columns: minmax(0, 1fr); }
.fv2-ficha--wide > .fv2-ficha-side { display: none; }
.fv2-ficha--wide > .fv2-ficha-body { grid-column: 1; padding-left: var(--fv2-gutter); }
}
/* =============================================================================
* PIEL v2 PARA EL CONTENIDO DE LAS PESTAÑAS
* -----------------------------------------------------------------------------
* Las cinco pestañas (mi_cuenta, mis_bonos, entrenamientos, valoraciones, chat)
* son ~1.140 líneas de plantilla con tablas, diálogos y handlers JS propios.
* Reescribirlas es trabajo de días y riesgo alto: cada una tiene sus contratos
* con el JS (onclick, data-*, footable, datatables...).
*
* En vez de eso se les pone piel a los primitivos de Bootstrap que ya usan,
* acotado a .fv2-ficha-body. Cero cambios en sus plantillas => cero riesgo de
* romper nada, y las cinco quedan coherentes con el rediseño de una vez.
*
* Todo aquí dentro está limitado a .fv2-ficha-body: no puede escaparse al resto
* de la aplicación.
* ========================================================================== */
.fv2-ficha-body {
font-family: var(--fv2-font-body);
color: var(--fv2-on-surface);
}
/* --- Tarjetas y secciones --- */
.fv2-ficha-body .section,
.fv2-ficha-body .card {
background: var(--fv2-card);
border: 1px solid var(--fv2-border);
border-radius: var(--fv2-radius-card);
box-shadow: var(--fv2-shadow-card);
}
.fv2-ficha-body .card { margin-bottom: 14px; }
/* --- Titulares --- */
.fv2-ficha-body h1, .fv2-ficha-body h2, .fv2-ficha-body h3,
.fv2-ficha-body h4, .fv2-ficha-body h5, .fv2-ficha-body .h4, .fv2-ficha-body .h5 {
font-family: var(--fv2-font-head);
font-weight: 700;
letter-spacing: -.01em;
color: var(--fv2-on-surface);
}
/* --- Tablas: es lo que más se ve en bonos y valoraciones --- */
.fv2-ficha-body table { font-size: 13.5px; }
.fv2-ficha-body thead th {
font: 600 11px/1.3 var(--fv2-font-body);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--fv2-outline);
border-bottom: 1px solid var(--fv2-border);
white-space: nowrap;
}
.fv2-ficha-body tbody td { border-color: var(--fv2-divider); vertical-align: middle; }
.fv2-ficha-body tbody tr:hover > td { background: var(--fv2-card-alt); }
/* --- Botones --- */
.fv2-ficha-body .btn {
font-family: var(--fv2-font-body);
font-weight: 600;
border-radius: 10px;
}
.fv2-ficha-body .btn-primary {
background: var(--fv2-accent);
border-color: var(--fv2-accent);
color: var(--fv2-on-accent);
}
.fv2-ficha-body .btn-primary:hover,
.fv2-ficha-body .btn-primary:focus {
background: var(--fv2-accent-strong);
border-color: var(--fv2-accent-strong);
}
/* --- Distintivos --- */
.fv2-ficha-body .badge {
font-family: var(--fv2-font-body);
font-weight: 600;
border-radius: 8px;
}
/* --- Anidamiento de .section ---------------------------------------------
* entrenamientos.tpl mete .section dentro de .section (una por pestaña), y con
* la regla de arriba salía una tarjeta dentro de otra, con doble borde y doble
* sombra. Las interiores pierden el cromo y sólo aportan espaciado.
*/
.fv2-ficha-body .section .section,
.fv2-ficha-body .card .card {
border: 0;
box-shadow: none;
background: transparent;
}
/* --- Sub-pestañas internas ------------------------------------------------
* Las usan mis_bonos (.nav-invert) y entrenamientos (.nav-tabs, 6 pestañas).
* Se pintan como chips en vez de solapas: con 6 y en móvil, las solapas se
* amontonan y se cortan; los chips fluyen y se deslizan.
*/
.fv2-ficha-body .nav-tabs {
border-bottom: 0;
gap: 8px;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
padding-bottom: 2px;
margin-bottom: 14px;
}
.fv2-ficha-body .nav-tabs::-webkit-scrollbar { display: none; }
.fv2-ficha-body .nav-tabs .nav-item { flex: 0 0 auto; }
.fv2-ficha-body .nav-tabs .nav-link {
font: 600 12.5px/1 var(--fv2-font-body);
color: var(--fv2-on-surface-var);
background: var(--fv2-card);
border: 1px solid var(--fv2-border);
border-radius: var(--fv2-radius-sm);
padding: 10px 15px;
white-space: nowrap;
/* Anula el "transition: color, background-color, border-color" de Bootstrap.
Mismo motivo que en .fv2-tab: ver el aviso de ahí arriba. */
transition: border-color .15s ease;
}
.fv2-ficha-body .nav-tabs .nav-link:hover { border-color: var(--fv2-accent); }
.fv2-ficha-body .nav-tabs .nav-link.active {
color: var(--fv2-on-accent) !important; /* mismo !important del tema, ver #mis_bonos */
background: var(--fv2-accent);
border-color: var(--fv2-accent);
}
/* A partir de tablet ya caben: se envuelven en vez de deslizarse */
@media (min-width: 768px) {
.fv2-ficha-body .nav-tabs { flex-wrap: wrap; overflow-x: visible; }
}
/* --- Cabecera y cuerpo de tarjeta ----------------------------------------- */
.fv2-ficha-body .card-header {
background: transparent;
border-bottom: 1px solid var(--fv2-divider);
}
/* --- Botones "soft" (los usa entrenamientos por todas partes) ------------- */
.fv2-ficha-body .btn-soft.btn-primary {
background: var(--fv2-accent-soft);
border-color: transparent;
color: var(--fv2-accent);
}
.fv2-ficha-body .btn-soft.btn-primary:hover {
background: var(--fv2-accent);
color: var(--fv2-on-accent);
}
/* --- Menús desplegables (acciones de fila) -------------------------------- */
.fv2-ficha-body .dropdown-menu {
border: 1px solid var(--fv2-border);
border-radius: var(--fv2-radius-sm);
box-shadow: 0 8px 24px rgba(18, 28, 44, .12);
}
.fv2-ficha-body .dropdown-item {
font: 500 13px/1.4 var(--fv2-font-body);
border-radius: 8px;
}
.fv2-ficha-body .dropdown-item:hover { background: var(--fv2-accent-soft); color: var(--fv2-accent); }
/* --- Formularios --- */
.fv2-ficha-body .form-control,
.fv2-ficha-body .form-select {
font-family: var(--fv2-font-body);
border-radius: 10px;
border-color: var(--fv2-border);
}
.fv2-ficha-body .form-control:focus,
.fv2-ficha-body .form-select:focus {
border-color: var(--fv2-accent);
box-shadow: 0 0 0 3px rgba(87, 79, 236, .12);
}
.fv2-ficha-body .form-label,
.fv2-ficha-body label { font-family: var(--fv2-font-body); }
/* --- Texto auxiliar --- */
.fv2-ficha-body .text-muted { color: var(--fv2-muted) !important; }
/* =============================================================================
* PESTAÑA "FICHA" (#mi_cuenta) — página de ajustes
* -----------------------------------------------------------------------------
* Esta es la única pestaña con plantilla propia (modules/mi_cuenta.v2.tpl); las
* otras cuatro sólo llevan piel. Ver el motivo en la cabecera de esa plantilla.
*
* El contenedor lleva class="section" porque comentarios_cliente() lo necesita
* como ancestro para anclar el aviso de guardado. Aquí se le quita todo el
* cromo que .fv2-ficha-body .section le habría puesto: las tarjetas son las
* filas, no el contenedor.
* ========================================================================== */
.fv2-ficha-body #mi_cuenta {
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
/* --- Cabecera de grupo ---------------------------------------------------- */
.fv2-acc-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 10px;
}
.fv2-acc-h {
font: 700 13px/1.2 var(--fv2-font-body);
letter-spacing: .06em;
text-transform: uppercase;
color: var(--fv2-outline);
margin: 0;
}
/* Grupos siguientes (Seguridad, Pagos): necesitan aire por arriba */
.fv2-acc-h--sep { margin: 26px 0 10px; }
/* El botón de tres puntos. .dropstart es de Bootstrap y se conserva para que
el desplegable siga funcionando igual. */
.fv2-acc-dots {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
color: var(--fv2-muted);
background: transparent;
text-decoration: none;
transition: background .15s ease;
}
.fv2-acc-dots:hover { background: var(--fv2-card-alt); color: var(--fv2-on-surface); }
.fv2-acc-dots .fv2-ms { font-size: 20px; }
.fv2-acc-dots::after { display: none; } /* flechita del dropdown-toggle */
/* --- Filas de ajuste ------------------------------------------------------ */
.fv2-sets {
background: var(--fv2-card);
border: 1px solid var(--fv2-border);
border-radius: var(--fv2-radius-card);
box-shadow: var(--fv2-shadow-card);
overflow: hidden;
}
.fv2-set {
display: flex;
align-items: center;
gap: 13px;
padding: 14px 16px;
border-bottom: 1px solid var(--fv2-divider);
}
.fv2-set:last-child { border-bottom: 0; }
/* Pastilla del icono */
.fv2-set-ico {
flex: none;
width: 38px;
height: 38px;
border-radius: 11px;
background: var(--fv2-accent-soft);
display: inline-flex;
align-items: center;
justify-content: center;
}
.fv2-set-ico .fv2-ms { font-size: 20px; color: var(--fv2-accent); }
.fv2-set-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.fv2-set-lbl {
font: 600 13.5px/1.3 var(--fv2-font-body);
color: var(--fv2-on-surface);
}
/* El dato (correo, distintivo): puede ser largo, así que se parte */
.fv2-set-val {
font: 400 13px/1.4 var(--fv2-font-body);
color: var(--fv2-on-surface-var);
overflow-wrap: anywhere;
}
.fv2-set-hint {
font: 400 11.5px/1.45 var(--fv2-font-body);
color: var(--fv2-muted);
}
.fv2-set-act {
flex: none;
display: flex;
align-items: center;
gap: 6px;
}
/* Eliminar cuenta: el icono en rojo, sin gritar con toda la fila en rojo */
.fv2-set--danger .fv2-set-ico { background: var(--fv2-error-container); }
.fv2-set--danger .fv2-set-ico .fv2-ms { color: var(--fv2-error); }
/* Fila que apila (comentarios internos): la acción es el propio campo */
.fv2-set--stack { align-items: flex-start; }
.fv2-set--stack .fv2-set-ico { margin-top: 2px; }
/* --- Botón de fila -------------------------------------------------------- */
.fv2-chip {
display: inline-flex;
align-items: center;
white-space: nowrap;
padding: 8px 13px;
border-radius: 10px;
border: 1px solid var(--fv2-border);
background: var(--fv2-card);
color: var(--fv2-on-surface-var);
font: 600 12.5px/1 var(--fv2-font-body);
text-decoration: none;
cursor: pointer;
transition: border-color .15s ease; /* ver el aviso de .fv2-tab */
}
.fv2-chip--go {
background: var(--fv2-accent);
border-color: var(--fv2-accent);
color: var(--fv2-on-accent);
}
.fv2-chip--go:hover {
background: var(--fv2-accent-strong);
border-color: var(--fv2-accent-strong);
color: var(--fv2-on-accent);
}
/*
* ⚠️ Los !important son obligatorios, no dejadez:
*
* .isDisabled { pointer-events: none !important; background: #ffc5c5 !important; }
* <- css\fisic-css\style.css:141
*
* Se conserva la clase TAL CUAL en las tres acciones desactivadas (cambiar
* contraseña, eliminar cuenta, cambiar correo) para que el comportamiento sea
* idéntico al de antes: no se puede pulsar. Lo único que cambia es el aspecto,
* porque el rosa chicle del tema se leía como "error", no como "desactivado".
*/
.fv2-ficha-body #mi_cuenta .isDisabled {
background: var(--fv2-card-alt) !important;
border-color: var(--fv2-divider);
/*
* --fv2-muted (#8b93a7) sobre --fv2-card-alt (#f4f6fe) da un contraste de
* ~3:1: insuficiente para texto de 12,5px, y en pantalla no se leia. Con
* --fv2-outline (#6f7979) sube a ~4,6:1 y sigue leyendose como desactivado.
*/
color: var(--fv2-outline);
opacity: 1; /* el .5 del tema lo dejaba ilegible */
cursor: not-allowed;
}
/* --- Campo de comentarios ------------------------------------------------- */
.fv2-ta {
width: 100%;
margin-top: 8px;
min-height: 92px;
resize: vertical;
padding: 11px 13px;
border: 1px solid var(--fv2-border);
border-radius: var(--fv2-radius-sm);
background: var(--fv2-card);
color: var(--fv2-on-surface);
font: 400 13px/1.5 var(--fv2-font-body);
}
.fv2-ta:focus {
outline: 0;
border-color: var(--fv2-accent);
box-shadow: 0 0 0 3px var(--fv2-accent-soft);
}
/*
* Móvil estrecho: etiqueta + dato + dos botones no caben en una línea. La fila
* pasa a rejilla de dos columnas y las acciones bajan bajo el texto, alineadas
* con él (no debajo del icono, que dejaba un escalón raro).
*/
@media (max-width: 519px) {
.fv2-set {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
column-gap: 13px;
row-gap: 9px;
align-items: start;
}
.fv2-set-ico { grid-column: 1; grid-row: 1; }
.fv2-set-body { grid-column: 2; grid-row: 1; }
.fv2-set-act { grid-column: 2; grid-row: 2; flex-wrap: wrap; }
}
/* =============================================================================
* PESTAÑA "BONOS Y PAGOS" (#mis_bonos) — pantalla 2c del mockup
* -----------------------------------------------------------------------------
* Todo es CSS: la plantilla NO se toca. Motivo, que no es estético:
*
* do_filter() (mi_cuenta.tpl.js:~700) hace literalmente
* $('tbody#tbody_bonos tr[data-act]')
* para el filtro Todos / Activos / Anteriores. Convertir la tabla en tarjetas
* en el HTML rompería el filtro sin dar ningún error.
*
* Así que se conserva y se cambia
* cómo SE PINTA. Funciona con el filtro porque éste sólo pone/quita display
* inline y la clase .hidden sobre los .
*
* Por debajo de 760px, responsive-table.css ya pasa la tabla a bloques y saca
* las etiquetas con [data-content]:before. Aquí se construye sobre eso en vez
* de duplicarlo.
*
* Todo acotado a .fv2-ficha-body #mis_bonos.
* ========================================================================== */
.fv2-ficha-body #mis_bonos { padding: 0; border: 0; box-shadow: none; background: transparent; }
/* --- Sub-navegación: Pagos pendientes / Estado / Historial / Minibar ------ */
/*
* El lleva .nav-invert, que el tema pinta como una píldora gris con
* padding propio (core.css:15792). Con chips que ya tienen su borde, eso
* dibujaba una cápsula alrededor de otra. Se neutraliza.
*/
.fv2-ficha-body #mis_bonos > .d-flex > .w-100 > ul.nav {
gap: 8px;
flex-wrap: wrap;
border: 0;
margin-bottom: 14px;
background: transparent;
padding: 0;
display: flex;
}
.fv2-ficha-body #mis_bonos > .d-flex > .w-100 > ul.nav .nav-link {
background: var(--fv2-card);
border: 1px solid var(--fv2-border);
border-radius: var(--fv2-radius-sm);
padding: 10px 15px;
font: 600 12.5px/1 var(--fv2-font-body);
color: var(--fv2-on-surface-var);
transition: border-color .15s ease; /* ver el aviso de .fv2-tab */
}
/*
* ⚠️ El !important del color es obligatorio, no es dejadez:
*
* .nav-invert .nav-link.active { color: var(--bs-primary) !important; }
* <- css/fisic-css/core.css:15804
*
* Nuestra regla lleva un #id, así que gana el FONDO (acento, oscuro), pero el
* !important del tema gana el COLOR y dejaba texto azul marino sobre fondo
* azul marino: la pestaña activa era ilegible. Sin este !important vuelve.
*/
.fv2-ficha-body #mis_bonos > .d-flex > .w-100 > ul.nav .nav-link.active {
background: var(--fv2-accent);
border-color: var(--fv2-accent);
color: var(--fv2-on-accent) !important;
}
.fv2-ficha-body #mis_bonos .tab-content { padding: 0 !important; }
/* --- Filtro Todos / Activos / Anteriores --------------------------------- */
.fv2-ficha-body #mis_bonos .filtro { margin: 0 0 14px !important; }
.fv2-ficha-body #mis_bonos .filtro .btn-group { gap: 8px; flex-wrap: wrap; }
.fv2-ficha-body #mis_bonos .filtro .btn {
border-radius: 10px !important;
border: 1px solid var(--fv2-border);
background: var(--fv2-card);
color: var(--fv2-on-surface-var);
font: 600 12px/1 var(--fv2-font-body);
padding: 9px 14px;
}
.fv2-ficha-body #mis_bonos .filtro .btn.active {
background: var(--fv2-accent);
border-color: var(--fv2-accent);
color: var(--fv2-on-accent);
}
/* --- Encabezados de bloque ------------------------------------------------ */
.fv2-ficha-body #mis_bonos h5 {
font: 600 12px/1.4 var(--fv2-font-body);
letter-spacing: .08em;
text-transform: uppercase;
}
.fv2-ficha-body #mis_bonos h5 .fw-bold { font-weight: 600; }
.fv2-ficha-body #mis_bonos hr { display: none; }
/* --- Bonos: tarjetas en móvil/tablet ------------------------------------- */
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
.fv2-ficha-body #mis_bonos table.table-mobile-responsive { border: 0; }
/* Cada fila del bono es una tarjeta (mockup 2c) */
.fv2-ficha-body #mis_bonos #tbody_bonos > tr {
background: var(--fv2-card);
border: 1px solid var(--fv2-border);
border-radius: var(--fv2-radius-card);
box-shadow: var(--fv2-shadow-card);
padding: 14px 16px;
margin-bottom: 12px;
}
.fv2-ficha-body #mis_bonos #tbody_bonos > tr > td {
border: 0;
/*
* ⚠️ El !important es obligatorio: responsive-table.css:63 pone
* "padding-top: 1.5rem !important" en la celda para hacerle sitio a la
* etiqueta. Sin anularlo, cada fila salia con 24px de aire arriba y la
* etiqueta flotando en el hueco.
*/
padding: 5px 0 !important;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
text-align: right !important;
}
/*
* ⚠️ EL "position: static" ES EL ARREGLO, no una redundancia.
*
* La etiqueta la pinta responsive-table.css con [data-content]:before, pero
* POSICIONADA EN ABSOLUTO (linea 67: position:absolute; top:15px; left:0;
* width:45%), y la celda le hace sitio con padding-left:50%.
*
* Un elemento absoluto esta fuera del flujo, o sea que NO es un item flex:
* al quitarle el padding-left a la celda para montar la fila con flex, la
* etiqueta se quedaba encima del valor, recortada arriba a la izquierda.
*
* Volviendola estatica pasa a ser un item flex de verdad y la fila queda en
* dos columnas que se adaptan al texto, sin el 50% a ojo.
*/
.fv2-ficha-body #mis_bonos #tbody_bonos > tr > td:before {
position: static;
top: auto;
left: auto;
width: auto;
font: 400 11.5px/1.3 var(--fv2-font-body);
color: var(--fv2-outline);
text-align: left;
flex: 0 0 auto;
white-space: normal;
}
/* El nombre del bono es el titular de la tarjeta */
.fv2-ficha-body #mis_bonos #tbody_bonos > tr > td:nth-child(2) {
font: 700 17px/1.2 var(--fv2-font-head);
border-bottom: 1px solid var(--fv2-divider);
padding-bottom: 10px;
margin-bottom: 4px;
}
.fv2-ficha-body #mis_bonos #tbody_bonos > tr > td:nth-child(2):before { display: none; }
/* Sin etiqueta para la celda de acciones */
.fv2-ficha-body #mis_bonos #tbody_bonos > tr > td:last-child { justify-content: flex-end; }
}
/* --- Bonos: tabla limpia en escritorio ----------------------------------- */
@media (min-width: 1025px) {
.fv2-ficha-body #mis_bonos table {
background: var(--fv2-card);
border: 1px solid var(--fv2-border);
border-radius: var(--fv2-radius-card);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
box-shadow: var(--fv2-shadow-card);
}
.fv2-ficha-body #mis_bonos thead th { padding: 12px 14px; background: var(--fv2-card-alt); }
.fv2-ficha-body #mis_bonos tbody td { padding: 13px 14px; }
/* El nombre del bono, con peso de titular */
.fv2-ficha-body #mis_bonos #tbody_bonos > tr > td:nth-child(2) {
font-family: var(--fv2-font-head);
font-weight: 700;
font-size: 15px;
}
}
/* --- Reservas y sesiones (modules/sesion.tpl → .cita) -------------------- */
.fv2-ficha-body .cita {
background: var(--fv2-card);
border: 1px solid var(--fv2-border) !important;
border-radius: var(--fv2-radius-card);
box-shadow: var(--fv2-shadow-card);
margin-bottom: 12px !important;
overflow: hidden;
}
.fv2-ficha-body .cita p { font-size: 13.5px; }
.fv2-ficha-body .cita p strong { font-family: var(--fv2-font-head); font-size: 15.5px; }
/*
* Los botones (Cambiar / Cancelar / Asignar / Liberar) van pegados a la derecha
* de su columna, junto al bloque de la fecha, en vez de sueltos en medio de la
* fila. Es la columna del medio de las tres de sesion.tpl (texto · botones · día).
*/
.fv2-ficha-body .cita > div:nth-child(2) {
justify-content: flex-end;
gap: 6px;
flex-wrap: wrap;
}
/* En móvil las tres columnas se apilan y "a la derecha" ya no significa nada */
@media (max-width: 767px) {
.fv2-ficha-body .cita > div:nth-child(2) { justify-content: flex-start; }
}
/* El bloque de día/mes de la derecha, como en el mockup */
.fv2-ficha-body .cita > div:last-child {
background: var(--fv2-card-alt);
justify-content: center !important;
}
.fv2-ficha-body .cita > div:last-child > div:first-child {
font-family: var(--fv2-font-head) !important;
font-weight: 700;
color: var(--fv2-accent);
line-height: 1;
}
.fv2-ficha-body .cita > div:last-child > div:last-child {
font: 600 11px/1.4 var(--fv2-font-body);
letter-spacing: .1em;
color: var(--fv2-outline);
}
.fv2-ficha-body #reservas > div { margin-bottom: 0; }
/* --- Historial de pagos --------------------------------------------------- */
.fv2-ficha-body .a-pedido,
.fv2-ficha-body .pedido { transition: border-color .15s ease; }
.fv2-ficha-body .a-pedido:hover { border-color: var(--fv2-accent); }
.fv2-ficha-body .pedido h5 { text-transform: none; letter-spacing: 0; font-size: 16px; color: var(--fv2-on-surface); }
/* =============================================================================
* PESTAÑA "VALORACIONES" (#valoraciones)
* -----------------------------------------------------------------------------
* Solo CSS: la plantilla únicamente recibe el id (una línea) para poder acotar
* esto sin colgarlo de .section, que es genérica y la usan varias pestañas.
* ========================================================================== */
.fv2-ficha-body #valoraciones {
background: var(--fv2-card);
border: 1px solid var(--fv2-border);
border-radius: var(--fv2-radius-card);
box-shadow: var(--fv2-shadow-card);
overflow: hidden;
}
.fv2-ficha-body #valoraciones .card-header {
padding: 16px !important;
border-bottom: 1px solid var(--fv2-divider);
background: transparent;
}
/* --- Buscador ------------------------------------------------------------- */
/* El campo lleva .bg-gray-100 (core.css:11061, con !important) */
.fv2-ficha-body #valoraciones input[name="title"] {
background: var(--fv2-card-alt) !important;
border: 1px solid var(--fv2-border) !important;
border-radius: var(--fv2-radius-sm);
height: 42px;
font: 400 13.5px/1 var(--fv2-font-body);
color: var(--fv2-on-surface);
}
.fv2-ficha-body #valoraciones input[name="title"]:focus {
border-color: var(--fv2-accent) !important;
box-shadow: 0 0 0 3px var(--fv2-accent-soft) !important;
}
/* La lupa iba en .text-primary: aquí es decoración, no un elemento activo */
.fv2-ficha-body #valoraciones form > svg { color: var(--fv2-muted) !important; }
/* --- Tabla en escritorio -------------------------------------------------- */
/*
* El título de cada valoración era un botón azul (.btn-soft.btn-primary). Es un
* enlace a la ficha de la valoración, no una acción destacada: se pinta como
* texto con peso, que además deja leer títulos largos sin romper la tabla.
*/
.fv2-ficha-body #valoraciones td .btn-soft {
background: transparent !important;
border: 0 !important;
padding: 0 !important;
text-align: left;
white-space: normal;
font: 600 14px/1.35 var(--fv2-font-body);
color: var(--fv2-on-surface) !important;
}
.fv2-ficha-body #valoraciones td .btn-soft:hover { color: var(--fv2-accent) !important; }
.fv2-ficha-body #valoraciones tbody td {
font: 400 13px/1.4 var(--fv2-font-body);
color: var(--fv2-on-surface-var);
}
/* Botón de tres puntos de cada fila */
.fv2-ficha-body #valoraciones td.dropstart > a {
color: var(--fv2-muted) !important;
background: transparent !important;
border: 0 !important;
}
.fv2-ficha-body #valoraciones td.dropstart > a:hover {
background: var(--fv2-card-alt) !important;
color: var(--fv2-on-surface) !important;
}
/* --- Filtros en uso ------------------------------------------------------- */
.fv2-ficha-body #valoraciones .list-inline-item.badge {
border-radius: 8px !important;
font-weight: 600;
}
/*
* Móvil: la tabla pasa a tarjetas.
*
* OJO: aquí NO se puede usar el truco de #mis_bonos, que se apoya en
* .table-mobile-responsive y en los atributos data-content de responsive-table.css
* para pintar las etiquetas con :before. Esta tabla no los lleva.
*
* Se resuelve sin etiquetas: título grande en la primera línea con el menú a la
* derecha, y "tipo · fecha" debajo. Como la primera línea ya ocupa todo el ancho
* (el título crece), las dos celdas siguientes bajan solas a la segunda línea.
* El separador es un punto medio, que no hay que traducir.
*/
@media (max-width: 700px) {
.fv2-ficha-body #valoraciones .table-responsive-md { padding: 4px 0; }
.fv2-ficha-body #valoraciones table { border: 0; }
.fv2-ficha-body #valoraciones thead { display: none; }
.fv2-ficha-body #valoraciones tbody,
.fv2-ficha-body #valoraciones tbody tr,
.fv2-ficha-body #valoraciones tbody td { display: block; }
.fv2-ficha-body #valoraciones tbody tr {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: 8px;
row-gap: 2px;
padding: 13px 16px;
border-bottom: 1px solid var(--fv2-divider);
}
.fv2-ficha-body #valoraciones tbody tr:last-child { border-bottom: 0; }
.fv2-ficha-body #valoraciones tbody td {
border: 0 !important;
padding: 0 !important;
width: auto;
}
.fv2-ficha-body #valoraciones tbody td:nth-child(1) { flex: 1 1 auto; order: 1; min-width: 0; }
.fv2-ficha-body #valoraciones tbody td:nth-child(4) { flex: 0 0 auto; order: 2; }
.fv2-ficha-body #valoraciones tbody td:nth-child(2) { flex: 0 0 auto; order: 3; }
.fv2-ficha-body #valoraciones tbody td:nth-child(3) { flex: 0 0 auto; order: 4; }
.fv2-ficha-body #valoraciones tbody td:nth-child(2),
.fv2-ficha-body #valoraciones tbody td:nth-child(3) {
font: 400 12px/1.4 var(--fv2-font-body);
color: var(--fv2-muted);
}
.fv2-ficha-body #valoraciones tbody td:nth-child(3):before {
content: '·';
margin-right: 6px;
color: var(--fv2-chevron);
}
.fv2-ficha-body #valoraciones td .btn-soft { font-size: 15px; }
}
/* =============================================================================
* PESTAÑA "ENTRENAMIENTOS" — programación (#e-actual)
* -----------------------------------------------------------------------------
* La pantalla la componen cuatro plantillas encadenadas:
*
* entrenamientos.tpl sub-pestañas + rótulos de sección
* planificacion.semanas.tpl título, objetivo, semanas, Fase, cifras
* fases.tpl el código de colores de la fase
* planificacion.dia.tpl día, bloques y ejercicios (dentro del swiper)
*
* ⚠️ CONTRATOS QUE NO SE PUEDEN ROMPER:
*
* .semanas-pla li common.tpl.js:23 alterna .active en el y
* .active/.d-none en #swiper--. No tocar el
* display de .swiper-container ni el significado de .d-none.
*
* .swiper-slide Swiper fija ancho y transform EN LÍNEA y luego
* swiperInst[id].update() los recalcula. No se toca su
* layout: solo el contenido.
*
* .btn-bloque-activo plan_dia() (js_body.tpl:563) busca
* "svg.svg-activo.active" para saber a qué día deslizar, y
* el