/* ========================================================================== MONOVA UI — Dark por defecto + Light opcional (Bootstrap 5.3.8) Usa data-bs-theme en y variables de BS. Sin redundancias. ========================================================================== */ /* ---------- Paleta de marca (solo para acentos propios) ---------- */ :root { --brand-blue: #0057a4; --brand-yellow: #ffd23f; --brand-red: #e53935; --brand-green: #00a99d; --radius: 14px; --shadow-dark: 0 10px 24px rgba(0, 0, 0, 0.5); --shadow-light: 0 10px 24px rgba(0, 0, 0, 0.08); } /* ---------- Mapas por tema (derivados de variables Bootstrap) ---------- */ /* Dark (default) */ :root, :root[data-bs-theme="dark"] { --surface: var(--bs-body-bg); --ink: var(--bs-body-color); --ink-soft: var(--bs-secondary-color); --border-strong: var(--bs-border-color); --shadow: var(--shadow-dark); --focus-ring: rgba(var(--bs-primary-rgb), 0.25); --option-bg: var(--bs-body-bg); --option-border: var(--bs-border-color); --option-bg-active: rgba(var(--bs-primary-rgb), 0.14); --option-letter-bg: rgba(var(--bs-primary-rgb), 0.12); --option-letter-ink: color-mix(in oklab, var(--bs-primary) 70%, white); --progress-track: var(--bs-tertiary-bg); } /* Light */ :root[data-bs-theme="light"] { --surface: var(--bs-body-bg); --ink: var(--bs-body-color); --ink-soft: var(--bs-secondary-color); --border-strong: var(--bs-border-color); --shadow: var(--shadow-light); --focus-ring: rgba(var(--bs-primary-rgb), 0.15); --option-bg: #fff; --option-border: var(--bs-border-color); --option-bg-active: rgba(0, 169, 157, 0.08); --option-letter-bg: #eef6f6; --option-letter-ink: #035e57; --progress-track: var(--bs-tertiary-bg); } /* ====== Base ====== */ html, body { height: 100%; } body { color: var(--ink); background: radial-gradient( 1200px 800px at 80% -10%, rgba(var(--bs-primary-rgb), 0.12), transparent 60% ) var(--bs-body-bg); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; } /* ====== Utilidades ====== */ .text-soft { color: var(--ink-soft) !important; } /* Cards */ .card { border: 0; border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface); color: var(--ink); } .card-title { font-weight: 700; } /* Botones */ .btn { border-radius: 12px; font-weight: 600; } /* Primario con gradiente de marca (visual) */ .btn-primary { background: linear-gradient(180deg, var(--brand-blue), #004a8d); border: 0; } .btn-primary:hover { filter: brightness(0.95); } /* Outline neutral que respeta el tema (útil para "Nuevo examen") */ .btn-outline-secondary { --bs-btn-color: var(--bs-emphasis-color); --bs-btn-border-color: var(--bs-emphasis-color); --bs-btn-hover-color: var(--bs-body-bg); --bs-btn-hover-bg: var(--bs-emphasis-color); --bs-btn-hover-border-color: var(--bs-emphasis-color); --bs-btn-active-color: var(--bs-body-bg); --bs-btn-active-bg: var(--bs-emphasis-color); --bs-btn-active-border-color: var(--bs-emphasis-color); --bs-btn-disabled-color: var(--bs-secondary-color); --bs-btn-disabled-border-color: var(--bs-border-color); } .btn-outline-secondary.btn-sm { line-height: 1.25; } /* Acentos propios */ .badge-accent { background: var(--brand-yellow); color: #1b1b1b; font-weight: 700; } .btn-accent { background: var(--brand-red); color: #fff; } /* Inputs */ .form-control, .form-select { border-radius: 12px; border: 1px solid var(--border-strong); padding: 0.85rem 1rem; background: var(--surface); color: var(--ink); } .form-control::placeholder { color: var(--ink-soft); } .form-control:focus, .form-select:focus { box-shadow: 0 0 0 0.2rem var(--focus-ring); } /* Header simple */ .app-nav { background: var(--surface); border-bottom: 1px solid var(--bs-border-color); position: sticky; top: 0; z-index: 1020; } .brand-dot { width: 10px; height: 10px; border-radius: 50%; } .dot-blue { background: var(--brand-blue); } .dot-yellow { background: var(--brand-yellow); } .dot-red { background: var(--brand-red); } .dot-green { background: var(--brand-green); } /* KPI */ .kpi .value { font-size: clamp(24px, 4vw, 34px); font-weight: 800; } .kpi .label { color: var(--ink-soft); } /* Opción de pregunta */ .option { border: 1.5px solid var(--option-border); border-radius: 12px; padding: 12px 14px; cursor: pointer; user-select: none; transition: 0.18s ease; display: flex; gap: 12px; align-items: flex-start; background: var(--option-bg); color: var(--ink); } .option:hover { border-color: var(--brand-green); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06); } .option.active { border-color: var(--brand-green); background: linear-gradient( 0deg, var(--option-bg-active), var(--option-bg-active) ), var(--option-bg); } .option .letter { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; background: var(--option-letter-bg); color: var(--option-letter-ink); display: grid; place-items: center; font-weight: 700; } /* Progress */ .progress { height: 10px; border-radius: 999px; background: var(--progress-track); } .progress-bar { background: linear-gradient(90deg, var(--bs-success), var(--bs-primary)); } /* Footer (solo ajustes puntuales) */ .footer-logo img { max-width: 30px; max-height: 30px; transition: filter 0.2s ease; } /* Bordes coherentes con el tema */ .border-top { border-top-color: var(--bs-border-color) !important; } /* Soporte a clase personalizada (y typo) */ .border-top-light, .border-top-ligth { border-top: 1px solid var(--bs-border-color) !important; } /* ========== Botón/ícono flotante de tema ========== */ .theme-toggle { cursor: pointer; } .theme-toggle.fab { position: fixed; right: 18px; bottom: 18px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-emphasis-color); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18); backdrop-filter: blur(6px); z-index: 9999; transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .theme-toggle.fab:hover { transform: translateY(-1px); box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22); } .theme-toggle.fab:active { transform: translateY(0); } .theme-toggle.fab::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.35); animation: themePulse 2.4s infinite; pointer-events: none; } @keyframes themePulse { 0% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0.35); } 70% { box-shadow: 0 0 0 14px rgba(var(--bs-primary-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--bs-primary-rgb), 0); } }