:root { /* Tema claro (reemplaza el tema oscuro anterior) replicando el sistema de Encuentralo -- fondo claro, tarjetas redondeadas, sombras suaves -- pero con azul claro en vez de blanco puro en las superficies (pedido explicito), conservando los colores de marca de Flash (rojo de accion principal, verde, naranja) sin tocarlos. */ --bg: #EAF3FD; /* --panel es translucido + blur (ver .panel/.stat-card/.login-box mas abajo) a proposito -- el usuario pidio explicitamente que las tarjetas dejen ver el fondo de atras (los fondos personalizados del panel de Apariencia solo tienen sentido si se alcanzan a notar detras). */ --panel: rgba(216, 233, 252, 0.72); --panel-2: rgba(200, 223, 250, 0.6); --border: rgba(47, 111, 237, 0.16); --text: #0B2545; --text-muted: #5B7290; /* Azul electrico (interaccion principal: botones, links, focus) + cyan tecnologico (gradientes/highlights) -- el naranja Flash queda como acento puntual de marca (logo, detalles), no como color de boton. */ --primary: #2f6fed; --primary-dark: #2557c2; --accent-cyan: #0891b2; --flash: #ff8a24; --flash-dark: #e8720f; --red: #e6394a; --red-dark: #b52937; --green: #2fa85a; --radius-sm-base: 10px; --radius-md-base: 14px; --radius-lg-base: 20px; --radius-sm: calc(var(--radius-sm-base) * var(--radius-mult)); --radius-md: calc(var(--radius-md-base) * var(--radius-mult)); --radius-lg: calc(var(--radius-lg-base) * var(--radius-mult)); --shadow-sm: 0 1px 2px rgba(11, 37, 69, 0.08), 0 1px 0 rgba(255, 255, 255, 0.5) inset; --shadow-md: 0 16px 40px -16px rgba(11, 37, 69, 0.28); --shadow-glow-flash: 0 0 32px -10px rgba(255, 138, 36, 0.35); --panel-blur: 14px; color-scheme: light; /* Titulos en Fredoka (la misma display face que ya usa Encuentralo) + cuerpo en Manrope -- mismo par tipografico en toda la app para que se sienta como un solo producto. Si la pagina no cargo el link de Fredoka (paginas viejas que solo piden Manrope) esto cae limpio al peso 700 de Manrope, nunca se rompe. */ --font-display: 'Fredoka', 'Manrope', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-body: 'Manrope', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --transition-rapida: 0.15s cubic-bezier(0.22, 1, 0.36, 1); --transition-base: 0.22s cubic-bezier(0.22, 1, 0.36, 1); /* ---- Tokens ampliados del sistema de diseno (centro de Apariencia, ver personalizacion.js) ---- */ --secondary: #64748b; --info: #0ea5e9; --warning: #e6b439; --panel-elevado: rgba(255, 255, 255, 0.9); /* Escala tipografica */ --fs-h1: 28px; --fs-h2: 22px; --fs-h3: 17px; --fs-h4: 15px; --fs-body: 14px; --fs-small: 13px; --fs-caption: 11px; --lh-base: 1.5; /* Unidad de espaciado -- multiplicada por data-densidad en */ --space-unit: 4px; /* Multiplicador de radios -- ajustado por data-radio en */ --radius-mult: 1; } /* --------------------------------------------------------------------- Densidad visual: compacta / normal / espaciosa. Solo cambia la unidad de espaciado base -- todos los paddings/gaps clave (abajo) ya estan escritos como calc(var(--space-unit) * N) para heredar esto automaticamente. --------------------------------------------------------------------- */ html[data-densidad="compacta"] { --space-unit: 3px; } html[data-densidad="normal"] { --space-unit: 4px; } html[data-densidad="espaciosa"] { --space-unit: 5.5px; } /* Redondeado: recto / suave / redondeado -- multiplica los --radius-* base. */ html[data-radio="recto"] { --radius-mult: 0.35; } html[data-radio="suave"] { --radius-mult: 1; } html[data-radio="redondeado"] { --radius-mult: 1.6; } /* Forma de boton (data-boton en , panel de Apariencia): cambia la FORMA de raiz de .btn en CUALQUIER tema, encima de lo que haya definido ese tema -- independiente de "Redondeado" de arriba (eso solo ajusta cuanto, esto cambia la silueta). "normal" no toca nada, deja el boton del tema activo tal cual. */ html[data-boton="nube"] .btn { border-radius: 60% 40% 55% 45% / 55% 65% 35% 45% !important; clip-path: none !important; position: relative; box-shadow: 0 6px 14px -4px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.35) !important; } html[data-boton="nube"] .btn::before, html[data-boton="nube"] .btn::after { content: ''; position: absolute; background: inherit; border-radius: 50%; width: 46%; height: 70%; top: -28%; z-index: -1; } html[data-boton="nube"] .btn::before { left: 6%; } html[data-boton="nube"] .btn::after { right: 6%; } html[data-boton="nube"] .btn:hover { transform: translateY(-2px); } html[data-boton="triangulo"] .btn { border-radius: 0 !important; clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%) !important; box-shadow: none !important; } html[data-boton="triangulo"] .btn:hover { filter: brightness(1.1); } html[data-boton="rayo"] .btn { border-radius: 0 !important; clip-path: polygon( 0 18%, 55% 18%, 40% 0, 100% 0, 45% 100%, 60% 45%, 0 45% ) !important; padding-left: calc(var(--space-unit) * 5.5) !important; padding-right: calc(var(--space-unit) * 5.5) !important; box-shadow: none !important; } html[data-boton="ninguno"] .btn { background: none !important; background-image: none !important; border: none !important; box-shadow: none !important; clip-path: none !important; color: var(--primary, var(--red)) !important; text-decoration: underline; text-underline-offset: 3px; padding-left: 4px !important; padding-right: 4px !important; border-radius: 4px !important; } html[data-boton="ninguno"] .btn:hover { filter: brightness(1.2); transform: none; } html[data-boton="ninguno"] .btn:active { transform: none; } /* Tamano de texto: pequeno / normal / grande */ html[data-tamano="pequeno"] { font-size: 14px; } html[data-tamano="normal"] { font-size: 16px; } html[data-tamano="grande"] { font-size: 18px; } html[data-tamano="muy-grande"] { font-size: 21px; } /* ======================================================================= SISTEMA DE TEMAS 2.0 (reemplaza el sistema anterior de 10 temas) ======================================================================= 6 temas con personalidad propia, definidos y renderizados a partir del array TEMAS en public/personalizacion.js (esa es la fuente de verdad para la galeria de Apariencia; este archivo es la fuente de verdad para los VALORES visuales de cada tema). Cada tema: 1. Redefine el set de tokens de :root (colores, fuentes, radios, sombras) en un bloque html[data-tema=""]. 2. Puede tener VARIANTES DE FONDO seleccionables sin cambiar de tema, activadas con html[data-tema=""][data-fondo=""] -- agregan la capa visual (gradientes/patrones/imagen) sobre .flash-fondo-capa (ver mas abajo, insertado por JS dentro de una sola vez). 3. Puede sobreescribir la forma de .btn/.panel/.stat-card/inputs con selectores html[data-tema=""] .btn, etc. -- asi cada tema cambia estructura, no solo color. 4. Puede agregar micro-decoraciones puntuales (huellitas, particulas, iconos de comida...) via ::before/::after en zonas concretas (topbar, sidebar, panel) o en .flash-decoracion (contenedor fijo insertado por JS), nunca cubriendo el contenido. PARA AGREGAR UN 7mo TEMA: agregar una entrada en TEMAS (personalizacion.js) y un bloque html[data-tema="tu-id"] { ... } aca (copiar la estructura de un tema existente como plantilla). No hace falta tocar ninguna vista. ======================================================================= */ /* ----------------------------------------------------------------------- 1. FLASH CLASICO (tema por defecto) -- oscuro, elegante, profesional. Fondo oscuro con textura/profundidad, tarjetas azul-marino, rojo de marca como color de accion principal, botones redondeados modernos. ----------------------------------------------------------------------- */ html[data-tema="flash-clasico"] { --bg: #0c1424; --panel: rgba(20, 32, 56, 0.82); --panel-2: rgba(16, 26, 47, 0.85); --panel-elevado: rgba(26, 40, 68, 0.95); --border: rgba(148, 178, 224, 0.14); --text: #eef3fb; --text-muted: #93a4c3; --primary: #e6394a; --primary-dark: #b52937; --accent-cyan: #3d7ee8; --red: #e6394a; --red-dark: #b52937; --green: #2fd171; --secondary: #7086ad; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 1px 0 rgba(255,255,255,0.03) inset; --shadow-md: 0 20px 48px -18px rgba(0,0,0,0.65); --shadow-glow-flash: 0 0 32px -8px rgba(230,57,74,0.45); --font-display: 'Fredoka', 'Manrope', sans-serif; --font-body: 'Manrope', sans-serif; color-scheme: dark; } html[data-tema="flash-clasico"] body { background-color: var(--bg); background-image: radial-gradient(1400px 900px at 8% -10%, rgba(230,57,74,0.10), transparent 60%), radial-gradient(1100px 700px at 95% 105%, rgba(61,126,232,0.10), transparent 60%); background-attachment: fixed; } /* Variante de fondo "textura": rejilla sutil de puntos + ruido de lineas diagonales muy tenue -- profundidad sin distraer del contenido. */ html[data-tema="flash-clasico"][data-fondo="textura"] body { background-image: radial-gradient(rgba(148,178,224,0.06) 1px, transparent 1.2px), repeating-linear-gradient(135deg, rgba(230,57,74,0.025) 0 2px, transparent 2px 46px), radial-gradient(1400px 900px at 8% -10%, rgba(230,57,74,0.10), transparent 60%), radial-gradient(1100px 700px at 95% 105%, rgba(61,126,232,0.10), transparent 60%); background-size: 22px 22px, auto, auto, auto; background-attachment: fixed; } /* Variante "plano": el mismo azul oscuro, sin textura, para quien prefiere un fondo mas quieto. */ html[data-tema="flash-clasico"][data-fondo="plano"] body { background-image: none; background-color: var(--bg); } /* Variante "foto" (galaxia): la foto original que se probo aca (img/ flashclasico.jpg) es de solo 335x597px -- estirada a pantalla completa con background-size:cover se ve borrosa/pixelada en cualquier pantalla normal, no hay forma de "subirle la calidad" a una foto que ya nacio chica. En vez de eso, esto es un cielo de galaxia armado 100% con gradientes CSS (nebulosa + 3 capas de estrellas a distinta escala) -- se ve nitido en CUALQUIER resolucion (4K, retina, lo que sea) porque no es una imagen rasterizada, y usa los mismos colores de marca (navy/rojo) que el resto del tema. */ html[data-tema="flash-clasico"][data-fondo="foto"] body { background-color: #0a0f1e; background-image: radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.9), transparent), radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,0.75), transparent), radial-gradient(1px 1px at 50% 60%, rgba(255,255,255,0.8), transparent), radial-gradient(1px 1px at 85% 70%, rgba(255,255,255,0.65), transparent), radial-gradient(1.5px 1.5px at 10% 80%, rgba(255,255,255,0.7), transparent), radial-gradient(1px 1px at 35% 45%, rgba(255,255,255,0.6), transparent), radial-gradient(1px 1px at 65% 90%, rgba(255,255,255,0.55), transparent), radial-gradient(1.5px 1.5px at 92% 40%, rgba(255,255,255,0.8), transparent), radial-gradient(1px 1px at 5% 55%, rgba(255,255,255,0.5), transparent), radial-gradient(1px 1px at 45% 12%, rgba(255,255,255,0.6), transparent), radial-gradient(ellipse 80% 60% at 25% 20%, rgba(230,57,74,0.22), transparent 70%), radial-gradient(ellipse 70% 55% at 80% 75%, rgba(61,110,224,0.28), transparent 70%), radial-gradient(ellipse 60% 50% at 60% 15%, rgba(139,92,246,0.14), transparent 70%), linear-gradient(180deg, #05070f 0%, #0c1424 45%, #101a2f 100%); background-size: 200px 200px, 250px 250px, 180px 180px, 220px 220px, 210px 210px, 190px 190px, 230px 230px, 240px 240px, 170px 170px, 200px 200px, 100% 100%, 100% 100%, 100% 100%, 100% 100%; background-repeat: repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, center, center, center, center; background-attachment: fixed; } html[data-tema="flash-clasico"] .btn { border-radius: var(--radius-lg); background: linear-gradient(155deg, var(--red), var(--red-dark)); box-shadow: 0 2px 6px rgba(0,0,0,0.35), 0 6px 18px -8px rgba(230,57,74,0.55); } html[data-tema="flash-clasico"] .btn:hover { filter: brightness(1.08); transform: translateY(-1px); } html[data-tema="flash-clasico"] .btn:active { transform: translateY(1px) scale(0.98); filter: brightness(0.96); } html[data-tema="flash-clasico"] .panel, html[data-tema="flash-clasico"] .stat-card, html[data-tema="flash-clasico"] .login-box { background: linear-gradient(165deg, rgba(26,40,68,0.92), rgba(14,22,40,0.88)); border: 1px solid var(--border); } html[data-tema="flash-clasico"] .sidebar-link.activo { background: linear-gradient(135deg, var(--red), var(--red-dark)); } /* ----------------------------------------------------------------------- 2. MUNDO GATUNO -- claro, elegante y calido (crema/durazno/lila), tipo- grafia display redondeada (Comfortaa) distinta de Clasico/Neon, botones pastilla suaves con sombra difusa y un puntito de "nariz" decorativo, tarjetas con esquina de huella discreta + borde superior en degrade, micro-rebote sutil al hover. Nunca infantil: huellas pequenas y pocas. ----------------------------------------------------------------------- */ html[data-tema="mundo-gatuno"] { --bg: #fdf5f0; --panel: rgba(255, 242, 232, 0.85); --panel-2: rgba(250, 231, 217, 0.7); --panel-elevado: #fffaf6; --border: rgba(190, 130, 90, 0.18); --text: #4a2e22; --text-muted: #8a6a58; --primary: #e8834f; --primary-dark: #cc6a38; --accent-cyan: #c081d1; --red: #e6394a; --red-dark: #b52937; --green: #4ab07a; --secondary: #b48a72; --font-display: 'Comfortaa', 'Fredoka', sans-serif; --font-body: 'Manrope', sans-serif; --shadow-sm: 0 1px 2px rgba(74,46,34,0.08); --shadow-md: 0 16px 36px -18px rgba(74,46,34,0.28); color-scheme: light; } html[data-tema="mundo-gatuno"] body { background-color: var(--bg); } /* Variante "crema": calido neutro, casi liso, con un resplandor muy suave arriba-izquierda -- el fondo base del tema. */ html[data-tema="mundo-gatuno"][data-fondo="crema"] body { background-image: radial-gradient(1200px 700px at 10% -5%, rgba(232,131,79,0.10), transparent 60%); background-attachment: fixed; } /* Variante "rosado": el mismo tema, tinte lila/rosado en vez de durazno. */ html[data-tema="mundo-gatuno"][data-fondo="rosado"] body { background-color: #fdf1f7; background-image: radial-gradient(1200px 700px at 90% -5%, rgba(192,129,209,0.14), transparent 60%), radial-gradient(900px 600px at 5% 105%, rgba(232,131,79,0.08), transparent 60%); background-attachment: fixed; } /* Variante "huellas": patron de huellitas repetido, muy tenue -- CSS puro via SVG en data-URI, sin archivos externos. */ html[data-tema="mundo-gatuno"][data-fondo="huellas"] body { background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23e8834f' fill-opacity='0.10'%3E%3Cellipse cx='40' cy='46' rx='7' ry='9'/%3E%3Cellipse cx='30' cy='34' rx='3.4' ry='4.4'/%3E%3Cellipse cx='39' cy='30' rx='3.4' ry='4.4'/%3E%3Cellipse cx='49' cy='33' rx='3.4' ry='4.4'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(1200px 700px at 10% -5%, rgba(232,131,79,0.08), transparent 60%); background-size: 80px 80px, auto; background-attachment: fixed; } /* Variante "ilustracion": manchas organicas suaves tipo acuarela, CSS puro (varios radial-gradient grandes y desenfocados por su propio tamano). */ html[data-tema="mundo-gatuno"][data-fondo="ilustracion"] body { background-color: var(--bg); background-image: radial-gradient(600px 420px at 12% 8%, rgba(192,129,209,0.16), transparent 70%), radial-gradient(560px 480px at 92% 18%, rgba(232,131,79,0.16), transparent 70%), radial-gradient(700px 500px at 50% 100%, rgba(74,176,122,0.10), transparent 70%); background-attachment: fixed; } /* Botones "gato": pastilla suave, sombra difusa calida, puntito de nariz decorativo al final -- forma y detalle distintos a los de Clasico. */ html[data-tema="mundo-gatuno"] .btn { border-radius: 999px; background: linear-gradient(155deg, var(--primary), var(--primary-dark)); box-shadow: 0 1px 2px rgba(74,46,34,0.12), 0 10px 22px -10px rgba(232,131,79,0.55); position: relative; transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, filter .15s ease; } html[data-tema="mundo-gatuno"] .btn::after { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 7px; border-radius: 50%; background: rgba(255,255,255,0.85); vertical-align: middle; } html[data-tema="mundo-gatuno"] .btn:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 4px 10px rgba(74,46,34,0.14), 0 14px 28px -10px rgba(232,131,79,0.6); filter: brightness(1.04); } html[data-tema="mundo-gatuno"] .btn:active { transform: translateY(0) scale(0.97); } /* Tarjetas: esquinas mas redondeadas, sombra difusa calida, filo superior en degrade sutil + huella pequena en la esquina (marca de agua, no decoracion invasiva). */ html[data-tema="mundo-gatuno"] .panel, html[data-tema="mundo-gatuno"] .stat-card, html[data-tema="mundo-gatuno"] .login-box { border-radius: calc(var(--radius-lg) * 1.15); background: linear-gradient(180deg, rgba(255,250,246,0.94), rgba(255,242,232,0.88)); border: 1px solid var(--border); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } html[data-tema="mundo-gatuno"] .panel::before, html[data-tema="mundo-gatuno"] .stat-card::before { content: ''; position: absolute; right: 10px; bottom: 6px; width: 22px; height: 26px; pointer-events: none; opacity: 0.10; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='26' viewBox='0 0 22 26'%3E%3Cg fill='%23e8834f'%3E%3Cellipse cx='11' cy='17' rx='7' ry='8.5'/%3E%3Cellipse cx='3.4' cy='7' rx='3' ry='3.8'/%3E%3Cellipse cx='10.5' cy='3.6' rx='3' ry='3.8'/%3E%3Cellipse cx='17.6' cy='7' rx='3' ry='3.8'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } html[data-tema="mundo-gatuno"] .panel { border-top: 3px solid transparent; border-image: linear-gradient(90deg, var(--primary), var(--accent-cyan)) 1; } /* Marcadores de lista como huellitas pequenas, en vez de puntos genericos. */ html[data-tema="mundo-gatuno"] li::marker { color: var(--primary); } html[data-tema="mundo-gatuno"] .sidebar-link.activo { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 4px 14px -6px rgba(232,131,79,0.55); } /* Micro-animacion: aparicion suave (nada frenetico). */ @keyframes flash-gatuno-fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } html[data-tema="mundo-gatuno"] .panel, html[data-tema="mundo-gatuno"] .stat-card { animation: flash-gatuno-fade .35s ease both; } /* ----------------------------------------------------------------------- 3. MUNDO PERRUNO -- personalidad distinta a Gatuno: calido tostado/verde parque (no crema/lila), tipografia Quicksand mas gruesa, botones robustos con borde grueso y "colita" en la esquina (no pastilla suave), tarjetas con filo superior tipo correa punteada, meneo sutil al hover. ----------------------------------------------------------------------- */ html[data-tema="mundo-perruno"] { --bg: #fff8ec; --panel: rgba(255, 240, 214, 0.85); --panel-2: rgba(250, 227, 190, 0.7); --panel-elevado: #fffdf5; --border: rgba(180, 130, 40, 0.24); --text: #442d0f; --text-muted: #8a6a3a; --primary: #d9822b; --primary-dark: #b56818; --accent-cyan: #3f9b6b; --red: #e6394a; --red-dark: #b52937; --green: #3f9b6b; --secondary: #b08c5a; --font-display: 'Quicksand', 'Fredoka', sans-serif; --font-body: 'Manrope', sans-serif; --shadow-sm: 0 1px 2px rgba(68,45,15,0.10); --shadow-md: 0 16px 34px -16px rgba(68,45,15,0.32); color-scheme: light; } html[data-tema="mundo-perruno"] body { background-color: var(--bg); } /* Variante "arena": tostado calido base, resplandor bajo desde el piso. */ html[data-tema="mundo-perruno"][data-fondo="arena"] body { background-image: radial-gradient(1100px 600px at 50% 110%, rgba(217,130,43,0.12), transparent 60%); background-attachment: fixed; } /* Variante "parque": verde calido de pasto, distinto del tostado -- otra temperatura de color que en Gatuno. */ html[data-tema="mundo-perruno"][data-fondo="parque"] body { background-color: #f6faee; background-image: radial-gradient(1100px 650px at 8% -8%, rgba(63,155,107,0.14), transparent 60%), radial-gradient(900px 600px at 95% 100%, rgba(217,130,43,0.10), transparent 60%); background-attachment: fixed; } /* Variante "huesitos": patron repetido de huesos, mas grande y espaciado que las huellas de Gatuno para que se lea claramente distinto. */ html[data-tema="mundo-perruno"][data-fondo="foto"] body { background-image: linear-gradient(rgba(255,248,236,0.72), rgba(255,248,236,0.85)), url('/img/temas/mundoperruno.webp?v=2'); background-size: cover; background-position: center top; background-attachment: fixed; } html[data-tema="mundo-perruno"][data-fondo="huesitos"] body { background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='%23d9822b' fill-opacity='0.11'%3E%3Cpath d='M30 46c-2-2-2-6 1-8 2-2 6-1 7 1l14 14c2-2 6-2 8 1 2 2 1 6-1 7l-14 14c-2 2-6 2-8-1-2-2-1-6 1-7L30 46z'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(1100px 600px at 50% 110%, rgba(217,130,43,0.08), transparent 60%); background-size: 96px 96px, auto; background-attachment: fixed; } /* Botones "perro": mas gruesos y cuadrados que los de Gatuno, borde solido marcado + relieve inferior tipo boton fisico, marca en la esquina en vez de punto (una "colita" triangular). */ html[data-tema="mundo-perruno"] .btn { border-radius: var(--radius-lg); border: 2px solid rgba(68,45,15,0.16); border-bottom: 4px solid rgba(68,45,15,0.22); background: linear-gradient(155deg, var(--primary), var(--primary-dark)); box-shadow: 0 2px 0 rgba(255,255,255,0.15) inset; font-weight: 700; transition: transform .18s ease, border-bottom-width .18s ease, box-shadow .18s ease; } html[data-tema="mundo-perruno"] .btn:hover { transform: rotate(-0.6deg) translateY(-1px); filter: brightness(1.05); } html[data-tema="mundo-perruno"] .btn:active { transform: translateY(2px) rotate(0deg); border-bottom-width: 2px; } /* Tarjetas: esquinas menos redondeadas que Gatuno (formas mas robustas), filo superior tipo "correa" punteada en vez de degrade liso, huella sustituida por un hueso pequeno en la esquina. */ html[data-tema="mundo-perruno"] .panel, html[data-tema="mundo-perruno"] .stat-card, html[data-tema="mundo-perruno"] .login-box { border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(255,253,245,0.95), rgba(255,240,214,0.88)); border: 1px solid var(--border); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } html[data-tema="mundo-perruno"] .panel::before, html[data-tema="mundo-perruno"] .stat-card::before { content: ''; position: absolute; right: 10px; bottom: 6px; width: 26px; height: 14px; pointer-events: none; opacity: 0.12; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='14' viewBox='0 0 26 14'%3E%3Cg fill='%23d9822b'%3E%3Cpath d='M6 7c-1-1-1-3 .5-4 1-1 3-.5 3.5.5l6 6c1-1 3-1.5 4-.5 1 1 1 3-.5 4-1 1-3 .5-3.5-.5L10 6c-1 1-3 1.5-4 .5z'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: contain; } html[data-tema="mundo-perruno"] .panel { border-top: 3px dashed rgba(217,130,43,0.45); } html[data-tema="mundo-perruno"] .sidebar-link.activo { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-left: 4px solid var(--primary-dark); } /* Micro-animacion: "meneo" suave de bienvenida al aparecer, distinto del fade de Gatuno -- ligera rotacion de ida y vuelta, breve y unica vez. */ @keyframes flash-perruno-meneo { 0% { transform: rotate(0deg); } 25% { transform: rotate(-1.2deg); } 50% { transform: rotate(1deg); } 75% { transform: rotate(-0.4deg); } 100% { transform: rotate(0deg); } } html[data-tema="mundo-perruno"] .panel, html[data-tema="mundo-perruno"] .stat-card { animation: flash-perruno-meneo .5s ease both; } /* ----------------------------------------------------------------------- 4. NEON FUTURISTA -- estructuralmente distinto: rejilla/particulas de fondo (nunca "negro con texto azul" plano), botones geometricos con esquinas recortadas (clip-path), tipografia tecnica, glow controlado. ----------------------------------------------------------------------- */ html[data-tema="neon-futurista"] { --bg: #05060d; --panel: rgba(12, 16, 32, 0.78); --panel-2: rgba(9, 12, 24, 0.82); --panel-elevado: rgba(16, 20, 40, 0.94); --border: rgba(0, 229, 255, 0.22); --text: #e6fbff; --text-muted: #7fa8b8; --primary: #00e5ff; --primary-dark: #00b8cc; --accent-cyan: #ff2ee6; --red: #ff2e6e; --red-dark: #d81f52; --green: #39ff9e; --secondary: #4fd8e0; --radius-sm-base: 4px; --radius-md-base: 4px; --radius-lg-base: 4px; --font-display: 'Orbitron', 'Manrope', sans-serif; --font-body: 'Rajdhani', 'Manrope', sans-serif; --shadow-glow-flash: 0 0 24px -4px rgba(0,229,255,0.55); color-scheme: dark; } html[data-tema="neon-futurista"] body { background-color: var(--bg); } /* Variante "grid": rejilla tecnica en perspectiva sutil + resplandor. */ html[data-tema="neon-futurista"][data-fondo="grid"] body { background-image: linear-gradient(rgba(0,229,255,0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(0,229,255,0.09) 1px, transparent 1px), radial-gradient(1200px 700px at 50% -10%, rgba(255,46,230,0.14), transparent 60%); background-size: 42px 42px, 42px 42px, auto; background-attachment: fixed; } /* Variante "particulas": puntos dispersos tipo estrellas/datos + glow doble. */ html[data-tema="neon-futurista"][data-fondo="particulas"] body { background-image: radial-gradient(1.5px 1.5px at 15% 20%, rgba(0,229,255,0.9), transparent), radial-gradient(1.5px 1.5px at 65% 65%, rgba(255,46,230,0.85), transparent), radial-gradient(1px 1px at 40% 80%, rgba(57,255,158,0.8), transparent), radial-gradient(1.5px 1.5px at 85% 30%, rgba(0,229,255,0.85), transparent), radial-gradient(1300px 850px at 50% -10%, rgba(0,229,255,0.14), transparent 60%), radial-gradient(1000px 700px at 90% 100%, rgba(255,46,230,0.12), transparent 60%); background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat; background-size: 180px 180px, 180px 180px, 180px 180px, 180px 180px, cover, cover; background-attachment: fixed; } /* Variante "oscuro-simple": negro casi plano con un solo glow de borde -- la opcion minima para quien quiere menos ruido visual. */ html[data-tema="neon-futurista"][data-fondo="foto"] body { background-image: linear-gradient(rgba(5,6,13,0.62), rgba(5,6,13,0.8)), url('/img/temas/neonfuturista.webp?v=2'); background-size: cover; background-position: center; background-attachment: fixed; } html[data-tema="neon-futurista"][data-fondo="oscuro-simple"] body { background-image: radial-gradient(1400px 500px at 50% 0%, rgba(0,229,255,0.10), transparent 70%); background-attachment: fixed; } /* Botones geometricos: esquinas recortadas en dos vertices, sin radio, borde neon fino + glow -- forma real distinta a una pildora. */ html[data-tema="neon-futurista"] .btn { border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); background: linear-gradient(135deg, var(--primary), var(--accent-cyan)); color: #04121a; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: 0 0 0 1px rgba(0,229,255,0.5) inset, 0 0 18px -4px rgba(0,229,255,0.6); } html[data-tema="neon-futurista"] .btn:hover { filter: brightness(1.15); box-shadow: 0 0 0 1px rgba(0,229,255,0.7) inset, 0 0 26px -2px rgba(0,229,255,0.85); } html[data-tema="neon-futurista"] .btn:active { transform: scale(0.97); } html[data-tema="neon-futurista"] .btn.secundario { background: transparent; color: var(--primary); box-shadow: 0 0 0 1px var(--border) inset; } html[data-tema="neon-futurista"] .panel, html[data-tema="neon-futurista"] .stat-card { border-radius: 2px; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); box-shadow: 0 0 0 1px rgba(0,229,255,0.12) inset, var(--shadow-sm); } html[data-tema="neon-futurista"] .stat-card .valor { text-shadow: 0 0 12px rgba(0,229,255,0.5); } html[data-tema="neon-futurista"] h1, html[data-tema="neon-futurista"] h2, html[data-tema="neon-futurista"] h3 { text-transform: uppercase; letter-spacing: 0.03em; } html[data-tema="neon-futurista"] .sidebar-link.activo { background: linear-gradient(90deg, rgba(0,229,255,0.18), transparent); box-shadow: inset 2px 0 0 var(--primary); color: var(--primary); } /* Animacion de "energia": pulso lento en el borde del topbar, respeta prefers-reduced-motion (regla global mas arriba ya lo cubre). */ @keyframes flash-neon-pulso { 0%, 100% { box-shadow: 0 1px 0 rgba(0,229,255,0.15) inset, 0 4px 20px -10px rgba(0,229,255,0.35); } 50% { box-shadow: 0 1px 0 rgba(0,229,255,0.35) inset, 0 4px 26px -6px rgba(0,229,255,0.6); } } html[data-tema="neon-futurista"] .topbar { animation: flash-neon-pulso 3.5s ease-in-out infinite; border-bottom-color: rgba(0,229,255,0.25); } /* ----------------------------------------------------------------------- 5. FOOD & DELIVERY -- calido y apetitoso, inspirado en apps de comida a domicilio. Botones enormes tipo "boton de pedir", tarjetas con banda de color arriba (ticket de orden), patrones de fondo tipo pizza/semillas de ajonjoli hechos 100% con SVG en linea (sin imagenes externas), tipografia redondeada con energia (Baloo 2). ----------------------------------------------------------------------- */ html[data-tema="food-delivery"] { --bg: #fff4e6; --panel: rgba(255, 235, 208, 0.85); --panel-2: rgba(255, 224, 184, 0.7); --panel-elevado: #fffaf2; --border: rgba(217, 119, 6, 0.2); --text: #431e07; --text-muted: #92561f; --primary: #f2542d; --primary-dark: #c73f1f; --accent-cyan: #ffb703; --red: #e6394a; --red-dark: #b52937; --green: #3fae4a; --secondary: #c47a3f; --radius-sm-base: 12px; --radius-md-base: 18px; --radius-lg-base: 26px; --font-display: 'Baloo 2', 'Fredoka', sans-serif; --font-body: 'Manrope', sans-serif; --shadow-sm: 0 2px 6px rgba(199, 63, 31, 0.14); --shadow-md: 0 18px 38px -16px rgba(199, 63, 31, 0.38); color-scheme: light; } html[data-tema="food-delivery"] body { background-color: var(--bg); } /* Variante "rojo": calidez roja dominante, resplandor tipo salsa. */ html[data-tema="food-delivery"][data-fondo="rojo"] body { background-color: #fff1e6; background-image: radial-gradient(1200px 650px at 12% -10%, rgba(242,84,45,0.16), transparent 60%), radial-gradient(900px 600px at 100% 100%, rgba(255,183,3,0.14), transparent 60%); background-attachment: fixed; } /* Variante "comida": patron sutil de porciones de pizza + puntos tipo semillas de ajonjoli, en % / vw para que se comporte bien en cualquier pantalla (background-size relativo, no pixeles fijos gigantes). */ html[data-tema="food-delivery"][data-fondo="comida"] body { background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23f2542d' fill-opacity='0.10'%3E%3Cpath d='M40 6 74 70 6 70Z'/%3E%3Ccircle cx='40' cy='40' r='2.4'/%3E%3Ccircle cx='30' cy='52' r='2'/%3E%3Ccircle cx='50' cy='52' r='2'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(120vw 60vh at 50% 115%, rgba(255,183,3,0.16), transparent 60%); background-size: min(96px, 12vw) min(96px, 12vw), cover; background-repeat: repeat, no-repeat; background-attachment: fixed, fixed; } /* Variante "minimalista": colores/fuente/botones del tema sin el patron -- para quien prefiere menos ruido visual. */ html[data-tema="food-delivery"][data-fondo="foto"] body { background-image: linear-gradient(rgba(255,244,230,0.68), rgba(255,244,230,0.85)), url('/img/temas/food.webp?v=2'); background-size: cover; background-position: center top; background-attachment: fixed; } /* "Fondo escenario": palmeras al atardecer (fondo3.jpg) -- variante extra fuera de la ilustracion de comida, para quien quiera algo mas sereno sin dejar el tema Food. */ html[data-tema="food-delivery"][data-fondo="escenario"] body { background-image: linear-gradient(rgba(255,244,230,0.55), rgba(255,244,230,0.78)), url('/img/temas/fondo3.webp?v=2'); background-size: cover; background-position: center; background-attachment: fixed; } html[data-tema="food-delivery"][data-fondo="minimalista"] body { background-color: #fffaf3; background-image: radial-gradient(80vw 40vh at 50% -10%, rgba(242,84,45,0.08), transparent 70%); background-attachment: fixed; } /* Botones "pedir ya": enormes, texto en mayusculas, gradiente calido con borde grueso -- deben sentirse golosos, no una pildora discreta. */ html[data-tema="food-delivery"] .btn { border-radius: var(--radius-lg); padding: calc(var(--space-unit) * 4.5) calc(var(--space-unit) * 8); font-size: 15px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; background: linear-gradient(135deg, var(--accent-cyan), var(--primary)); border: 3px solid rgba(67, 30, 7, 0.12); box-shadow: 0 6px 0 rgba(199,63,31,0.55), var(--shadow-sm); transition: transform .15s ease, box-shadow .15s ease; } html[data-tema="food-delivery"] .btn:hover { transform: translateY(-2px); filter: brightness(1.04); } html[data-tema="food-delivery"] .btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(199,63,31,0.55), var(--shadow-sm); } html[data-tema="food-delivery"] .btn.secundario { background: var(--panel-elevado); color: var(--primary-dark); box-shadow: 0 6px 0 rgba(217,119,6,0.22), var(--shadow-sm); } /* Tarjetas "ticket de pedido": banda de color solida arriba, esquinas bien redondeadas, sombra calida -- distinto de la banda degradee de Gatuno y del filo punteado de Perruno. */ html[data-tema="food-delivery"] .panel, html[data-tema="food-delivery"] .stat-card, html[data-tema="food-delivery"] .login-box { border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; padding-top: calc(var(--space-unit) * 5); } html[data-tema="food-delivery"] .panel::before, html[data-tema="food-delivery"] .stat-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; background: linear-gradient(90deg, var(--primary), var(--accent-cyan)); } /* Marca decorativa: un pequeno "sol/calor" en la esquina de las tarjetas, CSS-only, no interfiere con clics. */ html[data-tema="food-delivery"] .panel::after, html[data-tema="food-delivery"] .stat-card::after { content: ''; position: absolute; right: -18px; bottom: -18px; width: 64px; height: 64px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(255,183,3,0.22), transparent 70%); } html[data-tema="food-delivery"] .sidebar-link.activo { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); border-radius: var(--radius-sm); } /* Micro-animacion: "rebote" calido y breve al aparecer, distinto del fade de Gatuno y del meneo de Perruno. */ @keyframes flash-food-rebote { 0% { transform: scale(0.97); opacity: 0.7; } 60% { transform: scale(1.015); opacity: 1; } 100% { transform: scale(1); } } html[data-tema="food-delivery"] .panel, html[data-tema="food-delivery"] .stat-card { animation: flash-food-rebote .35s ease both; } /* ----------------------------------------------------------------------- 6. COLORIDO CREATIVO -- moderno y experimental, fondos abstractos configurables (blobs / geometrico / aurora), todos 100% gradientes CSS sin imagenes externas. Botones con brillo tipo "shine" al hover, elementos flotantes decorativos sutiles (pointer-events: none), tipografia contemporanea (Sora). ----------------------------------------------------------------------- */ html[data-tema="colorido-creativo"] { --bg: #f5f1ff; --panel: rgba(240, 230, 255, 0.82); --panel-2: rgba(228, 214, 252, 0.68); --panel-elevado: #fbf9ff; --border: rgba(139, 92, 246, 0.2); --text: #2c1a4d; --text-muted: #745a99; --primary: #8b5cf6; --primary-dark: #6d28d9; --accent-cyan: #ec4899; --red: #e6394a; --red-dark: #b52937; --green: #22c55e; --secondary: #a78bfa; --radius-sm-base: 10px; --radius-md-base: 16px; --radius-lg-base: 24px; --font-display: 'Sora', 'Fredoka', sans-serif; --font-body: 'Manrope', sans-serif; --shadow-sm: 0 2px 8px rgba(109, 40, 217, 0.12); --shadow-md: 0 20px 42px -18px rgba(109, 40, 217, 0.35); color-scheme: light; position: relative; } html[data-tema="colorido-creativo"] body { background-color: var(--bg); position: relative; overflow-x: hidden; } /* Variante "blobs": formas organicas grandes y suaves en esquinas opuestas. */ html[data-tema="colorido-creativo"][data-fondo="blobs"] body { background-image: radial-gradient(50vw 50vh at 8% 5%, rgba(139,92,246,0.20), transparent 65%), radial-gradient(45vw 45vh at 95% 15%, rgba(236,72,153,0.16), transparent 65%), radial-gradient(55vw 40vh at 50% 105%, rgba(34,211,238,0.14), transparent 65%); background-attachment: fixed; } /* Variante "geometrico": mezcla conica + lineal, efecto "mesh gradient" angular en vez de manchas redondas. */ html[data-tema="colorido-creativo"][data-fondo="geometrico"] body { background-image: conic-gradient(from 200deg at 15% 10%, rgba(139,92,246,0.16), rgba(236,72,153,0.12), transparent 60%), conic-gradient(from 20deg at 90% 90%, rgba(34,211,238,0.16), rgba(139,92,246,0.10), transparent 60%), linear-gradient(135deg, transparent 60%, rgba(236,72,153,0.08)); background-attachment: fixed; } /* Variante "aurora": velo fluido multicolor, mas envolvente que las otras dos, para quien quiere maxima expresion. */ html[data-tema="colorido-creativo"][data-fondo="foto"] body { background-image: linear-gradient(rgba(245,241,255,0.68), rgba(245,241,255,0.85)), url('/img/temas/coloridocreativo.webp?v=2'); background-size: cover; background-position: center; background-attachment: fixed; } /* "Garabatos": lineas de colores sobre negro (fondo1.jpg) -- variante extra mas atrevida, oscura en vez de la base clara del tema. */ html[data-tema="colorido-creativo"][data-fondo="garabatos"] body { background-image: linear-gradient(rgba(10,8,20,0.5), rgba(10,8,20,0.72)), url('/img/temas/fondo1.webp?v=2'); background-size: cover; background-position: center; background-attachment: fixed; } html[data-tema="colorido-creativo"][data-fondo="aurora"] body { background-image: linear-gradient(120deg, rgba(139,92,246,0.18), rgba(236,72,153,0.14) 45%, rgba(34,211,238,0.16) 100%), radial-gradient(70vw 50vh at 50% -10%, rgba(236,72,153,0.14), transparent 65%); background-size: 220% 220%, cover; background-position: 0% 50%, center; background-attachment: fixed, fixed; animation: flash-colorido-aurora 18s ease-in-out infinite; } @keyframes flash-colorido-aurora { 0%, 100% { background-position: 0% 50%, center; } 50% { background-position: 100% 50%, center; } } /* Elementos flotantes decorativos: dos circulos difusos que se mecen despacio en una esquina -- sutiles, no interactuan con clics ni tapan contenido real. */ html[data-tema="colorido-creativo"] body::before, html[data-tema="colorido-creativo"] body::after { content: ''; position: fixed; pointer-events: none; z-index: 0; border-radius: 50%; filter: blur(2px); opacity: 0.35; } html[data-tema="colorido-creativo"] body::before { top: 6%; right: 4%; width: min(140px, 14vw); height: min(140px, 14vw); background: radial-gradient(circle, rgba(139,92,246,0.55), transparent 70%); animation: flash-colorido-flotar 9s ease-in-out infinite; } html[data-tema="colorido-creativo"] body::after { bottom: 8%; left: 5%; width: min(96px, 10vw); height: min(96px, 10vw); background: radial-gradient(circle, rgba(236,72,153,0.5), transparent 70%); animation: flash-colorido-flotar 11s ease-in-out infinite reverse; } @keyframes flash-colorido-flotar { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8%, 10%); } } /* Botones: relleno degradado con "shine" diagonal que cruza al hover -- distinto de todos los demas temas (ni pildora plana, ni relieve fisico, ni geometria recortada). */ html[data-tema="colorido-creativo"] .btn { border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--primary), var(--accent-cyan)); border: none; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; } html[data-tema="colorido-creativo"] .btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-20deg); transition: left .5s ease; } html[data-tema="colorido-creativo"] .btn:hover::after { left: 130%; } html[data-tema="colorido-creativo"] .btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } html[data-tema="colorido-creativo"] .btn:active { transform: translateY(0) scale(0.98); } html[data-tema="colorido-creativo"] .btn.secundario { background: var(--panel-elevado); color: var(--primary-dark); box-shadow: 0 0 0 2px transparent inset, var(--shadow-sm); border: 2px solid; border-image: linear-gradient(120deg, var(--primary), var(--accent-cyan)) 1; } /* Tarjetas: filo superior en degrade delgado + fondo levemente translucido, sombra mas difusa/coloreada que el resto -- lenguaje distinto al de Gatuno (banda solida) y Food (banda gruesa). */ html[data-tema="colorido-creativo"] .panel, html[data-tema="colorido-creativo"] .stat-card, html[data-tema="colorido-creativo"] .login-box { border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } html[data-tema="colorido-creativo"] .panel::before, html[data-tema="colorido-creativo"] .stat-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--primary), var(--accent-cyan), var(--primary)); background-size: 200% 100%; animation: flash-colorido-aurora 6s ease-in-out infinite; } html[data-tema="colorido-creativo"] .stat-card .valor { background: linear-gradient(120deg, var(--primary), var(--accent-cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-tema="colorido-creativo"] .sidebar-link.activo { background: linear-gradient(120deg, rgba(139,92,246,0.18), rgba(236,72,153,0.12)); box-shadow: inset 3px 0 0 var(--primary); color: var(--primary-dark); } * { box-sizing: border-box; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; } } body { margin: 0; font-family: var(--app-font-family, var(--font-body)); font-size: var(--fs-body); line-height: var(--lh-base); color: var(--text); -webkit-font-smoothing: antialiased; /* Fondo claro: azul claro base + un par de lavados suaves (azul arriba a la izquierda, naranja Flash abajo a la derecha) -- nada de gradientes fuertes ni oscuros, solo un poco de profundidad. */ background-color: var(--bg); background-image: radial-gradient(1300px 800px at 10% -10%, rgba(47, 111, 237, 0.10), transparent 60%), radial-gradient(900px 600px at 92% 105%, rgba(255, 138, 36, 0.07), transparent 60%); background-attachment: fixed; } /* Color de fondo personalizado (panel de Apariencia, ver personalizacion.js) -- se aplica como background-color aparte, PISANDO solo esa capa (el resto de gradientes de arriba se quedan intactos porque background-color es una sub-propiedad independiente del shorthand). Siempre semi-transparente (nunca opaco) para que el lavado azul de la pagina se siga viendo debajo, nunca un bloque de color plano tapando todo. */ h1, h2, h3, h4 { font-family: var(--app-font-family, var(--font-display)); font-weight: 600; letter-spacing: -0.01em; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } /* Selector de tipografia global (Apariencia -> Tipografia, ver personalizacion.js): cuando el usuario elige una fuente propia, personalizacion.js pone --app-font-family en y ESTA regla (mas la de arriba en body/h1-h4) hace que toda la app -- botones, menus, formularios, tarjetas, tablas, modales, paneles, navegacion -- cambie de una sin tocar componente por componente. Sin fuente elegida (por defecto), --app-font-family no existe y cada elemento cae de vuelta a la fuente propia del tema activo (--font-body/--font-display de arriba). .btn incluye (no solo

⚡ texto ⚡