/* ========================================================= Hormonalmente — hoja de estilos personalizada Construida sobre Bootstrap 5. Aquí solo viven los ajustes de marca (colores, tipografía y componentes propios). ========================================================= */ :root { --sop-primary: #0d6e6e; --sop-primary-dark: #094f4f; --sop-primary-light: #14a3a3; --sop-accent: #8b5fbf; --sop-accent-light: #f7f2fc; --sop-soft: #eaf6f6; --sop-bg: #f4f9f9; --sop-text: #23393a; /* Colores de marca fijos: no cambian entre modo claro/oscuro. Los usan el navbar, el hero, el pie de página y otros elementos que ya son de por sí oscuros/vivos y deben mantenerse estables. */ --brand-teal-dark: #094f4f; --brand-teal: #0d6e6e; --brand-teal-light: #14a3a3; --brand-purple: #8b5fbf; } /* ===== MODO OSCURO ===== Se activa poniendo data-bs-theme="dark" en (theme.js). Bootstrap 5.3 ya oscurece automáticamente cards, tablas, acordeones, list-groups, etc. Aquí solo redefinimos nuestras variables de marca (afectan también a los estilos inline que las usan en el HTML) y corregimos los pocos componentes con colores fijos que no siguen las variables. */ [data-bs-theme="dark"] { --sop-primary: #5fd1d1; --sop-primary-dark: #8be3e3; --sop-primary-light: #3fd0d0; --sop-accent: #c6a8ef; --sop-accent-light: rgba(139, 95, 191, 0.18); --sop-soft: rgba(43, 184, 184, 0.14); --sop-bg: #0d1a1a; --sop-text: #dce7e7; } body { background-color: var(--sop-bg); color: var(--sop-text); font-family: 'Nunito Sans', Arial, sans-serif; padding-top: 0; } h1, h2, h3, h4, .navbar-brand { font-family: 'Poppins', 'Nunito Sans', Arial, sans-serif; } h2 { color: var(--sop-primary-dark); font-weight: 700; } h3 { color: var(--sop-primary-dark); font-weight: 600; } a { color: var(--sop-primary); } a:hover { color: var(--sop-accent); } /* ===== BARRA DE NAVEGACIÓN ===== */ .sop-navbar { background: linear-gradient(90deg, var(--brand-teal-dark), var(--brand-teal)); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); } .sop-navbar .navbar-brand { font-weight: 700; letter-spacing: .3px; } .sop-navbar .nav-link { font-weight: 600; color: rgba(255, 255, 255, 0.85) !important; padding: .5rem 1rem !important; border-radius: .5rem; transition: background-color .2s ease, color .2s ease; } .sop-navbar .nav-link:hover { background-color: rgba(255, 255, 255, 0.12); color: #fff !important; } .sop-navbar .nav-link.active { background-color: rgba(255, 255, 255, 0.2); color: #fff !important; } /* ===== HERO ===== */ .hero-sop { background: linear-gradient(135deg, var(--brand-teal-dark) 0%, var(--brand-teal-light) 55%, var(--brand-purple) 130%); color: #fff; border-radius: 0 0 2rem 2rem; padding: 4rem 0 3.5rem; } .hero-sop h1 { font-weight: 700; } .hero-sop .lead { color: rgba(255, 255, 255, 0.92); } .hero-sm { padding: 3rem 0 2.5rem; } /* ===== TARJETAS ===== */ .feature-card, .stat-card, .resource-card { border: none; border-radius: 1rem; box-shadow: 0 6px 20px rgba(13, 110, 110, 0.08); transition: transform .2s ease, box-shadow .2s ease; height: 100%; } .feature-card:hover, .resource-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(13, 110, 110, 0.16); } [data-bs-theme="dark"] .feature-card, [data-bs-theme="dark"] .stat-card, [data-bs-theme="dark"] .resource-card { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.07); } [data-bs-theme="dark"] .bg-white { background-color: #16302f !important; } .icon-circle { width: 60px; height: 60px; min-width: 60px; border-radius: 50%; background: var(--sop-soft); display: flex; align-items: center; justify-content: center; color: var(--sop-primary); font-size: 1.5rem; } .icon-circle.accent { background: var(--sop-accent-light); color: var(--sop-accent); } .stat-card .display-6 { color: var(--sop-primary); font-weight: 700; } /* ===== CITAS / AVISOS ===== */ .quote-box { border-left: 4px solid var(--sop-accent); background: var(--sop-accent-light); padding: 1rem 1.25rem; border-radius: .5rem; } .disclaimer-box { border-left: 4px solid var(--sop-primary); background: var(--sop-soft); border-radius: .5rem; } /* ===== MITOS Y REALIDADES ===== */ .badge-myth { background-color: #f8d7da; color: #842029; font-weight: 600; } .badge-fact { background-color: #d1f2eb; color: var(--sop-primary-dark); font-weight: 600; } [data-bs-theme="dark"] .badge-myth { background-color: rgba(220, 53, 69, 0.22); color: #f5b8c0; } [data-bs-theme="dark"] .badge-fact { background-color: rgba(43, 184, 184, 0.22); color: #8be3e3; } /* ===== ACORDEÓN ===== */ .accordion-button:not(.collapsed) { background-color: var(--sop-soft); color: var(--sop-primary-dark); box-shadow: none; } .accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(13, 110, 110, 0.2); } /* ===== TABLAS ===== */ .table-sop thead { background-color: var(--brand-teal); color: #fff; } /* ===== REFERENCIAS ===== */ .references-list { font-size: .92rem; color: #4a5c5d; } [data-bs-theme="dark"] .references-list { color: #a9c4c4; } .references-list a { word-break: break-word; } /* ===== PIE DE PÁGINA ===== */ .sop-footer { background: var(--brand-teal-dark); color: #cfe9e9; } .sop-footer a { color: #a9e0e0; } .sop-footer a:hover { color: #fff; } /* ===== BIOGRAFÍA / AUTORA ===== */ .bio-photo { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; border: 5px solid #fff; box-shadow: 0 8px 24px rgba(13, 110, 110, 0.2); } .bio-pillars .badge { font-weight: 600; color: var(--sop-primary-dark) !important; } [data-bs-theme="dark"] .bio-pillars .badge { background-color: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.2) !important; } /* ===== JUSTIFICACIÓN DE TEXTO ===== */ p, .accordion-body, .references-list li { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; } /* Textos cortos o ya centrados: la justificación no aporta y puede verse mal */ .lead, .stat-card p, .feature-card.text-center p, .section-eyebrow { text-align: center; hyphens: none; -webkit-hyphens: none; } /* ===== UTILIDADES ===== */ .section-eyebrow { text-transform: uppercase; letter-spacing: 1.5px; font-size: .8rem; font-weight: 700; color: var(--sop-accent); } .btn-sop-primary { background-color: #fff; color: var(--brand-teal-dark); font-weight: 700; border: none; } .btn-sop-primary:hover { background-color: #eaf6f6; color: var(--brand-teal-dark); } .btn-outline-sop { border: 2px solid #fff; color: #fff; font-weight: 700; } .btn-outline-sop:hover { background-color: #fff; color: var(--brand-teal-dark); } /* ===== INTERRUPTOR DE TEMA (CLARO/OSCURO) ===== */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.1); color: #fff; font-size: 1.05rem; transition: background-color .2s ease, transform .2s ease; } .theme-toggle-btn:hover { background-color: rgba(255, 255, 255, 0.22); color: #fff; transform: rotate(12deg); } .theme-toggle-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .theme-toggle-btn .theme-icon-light { display: none; } [data-bs-theme="dark"] .theme-toggle-btn .theme-icon-dark { display: none; } [data-bs-theme="dark"] .theme-toggle-btn .theme-icon-light { display: inline-block; } /* ===== IMPRESIÓN (resumen de autoevaluación) ===== */ @media print { .no-print { display: none !important; } body { background: #fff !important; color: #000 !important; } .feature-card { box-shadow: none !important; border: 1px solid #ccc !important; } }