/* ============================================================ ClicGest — Layout compartido Incluir en TODOS los templates autenticados antes de mobile.css. Contiene: variables CSS, sidebar, topbar, main, badge-admin. Los templates solo deben añadir CSS específico de su módulo. ============================================================ */ /* Tipografía de marca (la misma de la landing): Plus Jakarta Sans con display=swap. Se importa AQUÍ —fuente única del SAAS autenticado— para que las ~70 vistas que cargan layout.css hereden la fuente sin tocar sus . Fallback a system-ui mientras descarga. Auto-alojada en /assets/css/fuentes.css (import local, mismo origen): antes se hotlinkeaba a fonts.googleapis.com, lo que transmitía la IP del visitante a Google sin consentimiento (RGPD). */ @import url('/assets/css/fuentes.css'); /* ============================================================ TOKENS (Refresh visible · Variante B) — fuente única de radios, sombras, superficie/línea/texto y densidad. Las vistas deben usar estas variables en vez de valores sueltos (consolidación del "zoo"). Los --cg-* de color ya existentes se reutilizan, no se duplican. ============================================================ */ :root { /* Color de marca (existentes) */ --cg-primary: #166534; --cg-accent: #22c55e; --cg-dark: #0f172a; --cg-light: #f8fafc; --cg-danger: #be123c; --cg-warning: #b45309; --cg-purple: #7c3aed; --cg-blue: #3b82f6; /* Color SEMÁNTICO único de importe (ingreso/gasto), AA-seguro. Fuente única: lo usan .cg-ingreso/.cg-gasto (canónico) y los alias locales .imp-ing/.imp-gas. */ --cg-ingreso: #166534; --cg-gasto: #b02a37; /* Superficie / línea / texto auxiliar (refresh B; --cg-muted ya es AA) */ --cg-surface: #ffffff; --cg-line: #e2e8f0; --cg-muted: #5b6577; /* Radios: 14px = radio de tarjeta del SAAS (puente entre el 12 dominante y el 18 de la landing). */ --cg-r-sm: 10px; --cg-r: 14px; --cg-r-lg: 18px; /* Sombras (sustituyen a las planas 0 1px 3px) */ --cg-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05); --cg-shadow: 0 2px 12px rgba(15, 23, 42, .05); --cg-shadow-lg: 0 12px 30px rgba(15, 23, 42, .10); /* Densidad */ --cg-pad: 20px; --cg-gap: 16px; /* Acento de marca del tenant. Fallback = verde de marca. ⚠ PENDIENTE clicgest-dev: cablear `primary_color` del tenant al shell del SAAS (p.ej. en .main o :root del tenant_sidebar) sobreescribiendo --cg-brand; entonces la banda de la topbar tomará el color real de la asociación. NO se inventa en PHP desde aquí. --cg-brand-ink = la marca OSCURECIDA hacia base oscura (color-mix con #0b1220): tinta legible SOBRE SUPERFICIE CLARA (--cg-surface). Validado AA para cualquier marca como texto sobre #fff (peor caso = marca blanca, 5.86:1). ⚠ NO usar como texto directamente sobre el RELLENO de marca: NO es adaptativo (siempre oscurece), así que con marcas oscuras colapsa (verde de marca 2.02:1, azul oscuro de tenant 2.11:1, marca negra 1.07:1). Si en el futuro hace falta texto sobre el relleno de marca, usar un patrón realmente sensible a la luminosidad (negro/blanco según luminancia de --cg-brand) y pasar la pasada visual con Chrome headless. */ --cg-brand: var(--cg-primary); --cg-brand-ink: color-mix(in srgb, var(--cg-brand) 35%, #0b1220); } /* Base */ body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); min-height: 100vh; -webkit-font-smoothing: antialiased; } /* Jerarquía de titulares de la landing: tracking apretado de marca. */ h1, h2, h3, h4, h5 { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; letter-spacing: -.02em; } /* ── Sidebar ─────────────────────────────────────────────── */ .sidebar { width: 240px; background: linear-gradient(180deg, var(--cg-dark) 0%, #1a1f35 100%); /* Altura ACOTADA al viewport + scroll interno (antes min-height sin scroll: en pantallas de poca altura —1366×768, 1280×720— los últimos módulos del menú quedaban cortados e inaccesibles). */ height: 100vh; height: 100dvh; overflow-y: auto; scrollbar-width: thin; /* Firefox */ scrollbar-color: #334155 transparent; position: fixed; left: 0; top: 0; padding: 20px 0; color: white; z-index: 100; } /* Scrollbar discreto del sidebar (WebKit) */ .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; } .sidebar::-webkit-scrollbar-track { background: transparent; } .sidebar .brand { padding: 0 20px 20px; font-size: 20px; font-weight: 700; border-bottom: 1px solid #1e293b; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; } .sidebar .nav-link { color: #94a3b8; padding: 10px 20px; display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 14px; transition: .15s; border-left: 3px solid transparent; } .sidebar .nav-link:hover, .sidebar .nav-link.active { color: white; background: #1e293b; border-left-color: var(--cg-accent); } .sidebar .nav-link i { font-size: 18px; width: 22px; text-align: center; } /* ── Sidebar retráctil (escritorio) ────────────────────────── El estado vive en (lo pone el script de tenant_sidebar.php leyendo localStorage, así no parpadea al cargar). La pestaña .sidebar-handle queda siempre visible en el borde izquierdo, centrada en vertical, para volver a abrir/cerrar el menú. En móvil (≤1024px) manda mobile.css con su botón hamburguesa. */ @media (min-width: 1025px) { .sidebar { transition: transform .25s ease; } .main { transition: margin-left .25s ease; } html.sb-collapsed .sidebar { transform: translateX(-100%); } html.sb-collapsed .main { margin-left: 0; } /* Barras fijas ancladas al ancho del menú (listado de socios, editor de carnets) */ html.sb-collapsed .print-bar, html.sb-collapsed .dashboard-panel { left: 0; } .sidebar-handle { position: fixed; top: 50%; left: 240px; transform: translateY(-50%); z-index: 99; /* justo bajo el sidebar (100) y los modales */ width: 18px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--cg-dark); color: #94a3b8; border: 1px solid #1e293b; border-left: none; border-radius: 0 10px 10px 0; padding: 0; cursor: pointer; transition: left .25s ease; box-shadow: 2px 0 10px rgba(0, 0, 0, .18); } .sidebar-handle:hover { color: #fff; background: #1e293b; } .sidebar-handle i { font-size: 13px; transition: transform .25s ease; } html.sb-collapsed .sidebar-handle { left: 0; } html.sb-collapsed .sidebar-handle i { transform: rotate(180deg); } } @media (max-width: 1024px) { .sidebar-handle { display: none; } } @media print { .sidebar-handle { display: none; } } /* ── Contenido principal ─────────────────────────────────── */ .main { margin-left: 240px; padding: 24px; } /* ── Topbar (cabecera de página estándar) ───────────────────── Componente canónico de las ~70 vistas: título/identidad a la izquierda y slot de acción primaria a la derecha. En Variante B lleva el ACENTO DE MARCA: banda superior con el color del tenant (--cg-brand). El color es refuerzo, nunca el único canal: el título textual siempre lo acompaña. */ .topbar { background: var(--cg-surface); padding: 14px 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-radius: var(--cg-r); border-top: 3px solid var(--cg-brand); margin-bottom: 24px; box-shadow: var(--cg-shadow); } /* Slot de título (opcional): las vistas que lo adopten lo verán homogéneo. */ .topbar .topbar-title { font-weight: 800; font-size: 1.1rem; letter-spacing: -.02em; color: var(--cg-dark); margin: 0; } /* Slot de acciones a la derecha. */ .topbar .topbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ── Badge master admin ──────────────────────────────────── */ .badge-admin { background: var(--cg-purple); color: white; font-size: 11px; padding: 3px 8px; border-radius: 4px; } /* ============================================================ TPV — Resultado del bar (pantalla /tpv/resultado) Tarjetas de cifra, desglose por IVA y avisos fiscales. El signo (Beneficio/Pérdida) y cada aviso van por TEXTO + ICONO, nunca solo por color (el dueño es daltónico). ============================================================ */ /* Tarjeta de cifra: borde superior de color (indicador secundario) + número grande tabular. El color SIEMPRE acompaña a un rótulo con icono. */ .res-card { border-radius: 16px; border: 1px solid #e2e8f0; background: #fff; padding: 20px; box-shadow: 0 2px 12px rgba(0, 0, 0, .04); } .res-num { font-size: 30px; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; line-height: 1.1; } .res-card .res-rotulo { text-transform: uppercase; letter-spacing: 1px; font-size: 10px; font-weight: 700; } /* Borde-color por tipo de cifra (refuerzo, no único canal). */ .res-ben { border-top: 4px solid var(--cg-accent); } .res-per { border-top: 4px solid var(--cg-danger); } .res-ing { border-top: 4px solid var(--cg-purple); } .res-gas { border-top: 4px solid var(--cg-warning); } /* Tabla de desglose por IVA: cifras alineadas y monoespaciadas. */ table.desglose td, table.desglose th { font-variant-numeric: tabular-nums; } /* Banner fiscal de ALTO nivel (gestión ≠ base del IS). Fondo gris pizarra, icono de banco + texto: no depende del color. */ .res-banner-fiscal { border-radius: 14px; border: 1px solid #cbd5e1; background: #f1f5f9; border-left: 5px solid #334155; padding: 14px 16px; } .res-banner-fiscal .bi { color: #334155; } .res-banner-fiscal .res-banner-tit { font-weight: 700; color: #1e293b; } /* Pastilla "cifra de gestión" sobre las tarjetas (refuerzo textual del aviso). */ .badge-is { background: #1e293b; color: #fff; } /* Aviso de régimen fiscal (Ley 49/2002 vs. parcialmente exenta): tono informativo azul, icono de balanza + texto. Las dos vías se distinguen por su propio icono. Sobre el fondo claro de alert-info (#cff4fc) los grises por defecto de Bootstrap (text-muted/text-secondary #6c757d = 4.02:1) NO llegan a 4.5:1; se oscurecen para cumplir WCAG AA tanto el texto como los iconos. */ .res-regimen { border-left: 4px solid var(--cg-blue); } /* Texto auxiliar ("consúltalo con tu gestoría") y su flecha: gris pizarra 8.9:1. */ .res-regimen .text-muted, .res-regimen .text-muted .bi { color: #334155 !important; } /* Icono de la vía "TRIBUTA 25 %" (percent): mismo gris pizarra, 8.9:1 (> 3:1). */ .res-regimen .text-secondary { color: #334155 !important; } /* Icono de la vía "EXENTA" (escudo): verde primario, 6.1:1 (el text-success de Bootstrap #198754 daba 3.88:1, demasiado justo para reforzar la distinción). */ .res-regimen .text-success { color: var(--cg-primary) !important; } /* Tarjeta "No socio" de la ficha (fondo azul claro #f0f9ff). El text-muted por defecto de Bootstrap (#6c757d) sobre ese tinte da 4.40:1 < 4.5:1 (suspende AA); afecta a info portadora de significado (la fracción del prorrateo "(7/12, alta …)", las etiquetas Importe/Método). Se oscurece al gris auxiliar de marca #5b6577 = 5.51:1 sobre #f0f9ff (> 4.5:1). Mismo criterio que .res-regimen. */ .card-no-socio .text-muted, .card-no-socio .text-muted .bi { color: #5b6577 !important; } /* ============================================================ Override de marca: .text-warning El amarillo de Bootstrap (#ffc107) sobre fondo claro da 1.63:1, ilegible (lo pidió daltonismo como solución portable). Se sustituye por el ámbar oscuro de marca (--cg-warning #b45309 = 4.7:1 sobre blanco, WCAG AA). Afecta a TODO uso de .text-warning de la app sin tocar plantilla por plantilla. !important para ganar a la utilidad de Bootstrap, que también la lleva. */ .text-warning { color: var(--cg-warning) !important; } /* ============================================================ Override de marca: .text-success y .text-danger Los verdes/rojos de Bootstrap (#198754 = 4.05:1 sobre blanco; #dc3545 = 3.91:1) caen por debajo de WCAG AA en cuanto el fondo se tiñe (hover de fila, .table-success/.table-danger/.table-warning, fondos azulados como #eff6ff). Se sustituyen por verde oscuro de marca (#166534 = 7.13:1 sobre blanco) y rojo oscuro (#b02a37 = 6.50:1), simétrico al --cg-warning. Estos overrides afectan solo al TEXTO con estas clases; los badges de fondo verde/rojo con texto blanco usan .bg-success/.bg-danger (otras clases), no se ven afectados. !important para ganar a la utilidad de Bootstrap. */ .text-success { color: #166534 !important; } .text-danger { color: #b02a37 !important; } /* ============================================================ Clases canónicas reutilizables (stat-card / empty-state / kpi) Definición ÚNICA de referencia para que las vistas dejen de redefinirlas en su