/* ============================================================ BALAM OS v2 — tokens y componentes base Copiado de BALAM-DESIGN-SYSTEM.md §2, §3 y §4 (adaptado donde el propio documento lo permite: perillas de ajuste, sección 9). No editar valores sueltos: todo cambio de marca va en los tokens. ============================================================ */ :root{ /* --- Superficie: contenedor y fondo comparten color base --- */ --bg: #e6eaf0; --surface: #e6eaf0; --surface-alt: #eceff5; /* Placa fija (no cambia con el tema): los logotipos a color de IPN/ESIME están diseñados sobre blanco/claro. En tema oscuro se les pone esta superficie clara detrás para que se lean bien. */ --plate-logo: #e6eaf0; --sh-dark: rgba(160,174,196,.60); --sh-light: rgba(255,255,255,.92); --elev: 0 10px 34px rgba(20,28,40,.16); /* --- Texto (AA >= 4.5:1 sobre --surface) --- */ --text: #38414f; --text-soft: #505b6b; --text-faint: #5e6979; /* --- Acento: colores oficiales IPN/ESIME, ajustados solo en luminosidad para pasar AA (mismo matiz que el oficial; ver CLAUDE.md §Colores) --- */ --accent: #4f7159; /* verde ESIME oficial #577d63, oscurecido a 4.53:1 sobre --surface claro */ --accent-2: #7a1536; /* guinda IPN oficial, sin ajuste: ya pasa AA (8.75:1) sobre --surface claro */ --danger: #a8474b; --warn: #8a5b1b; --ok: #2c7357; --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); --accent-2-soft: color-mix(in srgb, var(--accent-2) 14%, transparent); /* --accent-2 ya da 4.5:1+ contra --surface plano, pero el encabezado es vidrio translúcido (.glass) sobre --surface, un poco más oscuro en tema oscuro: ahí --accent-2 solo llega a ~4.4:1. En claro no hace falta ajuste (por eso aquí es igual a --accent-2); se corrige solo en el bloque [data-theme="dark"]. Único uso: la línea de la Coordinación en el encabezado. */ --accent-2-on-glass: var(--accent-2); --danger-soft: color-mix(in srgb, var(--danger) 30%, transparent); --warn-soft: color-mix(in srgb, var(--warn) 22%, transparent); --ok-soft: color-mix(in srgb, var(--ok) 30%, transparent); /* --- Guinda sólido: bloque de marca fijo (pie de página), no cambia con el tema. El guinda oficial ya da 10.56:1 con texto blanco en cualquier fondo, así que no necesita la variante clara de --accent-2. --- */ --accent-2-solid: #7a1536; --accent-2-solid-ink: #ffffff; /* --- Azul oscuro IPN sólido: fijo, no cambia con el tema (igual que el guinda de arriba). Uso único: la banda del nombre de la carrera en la portada — no se reutiliza en ningún otro elemento del sitio. --accent-3-hi / --accent-3-lo son el mismo matiz, solo con la luminosidad movida (+12 / -10 puntos vía HSL), para el degradado de la banda. Contraste con blanco: --accent-3-hi 8.26:1 (extremo más claro), --accent-3 12.14:1, --accent-3-lo 16.07:1 — los tres pasan AA con margen amplio. */ --accent-3: #343254; --accent-3-hi: #4c497a; --accent-3-lo: #201f34; --accent-3-ink: #ffffff; /* --- Vidrio --- */ --glass-bg: rgba(255,255,255,.42); --glass-brd: rgba(255,255,255,.65); --glass-blur: blur(20px) saturate(180%); /* --- Geometría --- */ --r-xs: 9px; --r-sm: 12px; --r-md: 18px; --r-lg: 28px; --r-pill: 999px; /* --- Contorno de lectura (4:1 sobre --surface) --- */ --edge: #667181; --edge-w: 1.5px; --ring: 0 0 0 var(--edge-w) var(--edge); /* --- Contorno de tarjetas: --edge con tinte de --accent (65%), para que se lea verde y no gris. Pasa >=3:1 en ambos temas (4.39:1 claro / 5.95:1 oscuro). Solo para .card — botones y navbar siguen con --edge. --- */ --edge-card: color-mix(in srgb, var(--accent) 65%, var(--edge)); --ring-card: 0 0 0 var(--edge-w) var(--edge-card); /* --- Profundidad (perilla maestra: --d) --- */ --d: 6px; --b: calc(var(--d) * 2.3); --neu-out: var(--d) var(--d) var(--b) var(--sh-dark), calc(var(--d) * -1) calc(var(--d) * -1) var(--b) var(--sh-light), var(--ring); --neu-out-sm: 3px 3px 7px var(--sh-dark), -3px -3px 7px var(--sh-light), var(--ring); --neu-out-card: var(--d) var(--d) var(--b) var(--sh-dark), calc(var(--d) * -1) calc(var(--d) * -1) var(--b) var(--sh-light), var(--ring-card); /* Realce al pasar el cursor (solo .card): eleva un poco más la sombra y el contorno pasa al --accent completo (no la mezcla --edge-card). */ --neu-out-card-hover: calc(var(--d) + 2px) calc(var(--d) + 2px) calc(var(--b) + 8px) var(--sh-dark), calc((var(--d) + 2px) * -1) calc((var(--d) + 2px) * -1) calc(var(--b) + 8px) var(--sh-light), 0 0 0 var(--edge-w) var(--accent); --neu-in: inset 5px 5px 10px var(--sh-dark), inset -5px -5px 10px var(--sh-light); --neu-in-sm: inset 3px 3px 6px var(--sh-dark), inset -3px -3px 6px var(--sh-light); /* --- Movimiento --- */ --ease: cubic-bezier(.2,.8,.2,1); --dur: .4s; --t: var(--dur) var(--ease); --t-fast: calc(var(--dur) * .55) var(--ease); --bounce: cubic-bezier(.34,1.56,.64,1); /* --- Ritmo --- */ --sp-1: 6px; --sp-2: 12px; --sp-3: 18px; --sp-4: 26px; --sp-5: 40px; --sp-6: 64px; /* --- Tipografía --- */ --font: "Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --mono: "JetBrains Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace; } [data-theme="dark"]{ --bg: #1c2026; --surface: #1c2026; --surface-alt: #222730; --sh-dark: rgba(0,0,0,.62); --sh-light: rgba(255,255,255,.055); --elev: 0 12px 36px rgba(0,0,0,.45); --edge: #7a8391; --text: #d6dce5; --text-soft: #a3adba; --text-faint: #8a95a3; --accent: #90b29a; /* verde ESIME aclarado: 7.0:1 como texto y 4.75:1 con tinta oscura de botón sobre --surface oscuro */ --accent-2: #e35e8a; /* guinda IPN aclarado: 4.86:1 sobre --surface oscuro */ --accent-2-on-glass: #e66b93; /* mismo matiz, un poco más claro: 4.87:1 sobre el vidrio del encabezado (~#23282f compuesto), no solo sobre --surface plano */ --danger: #e07b7f; --warn: #e3ad62; --ok: #5cb894; --glass-bg: rgba(40,46,55,.55); --glass-brd: rgba(255,255,255,.09); } /* ---------- Base y primitivas (§3) ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--font); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; transition:background var(--t), color var(--t); } h1,h2,h3{ margin:0; font-weight:650; letter-spacing:-.02em; line-height:1.2; } h3{ font-size:14px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-faint); font-weight:600; } p{ margin:0; color:var(--text-soft); } code{ font-family:var(--mono); font-size:.85em; } ::selection{ background:var(--accent-soft); } :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; } .neu-out{ background:var(--surface); box-shadow:var(--neu-out); } .neu-in { background:var(--surface); box-shadow:var(--neu-in); } .glass{ background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur); backdrop-filter:var(--glass-blur); border:1px solid var(--glass-brd); } @keyframes shake{ 0%,100%{ transform:translateX(0); } 18%{ transform:translateX(-7px); } 38%{ transform:translateX(6px); } 58%{ transform:translateX(-4px); } 78%{ transform:translateX(3px); } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* ---------- 4.1 Contenedor / tarjeta ---------- */ .card{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--neu-out-card); padding:var(--sp-4); transition:box-shadow var(--t), transform var(--t); } @media (hover:hover){ .card:hover{ transform:translateY(-4px); box-shadow:var(--neu-out-card-hover); } } /* La regla global de prefers-reduced-motion ya frena la transición, pero el transform final seguiría aplicando de golpe: aquí se anula el movimiento y solo queda el cambio de contorno/sombra. */ @media (hover:hover) and (prefers-reduced-motion:reduce){ .card:hover{ transform:none; } } .label{ font-size:12px; color:var(--text-faint); text-transform:uppercase; letter-spacing:.1em; font-weight:600; margin-bottom:var(--sp-2); display:block; } /* ---------- 4.2 NavBar flotante (Liquid Glass) ---------- Adaptado por pedido explícito de Diego: fija ARRIBA (no abajo) y con el texto de cada botón SIEMPRE visible (se retira la regla original que ocultaba `.txt` bajo 640px). El indicador deslizante y el scroll-spy se mantienen igual que en el documento base. */ .navbar{ position:relative; display:flex; align-items:center; gap:4px; padding:6px; border-radius:var(--r-pill); box-shadow:var(--elev), var(--neu-out-sm); max-width:100%; overflow-x:auto; scrollbar-width:none; } .navbar::-webkit-scrollbar{ display:none; } .nav-indicator{ position:absolute; top:6px; bottom:6px; left:0; width:0; border-radius:var(--r-pill); background:var(--accent-soft); box-shadow:var(--neu-in-sm); transition:transform var(--t), width var(--t); pointer-events:none; } .nav-btn{ position:relative; z-index:1; border:0; background:transparent; cursor:pointer; padding:10px 16px; border-radius:var(--r-pill); font:inherit; font-size:13.5px; font-weight:550; color:var(--text-soft); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; text-decoration:none; transition:color var(--t), transform var(--t); } .nav-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; } @media (hover:hover){ .nav-btn:hover{ color:var(--text); } } .nav-btn:active{ transform:scale(.94); } .nav-btn.is-active{ color:var(--accent); } /* ---------- 4.3 Botones ---------- */ .btn{ border:0; cursor:pointer; font:inherit; font-size:15px; font-weight:550; color:var(--text-soft); background:var(--surface); padding:14px 24px; border-radius:var(--r-md); box-shadow:var(--neu-out); display:inline-flex; align-items:center; justify-content:center; gap:10px; transition:all var(--t); text-decoration:none; } .btn svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:stroke var(--t), transform var(--t); flex:none; } @media (hover:hover){ .btn:hover{ color:var(--accent); transform:translateY(-1px); } .btn:hover svg{ transform:translateY(-1px); } } .btn:active{ box-shadow:var(--neu-in), var(--ring); transform:scale(.96); color:var(--accent); } .btn.is-pressed{ box-shadow:var(--neu-in), var(--ring); color:var(--accent); } .btn--pill{ border-radius:var(--r-pill); } .btn--icon{ padding:13px; border-radius:50%; } .btn--accent{ color:#fff; background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 78%, #000)); } @media (hover:hover){ .btn--accent:hover{ color:#fff; filter:brightness(1.06); } } .btn--accent:active{ box-shadow:var(--neu-in-sm), var(--ring); } [data-theme="dark"] .btn--accent{ color:#0e1a1d; } [data-theme="dark"] .btn--accent:active{ color:#0e1a1d; } @media (hover:hover){ [data-theme="dark"] .btn--accent:hover{ color:#0e1a1d; } } .btn--ghost{ box-shadow:none; background:transparent; } @media (hover:hover){ .btn--ghost:hover{ box-shadow:var(--neu-out-sm); } } .btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; } /* ---------- 4.10 Panel de vidrio / KPI ---------- */ .glass-stage{ position:relative; border-radius:var(--r-lg); overflow:hidden; padding:var(--sp-5); background: radial-gradient(120px 120px at 18% 30%, var(--accent) 0%, transparent 62%), radial-gradient(160px 160px at 78% 68%, var(--accent-2) 0%, transparent 60%), var(--surface-alt); box-shadow:var(--neu-in); } .kpi{ font-size:34px; font-weight:650; letter-spacing:-.03em; color:var(--text); } .kpi small{ font-size:13px; font-weight:500; color:var(--text-soft); margin-left:6px; } /* ---------- 4.11 Toast ---------- */ .toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%,14px); padding:11px 20px; border-radius:var(--r-pill); font-size:13px; font-weight:550; color:var(--text); opacity:0; pointer-events:none; z-index:80; transition:opacity var(--t), transform var(--t); box-shadow:var(--elev); } .toast.show{ opacity:1; transform:translate(-50%,0); } /* ---------- 4.12 Chip ---------- */ .chip{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; padding:6px 14px; border-radius:var(--r-pill); color:var(--text-soft); background:var(--surface); box-shadow:var(--neu-out-sm); } .chip::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.55; } /* ---------- 4.14 Modal (vidrio flotante) ---------- */ .modal{ border:0; padding:var(--sp-4); border-radius:var(--r-lg); color:var(--text); width:min(720px, calc(100vw - 32px)); box-shadow:var(--elev), var(--neu-out-sm); opacity:0; transform:translateY(12px) scale(.98); background:var(--surface); transition:opacity var(--t), transform var(--t), overlay var(--t) allow-discrete, display var(--t) allow-discrete; } .modal[open]{ opacity:1; transform:none; } @starting-style{ .modal[open]{ opacity:0; transform:translateY(12px) scale(.98); } } .modal::backdrop{ background:rgba(20,28,40,.28); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); } /* ---------- Tooltip (4.15), por si se necesita en el futuro ---------- */ [data-tip]{ position:relative; } [data-tip]::after{ content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 10px); transform:translate(-50%,4px); white-space:nowrap; pointer-events:none; font-size:12px; font-weight:550; color:var(--text); padding:6px 12px; border-radius:var(--r-sm); background:var(--surface); box-shadow:var(--elev), var(--neu-out-sm); opacity:0; transition:opacity var(--t-fast), transform var(--t-fast); } @media (hover:hover){ [data-tip]:hover::after{ opacity:1; transform:translate(-50%,0); } } [data-tip]:focus-visible::after{ opacity:1; transform:translate(-50%,0); } /* ---------- 4.4 Inputs ---------- */ .input{ border:0; outline:0; font:inherit; color:var(--text); background:var(--surface); border-radius:var(--r-md); padding:14px 16px; width:100%; box-shadow:var(--neu-in); transition:box-shadow var(--t), color var(--t); } .input::placeholder{ color:var(--text-faint); } .input:focus{ box-shadow:var(--neu-in), 0 0 0 2px var(--accent-soft); } textarea.input{ resize:vertical; font-family:inherit; } /* Safari (y otros) ignoran background/box-shadow del