/* ============================================================ main.css — EUREKA / SIGE Hoja COMPARTIDA: tokens de marca + componentes reutilizables + estilos de las páginas públicas (login, index/landing). IMPORTANTE: debe cargarse SIEMPRE antes que dashboard.css en cualquier página que use ambas (ver nota sobre .topbar abajo). ============================================================ */ :root { --navy: #034883; --navy-light: #356D9C; --navy-dark: #022F55; --gold: #DBC35E; --gold-soft: #E2CF7E; --cream: #F6F4EF; --ink: #1F2937; --slate: #5B6472; --slate-light: #9AA3AF; --error-bg: #FBE7E9; --error-text: #8A1F2B; --error-border: #E7B4BA; } body { font-family: 'Source Sans 3', sans-serif; color: var(--ink); background: var(--cream); } h1, h2, h3, .wordmark { font-family: 'Zilla Slab', serif; } /* ---------- Wordmark (usado en TODAS las páginas) ---------- */ .wordmark { font-weight: 700; letter-spacing: 0.01em; text-decoration: none; display: inline-flex; } .wordmark span { color: var(--navy); } .wordmark span.letter-u { color: var(--gold); } /* ---------- Barra superior de contacto (SOLO páginas públicas) ---------- OJO: esta clase se llama igual que la barra de usuario del panel admin (definida en dashboard.css). Cuando ambas hojas se cargan juntas (páginas del panel), dashboard.css debe ir DESPUÉS de este archivo en el para que su versión gane. Nunca inviertas ese orden. */ .topbar { background: var(--navy-dark); color: #D9E1EE; font-size: 0.8125rem; } .topbar a, .topbar span { color: #D9E1EE; text-decoration: none; } .topbar a:hover { color: var(--gold-soft); } .site-header { background: #fff; border-bottom: 1px solid #E7E4DB; } .navbar-nav .nav-link { color: var(--slate); font-weight: 600; font-size: 0.95rem; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--navy); } .header-nav a { color: var(--slate); text-decoration: none; font-weight: 600; font-size: 0.95rem; } .header-nav a:hover { color: var(--navy); } /* ---------- Botones de marca (usados en TODAS las páginas) ---------- .btn-eureka es alias de .btn-eureka-navy por compatibilidad con páginas que hayan quedado con el nombre corto (ej. login). */ .btn-eureka, .btn-eureka-navy { background: var(--navy); color: #fff; border: none; padding: 0.75rem 1rem; } .btn-eureka:hover, .btn-eureka:focus, .btn-eureka-navy:hover, .btn-eureka-navy:focus { background: var(--navy-light); color: #fff; } .btn-eureka:focus-visible, .btn-eureka-navy:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; } .btn-outline-eureka { border: 1px solid var(--navy); color: var(--navy); background: transparent; } .btn-outline-eureka:hover { background: var(--navy); color: #fff; } .btn-eureka-gold { background: var(--gold); color: var(--navy-dark); border: none; } .btn-eureka-gold:hover { background: var(--gold-soft); color: var(--navy-dark); } .btn-outline-gold { border: 1px solid var(--gold); color: var(--gold); background: transparent; } .btn-outline-gold:hover { background: var(--gold); color: var(--navy-dark); } /* ---------- Alertas (login, formularios de registro/edición) ---------- */ .alert-eureka { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text); font-size: 0.875rem; border-radius: 0.5rem; } /* ---------- Badge / etiqueta distintiva ---------- */ .badge-tag { background: var(--gold); color: var(--navy-dark); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.4rem 1rem; border-radius: 999px; max-width: 18rem; line-height: 1.35; display: inline-block; } /* ---------- Regla dorada decorativa ---------- .rule y .rule-gold son el mismo estilo bajo dos nombres, por si alguna página quedó usando el nombre corto. */ .rule, .rule-gold { height: 3px; width: 46px; background: var(--gold); border-radius: 2px; } /* ---------- Formularios (usado en TODAS las páginas con
) ---------- */ .form-label { font-size: 0.8125rem; font-weight: 600; color: var(--slate); } .form-control, .form-select { border: 1.5px solid #D9DEE4; border-radius: 0.25rem; padding: 0.65rem 0.9rem; } .form-control:focus, .form-select:focus { border-color: var(--gold); box-shadow: 0 0 0 0.2rem rgba(219, 195, 94, 0.35); } .toggle-password { color: var(--slate); font-size: 0.78rem; font-weight: 600; background: none; border: none; } .toggle-password:hover { color: var(--navy); } .toggle-password:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } .forgot-link a { color: var(--navy); font-size: 0.875rem; font-weight: 600; text-decoration: none; } .forgot-link a:hover { text-decoration: underline; } .card-footnote { border-top: 1px solid #EDEBE3; font-size: 0.75rem; color: var(--slate-light); } /* ============================================================ Solo página de login ============================================================ */ .login-stage { flex: 1; position: relative; overflow: hidden; } .bg-image { position: absolute; inset: 0; background-image: linear-gradient(160deg, rgba(14,33,64,0.94) 0%, rgba(23,51,92,0.88) 45%, rgba(44,77,128,0.85) 100%); background-size: cover; background-position: center; z-index: 0; } .login-card { position: relative; z-index: 1; background: #fff; border-radius: 0.65rem; box-shadow: 0 24px 60px -20px rgba(14, 33, 64, 0.35), 0 4px 14px -4px rgba(14, 33, 64, 0.15); } .card-brand .wordmark { font-size: 2.2rem; } /* ============================================================ Solo página index (landing pública) ============================================================ */ .hero { position: relative; overflow: hidden; background-image: linear-gradient(160deg, rgba(14,33,64,0.96) 0%, rgba(23,51,92,0.92) 45%, rgba(44,77,128,0.9) 100%); color: #fff; padding: 5.5rem 0 6rem; } .hero .eyebrow { color: var(--gold-soft); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; } .hero h1 { font-size: 2.6rem; font-weight: 700; line-height: 1.15; } .hero p.lead { color: #D9E1EE; font-size: 1.15rem; max-width: 40rem; } section { padding: 4.5rem 0; } .section-eyebrow { color: var(--gold); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; } .section-title { font-weight: 700; color: var(--navy); margin-top: 0.35rem; } .bg-cream { background: var(--cream); } .course-card { border: 1px solid #E7E4DB; border-radius: 0.65rem; padding: 1.75rem; height: 100%; transition: box-shadow 0.15s ease, transform 0.15s ease; } .course-card:hover { box-shadow: 0 16px 34px -18px rgba(14,33,64,0.35); transform: translateY(-3px); } .course-card .module-tag { display: inline-block; background: var(--cream); color: var(--navy); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.65rem; border-radius: 999px; margin-bottom: 0.75rem; } .course-card h3 { font-size: 1.15rem; color: var(--navy); } .course-card p { color: var(--slate); font-size: 0.9rem; } .calendar-card { border-left: 4px solid var(--gold); background: #fff; border-radius: 0.5rem; padding: 1.25rem 1.5rem; box-shadow: 0 4px 14px -8px rgba(14,33,64,0.2); } .calendar-card .period-name { color: var(--navy); font-weight: 700; } .calendar-card .period-dates { color: var(--slate); font-size: 0.9rem; } .testimonial-card { background: #fff; border: 1px solid #E7E4DB; border-radius: 0.65rem; padding: 1.75rem; height: 100%; } .testimonial-card .quote-mark { color: var(--gold); font-size: 2rem; line-height: 1; font-family: 'Zilla Slab', serif; } .testimonial-card p.quote { color: var(--ink); font-size: 0.95rem; } .testimonial-card .student-name { color: var(--navy); font-weight: 700; font-size: 0.9rem; } .testimonial-card .student-detail { color: var(--slate-light); font-size: 0.8rem; } .contact-info-item { display: flex; gap: 0.85rem; align-items: flex-start; margin-bottom: 1.25rem; } .contact-info-item .icon { width: 2.25rem; height: 2.25rem; background: var(--cream); color: var(--navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; } .contact-info-item strong { color: var(--navy); display: block; font-size: 0.9rem; } .contact-info-item span { color: var(--slate); font-size: 0.9rem; } .map-placeholder { background: var(--cream); border: 1px dashed #C9C4B4; border-radius: 0.65rem; min-height: 220px; display: flex; align-items: center; justify-content: center; color: var(--slate-light); font-size: 0.9rem; text-align: center; padding: 1rem; } footer { background: var(--navy-dark); color: #B9C4D6; } footer a { color: #D9E1EE; text-decoration: none; } footer a:hover { color: var(--gold-soft); } footer h6 { color: #fff; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; } .footer-rule { border-top: 1px solid rgba(255,255,255,0.12); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }