. El reseteo no es
decorativo — el reboot de Bootstrap de codebase.css se carga también en /v2/*, y sin él el botón
sale con el fondo, el borde y la tipografía del navegador. Es el mismo reseteo que ya lleva
.cv2-nav-link. */
.cv2-nav-section {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
background: transparent;
border: none;
cursor: pointer;
text-align: left;
font-family: var(--cv2-font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.22em;
color: color-mix(in oklab, var(--cv2-foreground) 65%, transparent);
padding: 0.375rem 0.75rem;
margin-bottom: 0.625rem;
font-weight: 500;
transition: color 150ms ease;
}
.cv2-nav-section:hover { color: var(--cv2-foreground); }
/* La separación entre grupos cuelga del envoltorio, NO del
: al plegar, el desaparece del
DOM y la regla de antes («.cv2-nav ul + .cv2-nav-section») dejaba de aplicar, con lo que las
cabeceras cerradas se apelotonaban unas sobre otras. No la devuelvas al . */
.cv2-nav-grupo + .cv2-nav-grupo { margin-top: 2rem; }
.cv2-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.cv2-nav-link {
width: 100%;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.75rem;
border-radius: 0.375rem;
font-family: var(--cv2-font-display);
font-size: 14px;
font-weight: 500;
color: color-mix(in oklab, var(--cv2-foreground) 90%, transparent);
text-decoration: none;
background: transparent;
border: none;
cursor: pointer;
transition: background 150ms ease, color 150ms ease;
}
.cv2-nav-link:hover { color: var(--cv2-foreground); background: color-mix(in oklab, var(--cv2-accent) 40%, transparent); }
.cv2-nav-link.active { color: var(--cv2-gold); background: color-mix(in oklab, var(--cv2-accent) 55%, transparent); }
/* Pantalla aún no abierta en la demo: mismo aspecto, sin respuesta al puntero. */
.cv2-nav-link:disabled { cursor: default; }
.cv2-nav-link:disabled:hover { background: transparent; color: color-mix(in oklab, var(--cv2-foreground) 90%, transparent); }
.cv2-nav-link svg { height: 1rem; width: 1rem; color: var(--cv2-muted-foreground); flex-shrink: 0; }
.cv2-nav-link.active svg { color: var(--cv2-gold); }
/* Chevron de estado de los plegadores: apunta a la derecha cerrado y gira hacia abajo al abrir.
Lo usan las cabeceras de grupo (.cv2-nav-section) y la de «Reuniones e IA», que es un
.cv2-nav-link. En esa segunda gana en especificidad a «.cv2-nav-link svg», que si no le impondría
el tamaño del icono de la izquierda. */
.cv2-nav-chevron { flex-shrink: 0; transition: transform 150ms ease; }
.cv2-nav-section .cv2-nav-chevron { height: 0.8rem; width: 0.8rem; }
.cv2-nav-link .cv2-nav-chevron { height: 0.85rem; width: 0.85rem; margin-left: auto; }
.cv2-nav-section[aria-expanded="true"] > .cv2-nav-chevron,
.cv2-nav-link[aria-expanded="true"] > .cv2-nav-chevron { transform: rotate(90deg); }
.cv2-nav-sub {
margin: 0.375rem 0 0.5rem 1.75rem;
border-left: 1px solid color-mix(in oklab, var(--cv2-border) 60%, transparent);
padding-left: 0.75rem;
}
.cv2-nav-sub .cv2-nav-link { padding: 0.5rem 0.625rem; font-size: 13.5px; color: color-mix(in oklab, var(--cv2-foreground) 78%, transparent); }
/* ---- Topbar (selectores contexto) ---- */
/* overscroll-behavior: al llegar al final de la página, el gesto de seguir deslizando se quedaba
encadenado al documento; el navegador escondía su barra y con ella se iba de la pantalla la
barra de contexto, que es sticky respecto a este contenedor y no respecto a la pantalla. */
.cv2-main {
flex: 1;
min-width: 0;
height: 100vh;
height: 100dvh;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior-y: contain;
}
.cv2-topbar {
position: sticky;
top: 0;
z-index: 30;
backdrop-filter: blur(24px);
background: color-mix(in oklab, var(--cv2-background) 80%, transparent);
border-bottom: 1px solid var(--cv2-border);
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0 2rem;
height: 4rem;
}
.cv2-topbar-selects { display: flex; align-items: center; gap: 1rem; min-width: 0; overflow-x: auto; }
/* Envoltorio del bloque de contexto. En escritorio es transparente (display:contents): los tres
selectores siguen siendo hijos directos de la barra, exactamente como antes. En móvil pasa a ser
el ancla del desplegable que los agrupa. */
.cv2-topbar-context { display: contents; }
/* Control compacto que sustituye a los tres selectores en móvil. */
.cv2-context-trigger { display: none; }
/* Fondo que cierra el desplegable al tocar fuera. Oculto de base: si la ventana se ensancha con el
desplegable abierto, en escritorio ya no hay desplegable y este fondo se quedaría comiéndose los
clics de toda la página. */
.cv2-context-backdrop { display: none; }
.cv2-context-select {
position: relative;
flex-shrink: 0;
border: 1px solid var(--cv2-border);
border-radius: 0.375rem;
background: var(--cv2-surface);
padding: 0.375rem 0.75rem;
min-width: 180px;
transition: border-color 150ms ease;
}
.cv2-context-select:hover { border-color: color-mix(in oklab, var(--cv2-gold) 40%, transparent); }
/* "MASTER FRANQUICIA" no cabe en 124px y partía en dos líneas, dejando ese selector más alto que
los otros dos. Se recorta antes que crecer: la etiqueta solo dice de qué nivel es el selector. */
.cv2-context-select-label {
display: block;
font-family: var(--cv2-font-display);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.13em;
font-weight: 600;
color: var(--cv2-muted-foreground);
line-height: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cv2-context-select select {
appearance: none;
background: transparent;
border: none;
color: var(--cv2-foreground);
font-size: 0.875rem;
font-weight: 500;
width: 100%;
margin-top: 0.25rem;
cursor: pointer;
font-family: var(--cv2-font-text);
}
.cv2-context-select select:focus { outline: none; }
.cv2-context-select option { background: var(--cv2-popover); color: var(--cv2-foreground); }
.cv2-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
/* ---- Page header (breadcrumb + acciones) ---- */
/* min-height y no height: con alto fijo, las acciones que no cabían quedaban recortadas por el
overflow-x:hidden de .cv2-main y no había forma de llegar a ellas. Ahora la fila de acciones
puede envolver y la cabecera crece lo justo. */
.cv2-pageheader {
position: sticky;
top: 4rem;
z-index: 20;
backdrop-filter: blur(24px);
background: color-mix(in oklab, var(--cv2-background) 70%, transparent);
border-bottom: 1px solid var(--cv2-border);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem 0.75rem;
padding: 0.5rem 2rem;
min-height: 4rem;
}
/* Acciones de la cabecera. Deliberadamente NO reutiliza .cv2-topbar-right: aquella nunca encoge
(flex-shrink:0) y lo que sobraba se salía de pantalla. Aquí, sin min-width:0, el ancho mínimo
sigue siendo el del botón más ancho: quien cede es el breadcrumb (que sí lleva min-width:0 y se
recorta con puntos suspensivos), y si aún así no cabe, esta fila baja entera a la línea de
abajo. Ningún botón queda cortado ni fuera de alcance. */
.cv2-pageheader-acciones {
margin-left: auto;
display: flex;
align-items: center;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Columna izquierda de la cabecera: breadcrumb y, si la pantalla la pasa, su línea distintiva. */
.cv2-pageheader-main { display: flex; flex-direction: column; justify-content: center; gap: 0.125rem; min-width: 0; }
/* Frase que separa pantallas de nombre parecido (Personas / Asociados, Permisos /
Administradores). Se recorta antes que crecer: la cabecera es una banda, no un bloque de texto. */
.cv2-pageheader-sub {
margin: 0;
font-size: 0.75rem;
line-height: 1.2;
color: var(--cv2-muted-foreground);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cv2-breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; min-width: 0; overflow: hidden; }
.cv2-breadcrumb .sep { color: color-mix(in oklab, var(--cv2-muted-foreground) 60%, transparent); flex-shrink: 0; }
/* Lo demás de la miga (raíz, separadores, distintivos) se queda entero; el que cede es el título. */
.cv2-breadcrumb-raiz, .cv2-breadcrumb .cv2-badge { flex-shrink: 0; }
.cv2-breadcrumb-titulo {
font-weight: 500;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Miga navegable (fichas con jerarquía: Estructura › Master › Franquicia › Hub) */
.cv2-breadcrumb .cv2-miga {
color: var(--cv2-muted-foreground);
text-decoration: none;
white-space: nowrap;
transition: color 150ms ease;
}
.cv2-breadcrumb .cv2-miga:hover { color: var(--cv2-gold); }
/* ---- Contenido ---- */
.cv2-content {
padding: 1.5rem 2rem 2rem;
max-width: 1480px;
}
/* ---- Hero (Inicio) ---- */
.cv2-hero {
position: relative;
overflow: hidden;
border-radius: 1rem;
border: 1px solid var(--cv2-border);
}
img.cv2-hero-bg, .cv2-hero-bg {
position: absolute;
inset: 0;
height: 100%;
width: 100%;
object-fit: cover;
opacity: 0.6;
transform: scale(1.05);
}
.cv2-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom right,
color-mix(in oklab, var(--cv2-background) 80%, transparent),
color-mix(in oklab, var(--cv2-background) 55%, transparent),
color-mix(in oklab, var(--cv2-navy) 45%, transparent));
}
.cv2-hero-inner { position: relative; padding: 3rem 2.5rem; }
/* ---- Timeline actividad ---- */
.cv2-timeline { position: relative; list-style: none; margin: 0; padding: 1.25rem 1.5rem; }
.cv2-timeline::before {
content: '';
position: absolute;
left: 2.6rem;
top: 1.75rem;
bottom: 1.75rem;
width: 1px;
background: var(--cv2-border);
}
.cv2-timeline li { position: relative; display: flex; align-items: flex-start; gap: 1rem; padding: 0.875rem 0; }
.cv2-timeline-icon {
position: relative;
z-index: 1;
height: 2.25rem;
width: 2.25rem;
flex-shrink: 0;
display: grid;
place-items: center;
border-radius: 9999px;
border: 1px solid var(--cv2-border);
background: var(--cv2-background);
color: var(--cv2-gold);
}
.cv2-timeline-icon--active { border-color: var(--cv2-gold-hex); background: var(--cv2-gold-hex); color: var(--cv2-on-gold); }
.cv2-timeline-icon svg { height: 1rem; width: 1rem; }
/* ---- Notificaciones (campana del topbar) ---- */
.cv2-notif-bell { position: relative; }
.cv2-notif-dot {
position: absolute;
top: 0.4rem;
right: 0.45rem;
height: 0.5rem;
width: 0.5rem;
border-radius: 9999px;
background: var(--cv2-gold-hex);
box-shadow: 0 0 0 2px var(--cv2-background);
}
/* Click-catcher: cierra el panel al pulsar fuera (paridad con el dropdown Bootstrap legacy). */
.cv2-notif-backdrop { position: fixed; inset: 0; z-index: 40; }
.cv2-notif-panel {
position: absolute;
right: 0;
top: calc(100% + 0.5rem);
width: min(24rem, calc(100vw - 2rem));
z-index: 50;
padding: 0;
overflow: hidden;
box-shadow: 0 12px 32px rgb(0 0 0 / 0.35);
}
.cv2-notif-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--cv2-border);
}
.cv2-notif-empty { padding: 2rem 1rem; text-align: center; }
.cv2-notif-empty p { margin: 0.75rem 0 0; font-size: 0.8rem; line-height: 1.6; }
.cv2-notif-list {
list-style: none;
margin: 0;
padding: 0.375rem;
max-height: 22rem;
overflow-y: auto;
}
.cv2-notif-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.625rem 0.625rem;
border-radius: 0.5rem;
}
.cv2-notif-item + .cv2-notif-item { margin-top: 0.125rem; }
.cv2-notif-item--nueva { background: color-mix(in oklab, var(--cv2-gold) 10%, transparent); }
.cv2-notif-icon {
flex-shrink: 0;
height: 2rem;
width: 2rem;
display: grid;
place-items: center;
border-radius: 9999px;
border: 1px solid var(--cv2-border);
background: color-mix(in oklab, var(--cv2-background) 40%, transparent);
color: var(--cv2-gold);
}
.cv2-notif-icon svg { height: 0.95rem; width: 0.95rem; }
.cv2-notif-body { min-width: 0; flex: 1; }
.cv2-notif-body p {
margin: 0;
font-size: 0.8rem;
line-height: 1.45;
overflow-wrap: anywhere;
}
.cv2-notif-body span {
display: block;
margin-top: 0.2rem;
font-size: 0.7rem;
color: var(--cv2-muted-foreground);
}
/* ---- Login (página completa, fuera del shell) ---- */
.cv2-login {
min-height: 100dvh;
display: grid;
place-items: center;
padding: 1.5rem;
}
.cv2-login-checking {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
font-size: 0.85rem;
}
.cv2-login-checking .cv2-logo { height: 3rem; }
.cv2-login-card {
width: 100%;
max-width: 26rem;
background: color-mix(in oklab, var(--cv2-surface) 70%, transparent);
border: 1px solid var(--cv2-border);
border-radius: 1rem;
padding: 2.5rem 2.25rem;
box-shadow: 0 24px 64px rgb(0 0 0 / 0.35);
}
.cv2-login-logo { display: flex; justify-content: center; margin-bottom: 1.75rem; }
.cv2-login-logo .cv2-logo { height: 3rem; }
.cv2-login-head { text-align: center; margin-bottom: 1.75rem; }
.cv2-login-head .cv2-serif-title { margin: 0.5rem 0 0.375rem; font-size: 1.65rem; }
.cv2-login-field { margin-bottom: 1.25rem; }
.cv2-login-field .cv2-input { height: 2.75rem; }
.cv2-login-label {
display: block;
font-family: var(--cv2-font-display);
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.13em;
font-weight: 600;
color: var(--cv2-muted-foreground);
margin-bottom: 0.375rem;
}
.cv2-login-pass { position: relative; }
.cv2-login-pass .cv2-input { padding-right: 2.75rem; }
.cv2-login-eye {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 2.5rem;
display: grid;
place-items: center;
background: transparent;
border: none;
color: var(--cv2-muted-foreground);
cursor: pointer;
}
.cv2-login-eye:hover { color: var(--cv2-foreground); }
.cv2-login-eye svg { height: 1rem; width: 1rem; }
.cv2-login-error {
display: flex;
align-items: flex-start;
gap: 0.5rem;
border: 1px solid color-mix(in oklab, var(--cv2-destructive) 45%, transparent);
background: color-mix(in oklab, var(--cv2-destructive) 12%, transparent);
border-radius: 0.5rem;
padding: 0.625rem 0.75rem;
font-size: 0.8rem;
line-height: 1.5;
margin-bottom: 1.25rem;
}
.cv2-login-btn {
width: 100%;
justify-content: center;
height: 2.75rem;
font-size: 0.9rem;
margin-top: 0.25rem;
}
.cv2-login-links {
margin-top: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
text-align: center;
font-size: 0.8rem;
}
.cv2-login-links a { color: var(--cv2-muted-foreground); text-decoration: none; transition: color 150ms ease; }
.cv2-login-links a:hover { color: var(--cv2-gold); }
.cv2-input:disabled, .cv2-btn:disabled { opacity: 0.6; cursor: default; }
@media (max-width: 480px) {
.cv2-login { padding: 1rem; }
.cv2-login-card { padding: 2rem 1.5rem; }
}
/* ---- Responsive ----
Desktop (>=1200px): sidebar fijo, hamburguesa oculta.
Por debajo de 1200px: el sidebar pasa a drawer deslizante controlado por el layout
(hamburguesa en topbar + overlay + botón cerrar). */
.cv2-hamburger { display: none; }
.cv2-sidebar-close { display: none; }
.cv2-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 90;
background: rgb(0 0 0 / 0.5);
backdrop-filter: blur(2px);
}
/* Atajo permanente para registrar una aportación (BotonNuevaAportacionV2). Mismo tamaño y misma
esquina que el botón propio de la pantalla de Aportaciones, para que al llegar allí no dé un
salto. Por debajo del cajón lateral y de sus fondos, que sí deben taparlo. */
.cv2-fab {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 40;
height: 3.5rem;
width: 3.5rem;
display: grid;
place-items: center;
border-radius: 9999px;
border: 1px solid var(--cv2-gold-hex);
background: var(--cv2-gold-hex);
color: var(--cv2-on-gold);
cursor: pointer;
box-shadow: 0 12px 30px -8px oklch(0.1 0.04 263 / 0.7);
transition: background 150ms ease, border-color 150ms ease;
}
.cv2-fab:hover { background: var(--cv2-gold-hover); border-color: var(--cv2-gold-hover); color: var(--cv2-on-gold); }
.cv2-fab svg { height: 1.5rem; width: 1.5rem; }
@media (max-width: 1199.98px) {
.cv2-hamburger {
display: flex;
width: 2.5rem;
padding: 0;
justify-content: center;
flex-shrink: 0;
}
.cv2-overlay { display: block; }
.cv2-sidebar {
position: fixed;
top: 0;
left: 0;
height: 100dvh;
z-index: 100;
width: min(18rem, 85vw);
background: var(--cv2-surface);
box-shadow: 0 0 48px rgb(0 0 0 / 0.45);
transform: translateX(-105%);
transition: transform 250ms ease;
}
.cv2-sidebar--open { transform: translateX(0); }
.cv2-sidebar-logo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.cv2-sidebar-close {
display: grid;
place-items: center;
flex-shrink: 0;
height: 2.25rem;
width: 2.25rem;
border: 1px solid var(--cv2-border);
border-radius: 0.375rem;
background: transparent;
color: var(--cv2-muted-foreground);
cursor: pointer;
}
.cv2-sidebar-close:hover { color: var(--cv2-foreground); background: color-mix(in oklab, var(--cv2-accent) 40%, transparent); }
.cv2-sidebar-close svg { height: 1.1rem; width: 1.1rem; }
.cv2-topbar { padding: 0 1rem; gap: 0.5rem; }
.cv2-topbar-selects { gap: 0.5rem; }
.cv2-context-select { min-width: 150px; }
.cv2-pageheader, .cv2-content { padding-left: 1rem; padding-right: 1rem; }
.cv2-topbar-email { display: none; }
}
@media (max-width: 767.98px) {
/* Botón "Diseño clásico" queda solo con icono. */
.cv2-btn-label { display: none; }
/* ---- Contexto colapsado ----
Los tres selectores piden ~390px y aquí no hay ni 160px. Se esconden dentro de un
desplegable anclado a un único control que dice dónde estás. */
.cv2-topbar-context { display: block; position: relative; flex: 1; min-width: 0; }
.cv2-context-trigger {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
/* Por encima del fondo que cierra el desplegable, para que volver a tocarlo lo cierre. */
position: relative;
z-index: 50;
border: 1px solid var(--cv2-border);
border-radius: 0.375rem;
background: var(--cv2-surface);
color: var(--cv2-foreground);
font-family: var(--cv2-font-text);
text-align: left;
padding: 0.3rem 0.55rem;
cursor: pointer;
}
.cv2-context-trigger > svg { height: 1rem; width: 1rem; flex-shrink: 0; color: var(--cv2-muted-foreground); }
.cv2-context-trigger-textos { flex: 1; min-width: 0; }
.cv2-context-trigger-valor {
display: block;
margin-top: 0.15rem;
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cv2-context-trigger-flecha { transition: transform 150ms ease; }
.cv2-context-trigger--abierto .cv2-context-trigger-flecha { transform: rotate(180deg); }
.cv2-topbar-selects {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
z-index: 60;
display: none;
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
width: min(20rem, calc(100vw - 2rem));
padding: 0.75rem;
overflow: visible;
border: 1px solid var(--cv2-border);
border-radius: 0.625rem;
background: var(--cv2-popover);
box-shadow: 0 18px 48px rgb(0 0 0 / 0.35);
}
.cv2-topbar-selects--abierto { display: flex; }
/* height:100vh y no inset:0 porque el backdrop-filter de .cv2-topbar la convierte en el bloque
contenedor de lo que lleve dentro en position:fixed: con inset:0 solo taparía la franja. */
.cv2-context-backdrop { display: block; position: fixed; inset: 0; height: 100vh; z-index: 40; }
.cv2-context-select { width: 100%; min-width: 0; padding: 0.375rem 0.6rem; }
.cv2-context-select select { font-size: 0.85rem; }
.cv2-topbar { height: 3.5rem; }
.cv2-pageheader { top: 3.5rem; min-height: 3.25rem; padding: 0.4rem 1rem; }
/* La cabecera de móvil es una banda estrecha: el subtítulo ya no cabe bajo el breadcrumb. */
.cv2-pageheader-sub { display: none; }
/* "CEOS ›" no aporta nada en una pantalla estrecha y se come el sitio del título. */
.cv2-breadcrumb-raiz, .cv2-breadcrumb-raiz + .sep { display: none; }
/* Los botones de acción se quedan con el icono. La etiqueta se anula por tamaño y no con
display:none porque las pantallas la escriben como texto suelto dentro del