/* ========================================================================== 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); } } /* ----------------------------------------- */ /* Landing */ /* ----------------------------------------- */ /* === Landing (Home) === */ .hero-gradient { background: radial-gradient( 800px 480px at 100% -10%, rgba(var(--bs-primary-rgb), 0.18), transparent 60% ), radial-gradient( 700px 400px at -10% 120%, rgba(0, 169, 157, 0.18), transparent 60% ), var(--surface); } .bg-subtle { background: var(--bs-tertiary-bg); } /* Banner competencias */ .banner-comp .cd-num { font-size: clamp(24px, 5vw, 36px); font-weight: 800; padding: 0.25rem 0.5rem; border-radius: 0.5rem; background: var(--bs-tertiary-bg); display: inline-block; min-width: 52px; text-align: center; } .banner-comp .ratio img, .hero-gradient .ratio img { filter: saturate(1.05) contrast(1.02); } /* Utilidades */ .fw-extrabold { font-weight: 900; } .object-fit-cover { object-fit: cover; } /* Mejoras de modal video en dark */ .modal-content.bg-black { background: #000; } .element { box-shadow: inset -8px -9px 28px 0px rgba(19, 97, 197, 0.95); } /* --- Estilo para el plan VIP --- */ .vip-card { border: 2px solid #d4af37; /* dorado metálico */ background: linear-gradient(180deg, #fffef8, #fff7e6); box-shadow: 0 0 25px rgba(212,175,55,0.3); transition: all 0.3s ease-in-out; } .vip-card:hover { transform: translateY(-6px); box-shadow: 0 0 40px rgba(212,175,55,0.45); } .vip-badge { background: #fff8dc; border: 2px solid #d4af37; padding: 4px 10px; border-radius: 25px; box-shadow: 0 0 10px rgba(212,175,55,0.4); animation: shine 3s infinite ease-in-out; } .vip-divider { height: 3px; width: 60%; background: linear-gradient(90deg, transparent, #d4af37, transparent); border-radius: 50%; } .glow-gold { color: #d4af37 !important; text-shadow: 0 0 10px rgba(212,175,55,0.6), 0 0 20px rgba(212,175,55,0.4); } @keyframes shine { 0%,100% { box-shadow: 0 0 10px rgba(212,175,55,0.4); } 50% { box-shadow: 0 0 25px rgba(212,175,55,0.8); } } /* Card base */ .plan-card{ background:#fff; border-radius:16px; border:1px solid #e6e9ef; padding:28px; box-shadow:0 8px 20px rgba(0,0,0,.06); transition:transform .25s ease, box-shadow .25s ease; } .plan-card:hover{ transform:translateY(-6px); box-shadow:0 14px 30px rgba(0,0,0,.12); } /* Badge superior */ .plan-badge{ display:inline-block; background:#eef5ff; color:#0057a4; font-weight:700; padding:6px 14px; border-radius:999px; margin-bottom:10px; font-size:.85rem; } .badge-popular{ background:#eafbf5; color:#00a99d; } /* Básico (borde azul) */ .basic-card{ border:2px solid #dbe7f8; background:linear-gradient(180deg,#ffffff, #fafdff); } /* Plus (borde verde-azulado) */ .plus-card{ border:2px solid #cfeee7; background:linear-gradient(180deg,#ffffff, #f6fffb); } /* VIP (dorado) */ .vip-card{ border:2px solid #d4af37; background:linear-gradient(180deg,#fffef8,#fff7e6); box-shadow:0 0 25px rgba(212,175,55,.3); } .vip-card:hover{ box-shadow:0 0 40px rgba(212,175,55,.45); } .vip-badge{ background:#fff8dc; border:2px solid #d4af37; color:#7a5c00; padding:4px 12px; border-radius:999px; top:-18px; box-shadow:0 0 12px rgba(212,175,55,.35); display:flex; align-items:center; gap:6px; animation:shine 3s infinite ease-in-out; } .vip-badge .bi-star-fill{ color:#d4af37; } .vip-divider{ height:3px; width:60%; background:linear-gradient(90deg,transparent,#d4af37,transparent); border-radius:999px; opacity:.9; } .glow-gold{ color:#d4af37!important; text-shadow:0 0 10px rgba(212,175,55,.55), 0 0 20px rgba(212,175,55,.35); } @keyframes shine{ 0%,100%{ box-shadow:0 0 12px rgba(212,175,55,.35) } 50%{ box-shadow:0 0 24px rgba(212,175,55,.8) } }