/* ============================================================ TEMA "PIXEL" — estética de bloques inspirada en la navegación de Minecraft Education, con paleta propia (NO se usan assets oficiales). Es la identidad histórica de la plataforma y el tema por defecto para tenants no corporativos. Cumple el contrato semántico documentado en tokens/contract.css. Modo oscuro es la base (identidad); [data-mode='light'] redefine solo superficies, tinta, bordes y las variantes -ink de acento (un verde legible sobre negro se vuelve ilegible sobre blanco). Los "materiales" (pasto, oro, diamante, redstone…) valen igual en los dos modos: son la marca, y cambiarlos sería otra marca. ============================================================ */ :root, :root[data-theme='pixel'] { /* ─── Superficies ─────────────────────────────────────────── */ --bg: #14141A; /* fondo de la app (cueva) */ --bg-2: #1B1B23; /* fondo alterno / franjas */ --panel: #25252E; /* paneles y tarjetas (piedra) */ --panel-2: #2E2E39; /* panel elevado / hover */ --panel-3: #383845; /* input, chip inactivo */ --overlay: rgba(8, 8, 12, 0.82); /* ─── Texto ──────────────────────────────────────────────── */ --ink: #F2F2F5; /* texto principal ~17:1 sobre --bg */ --ink-2: #D5D5DE; /* texto secundario ~13:1 */ --muted: #B8B8C0; /* texto atenuado ~9.3:1 */ --placeholder: #8E8E9C; /* placeholder ~5.3:1 sobre --bg-2 */ --ink-inverse: #14141A; /* texto sobre relleno claro */ /* ─── Bordes y relieve ───────────────────────────────────── */ --outline: #0A0A0E; /* contorno negro duro de todo bloque */ --outline-rgb: 10, 10, 14; --frame: #4A4A5A; /* gris del marco tipo cuadro */ --frame-light: #63637A; /* luz del marco */ --bevel-light: rgba(255, 255, 255, 0.22); --bevel-dark: rgba(0, 0, 0, 0.42); --line: #3A3A47; /* separadores sutiles */ /* ─── Paleta de "materiales" ─────────────────────────────── */ --grass: #5CA83C; /* verde pasto — acción primaria */ --grass-bright: #74C951; --grass-deep: #3F7A28; /* tercera parada del degradé de --xp-fill-bg */ --gold: #FCC000; /* oro — XP, puntos, destacados */ --diamond: #4EE2EC; /* diamante — foco, links */ --redstone: #D3423F; /* redstone — peligro (relleno) */ --amethyst: #A96BE0; --copper: #E8825A; --iron: #9AA5B1; /* Triplete RGB de cada material, para rgba() con alpha puntual (washes de estado, ilustraciones). Sin esto cada componente terminaba escribiendo el rgb() de memoria — ver auth.css/ admin.css/dashboard.css antes de este refactor. */ --grass-rgb: 92, 168, 60; --gold-rgb: 252, 192, 0; --diamond-rgb: 78, 226, 236; --redstone-rgb: 211, 66, 63; --iron-rgb: 154, 165, 177; /* Variantes legibles como TEXTO sobre fondo oscuro */ --grass-ink: #7FD25C; --gold-ink: #FFCE33; --diamond-ink: #4EE2EC; --danger-ink: #FF6B66; /* el redstone puro no llega a 4.5:1 */ --success-ink: #7FD25C; --warning-ink: #FFCE33; /* Texto que va ENCIMA de un relleno de color claro. No varían por modo: el relleno (pasto, oro…) es el mismo en los dos. */ --on-grass: #0E2408; --on-gold: #221A00; --on-diamond: #052326; --on-redstone: #FFF1F0; /* Alias semántico → material. Lo que consume un componente de ESTADO (toast, alerta, badge) es --color-*, nunca el material directo: así un tema sin "pasto" solo redefine el alias. */ --color-success: var(--grass); --color-warning: var(--gold); --color-info: var(--diamond); --color-danger: var(--redstone); --on-danger: var(--on-redstone); /* ─── Acentos por categoría ──────────────────────────────── */ --cat-onboarding: #5CA83C; --cat-onboarding-ink: #7FD25C; --cat-lideres: #FCC000; --cat-lideres-ink: #FFCE33; --cat-ia: #4EE2EC; --cat-ia-ink: #4EE2EC; --cat-speakers: #A96BE0; --cat-speakers-ink: #C093EE; --cat-blandas: #E8825A; --cat-blandas-ink: #F0A183; --cat-offboarding: #9AA5B1; --cat-offboarding-ink: #B3BDC7; /* Acento activo — cada vista lo redefine según la categoría. Los componentes SIEMPRE consumen --accent / --accent-ink. */ --accent: var(--grass); --accent-ink: var(--grass-ink); --on-accent: var(--on-grass); /* ─── Dificultad ─────────────────────────────────────────── */ --diff-basico: #5CA83C; --diff-intermedio: #FCC000; --diff-avanzado: #E8825A; /* ─── Tipografía ───────────────────────────────────────────── 'Press Start 2P' es preciosa pero ILEGIBLE en tamaño párrafo: se reserva para títulos, botones, labels y cifras (>= 12px con letter-spacing generoso). VT323 sirve para metadatos y números. Los textos largos van en un stack de sistema, que es lo que realmente se lee en una capacitación. ------------------------------------------------------------ */ --font-display: 'Press Start 2P', 'Courier New', monospace; --font-pixel: 'VT323', 'Courier New', monospace; --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* ─── Relieves reutilizables ─────────────────────────────── */ /* Bloque saliente (botón, tarjeta) */ --bevel-out: inset 0 var(--px) 0 0 var(--bevel-light), inset var(--px) 0 0 0 var(--bevel-light), inset 0 calc(-1 * var(--px)) 0 0 var(--bevel-dark), inset calc(-1 * var(--px)) 0 0 0 var(--bevel-dark); /* Bloque hundido (input, barra de progreso, botón presionado) */ --bevel-in: inset 0 var(--px) 0 0 var(--bevel-dark), inset var(--px) 0 0 0 var(--bevel-dark), inset 0 calc(-1 * var(--px)) 0 0 var(--bevel-light), inset calc(-1 * var(--px)) 0 0 0 var(--bevel-light); /* Contorno negro duro que envuelve cualquier bloque */ --outline-ring: 0 0 0 var(--px) var(--outline); /* Contorno "a escala de chip": tags, avatares, stat-blocks. Más fino que --outline-ring a propósito — son compartimentos chicos dentro de un bloque más grande, no el bloque en sí. */ --chip-ring: 0 0 0 2px var(--outline); /* Sombra proyectada en escalones (nada de blur difuso) */ --drop: var(--px) var(--px) 0 0 rgba(0, 0, 0, 0.45); --drop-lg: calc(var(--px) * 2) calc(var(--px) * 2) 0 0 rgba(0, 0, 0, 0.5); /* ─── Marco tipo cuadro ─────────────────────────────────────── Tres anillos concéntricos: contorno negro, banda gris con luz arriba, y otro contorno negro. Es la estructura de los menús de Minecraft: el contenido queda HUNDIDO dentro de un marco grueso, no simplemente rodeado por una línea. ------------------------------------------------------------ */ --frame-ring: 0 0 0 var(--px) var(--outline), 0 0 0 calc(var(--px) * 3) var(--frame), 0 0 0 calc(var(--px) * 4) var(--outline); --frame-ring-lg: 0 0 0 var(--px) var(--outline), 0 0 0 calc(var(--px) * 4) var(--frame), 0 0 0 calc(var(--px) * 5) var(--outline); /* Compartimento hundido: lo que va DENTRO del marco. */ --slot-in: 0 0 0 var(--px) var(--outline), inset 0 var(--px) 0 0 var(--bevel-dark), inset var(--px) 0 0 0 var(--bevel-dark), inset 0 calc(-1 * var(--px)) 0 0 var(--bevel-light), inset calc(-1 * var(--px)) 0 0 0 var(--bevel-light); /* Sombra dura del texto pixel — la firma tipográfica de Minecraft. */ --text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.8); --text-shadow-sm: 1px 1px 0 rgba(0, 0, 0, 0.8); /* Grilla de bloques del fondo. */ --grid-line: rgba(255, 255, 255, 0.018); --grid-glow: rgba(var(--grass-rgb), 0.06); /* Fondo de los huecos hundidos (etiquetas, bandejas, casillas). En oscuro es negro translúcido; en claro tiene que ACLARAR, o quedan parches negros sobre superficies blancas. */ --inset: rgba(0, 0, 0, 0.4); --inset-soft: rgba(0, 0, 0, 0.28); /* Fondo del hero de la pantalla de acceso: paisaje al atardecer. */ --hero-bg: linear-gradient(180deg, rgba(20, 20, 26, 0.55), rgba(20, 20, 26, 0.9)), linear-gradient(160deg, #1E3A14 0%, #14141A 55%, #1A2634 100%); /* Franja de "pasto y tierra" al pie del hero — puramente decorativa, así que vive entera acá y no como literales sueltos en auth.css. Un tema sin identidad Minecraft simplemente la apaga con 'none'. */ --hero-landscape: linear-gradient(90deg, transparent 0 6%, rgba(var(--grass-rgb), 0.5) 6% 22%, transparent 22% 34%, rgba(var(--grass-rgb), 0.35) 34% 55%, transparent 55% 62%, rgba(var(--grass-rgb), 0.5) 62% 88%, transparent 88%), linear-gradient(0deg, rgba(139, 97, 68, 0.45), transparent); /* ─── Tokens de componente ─────────────────────────────────── Un puñado de casos puntuales que antes hardcodeaban su color: el botón de Google (mantiene su pill clara en los dos modos, como pide la guía de marca de Google), el texto sobre el botón de peligro, y el degradé de la barra de XP. */ --google-btn-bg: #F2F2F5; --google-btn-ink: #14141A; --btn-danger-ink: var(--on-redstone); --xp-fill-bg: linear-gradient(180deg, var(--grass-bright) 0%, var(--grass) 55%, var(--grass-deep) 100%); /* ─── Esquinas ───────────────────────────────────────────── El bloque recto es la identidad de este tema: 0 en los cuatro tamaños, a propósito. */ --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --radius-pill: 0px; /* ─── Superficie del reproductor de cápsulas ──────────────── Pixel ya nace oscuro (--panel es piedra sobre fondo cueva), así que el reproductor no necesita una superficie aparte: reusa el panel normal. */ --modal-bg: var(--panel); --modal-bg-2: var(--panel-2); --modal-ink: var(--ink); --modal-ink-2: var(--ink-2); --modal-muted: var(--muted); --modal-border: var(--outline); } /* ─── Acento por categoría ──────────────────────────────────── Se aplica con data-category en cualquier contenedor y se hereda hacia abajo: la tarjeta, el chip y el borde toman el color solos. ------------------------------------------------------------ */ /* "Todas" no es una categoría: va en gris, no en el verde por defecto. */ [data-category='all'] { --accent: var(--iron); --accent-ink: var(--cat-offboarding-ink); --on-accent: #12181D; } [data-category='onboarding'] { --accent: var(--cat-onboarding); --accent-ink: var(--cat-onboarding-ink); --on-accent: #0E2408; } [data-category='lideres'] { --accent: var(--cat-lideres); --accent-ink: var(--cat-lideres-ink); --on-accent: #221A00; } [data-category='ia'] { --accent: var(--cat-ia); --accent-ink: var(--cat-ia-ink); --on-accent: #052326; } [data-category='speakers'] { --accent: var(--cat-speakers); --accent-ink: var(--cat-speakers-ink); --on-accent: #1B0B2B; } [data-category='blandas'] { --accent: var(--cat-blandas); --accent-ink: var(--cat-blandas-ink); --on-accent: #2B1006; } [data-category='offboarding'] { --accent: var(--cat-offboarding); --accent-ink: var(--cat-offboarding-ink); --on-accent: #12181D; } /* ============================================================ PIXEL — MODO CLARO ------------------------------------------------------------ Solo se redefinen SUPERFICIES, TINTA y BORDES, más las variantes -ink y los washes RGB (que dependen del fondo sobre el que caen). Los "materiales" valen igual en los dos modos. ============================================================ */ :root[data-theme='pixel'][data-mode='light'] { /* ─── Superficies ─────────────────────────────────────── */ --bg: #DEDEE6; --bg-2: #D2D2DC; --panel: #F1F1F5; --panel-2: #FFFFFF; --panel-3: #E3E3EB; --overlay: rgba(20, 20, 26, 0.62); /* ─── Texto ───────────────────────────────────────────── */ --ink: #14141A; --ink-2: #2E2E3A; --muted: #55555F; /* 6.7:1 sobre --panel */ --placeholder: #6C6C78; --ink-inverse: #F2F2F5; /* ─── Bordes y relieve ────────────────────────────────── */ /* El contorno sigue siendo oscuro y duro: es lo que sostiene la lectura de "bloque". Sin él, en claro todo se desarma. */ --outline: #2B2B38; --outline-rgb: 43, 43, 56; --frame: #B6B6C4; /* el gris del marco de los menús */ --frame-light: #D4D4DE; --bevel-light: rgba(255, 255, 255, 0.92); --bevel-dark: rgba(0, 0, 0, 0.24); --line: #C2C2CE; /* ─── Tinta de los acentos ────────────────────────────── */ --grass-ink: #2E6B1C; --gold-ink: #7A5C00; --diamond-ink: #0E6E77; --danger-ink: #B3312E; --success-ink: #2E6B1C; --warning-ink: #7A5C00; --cat-onboarding-ink: #2E6B1C; --cat-lideres-ink: #7A5C00; --cat-ia-ink: #0E6E77; --cat-speakers-ink: #6231A3; --cat-blandas-ink: #9C4520; --cat-offboarding-ink: #4A5560; /* ─── Dificultad ──────────────────────────────────────── */ --diff-basico: #2E6B1C; --diff-intermedio: #7A5C00; --diff-avanzado: #9C4520; /* La sombra del texto pixel se vuelve un halo claro: una sombra negra sobre fondo claro ensucia en vez de dar relieve. */ --text-shadow: 2px 2px 0 rgba(255, 255, 255, 0.85); --text-shadow-sm: 1px 1px 0 rgba(255, 255, 255, 0.85); --drop: var(--px) var(--px) 0 0 rgba(0, 0, 0, 0.2); --drop-lg: calc(var(--px) * 2) calc(var(--px) * 2) 0 0 rgba(0, 0, 0, 0.24); --grid-line: rgba(0, 0, 0, 0.035); --grid-glow: rgba(var(--grass-rgb), 0.1); --inset: rgba(0, 0, 0, 0.07); --inset-soft: rgba(0, 0, 0, 0.05); --hero-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.25), rgba(210, 210, 220, 0.55)), linear-gradient(160deg, #A8D48E 0%, #CFE4F2 55%, #E8E8EE 100%); } /* En claro, el texto sobre relleno de acento necesita más contraste: los tonos oscuros del tema oscuro quedan sucios sobre estos rellenos. */ :root[data-theme='pixel'][data-mode='light'] [data-category='offboarding'] { --on-accent: #12181D; }