/* =================================================================
   eFORMA2 Magazine — Estilos CSS Responsivos & Modo Oscuro Global
   ================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;600;700;800;900&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
    --primary: #001430;
    --secondary: #0059bb;
    --background: #f8f9fa;
    --surface: #ffffff;
    --text: #191c1d;
    --text-muted: #43474f;
    --border: #c4c6d0;
}

body {
    background-color: var(--background);
    color: var(--text);
    font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif !important;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif !important;
}

.prose, .prose p, .prose li, .font-serif, article p {
    font-family: 'Source Serif 4', Georgia, serif !important;
}

/* ==========================================
   REGLAS DEL MODO OSCURO (DARK MODE)
   ========================================== */
html.dark, html[data-theme="dark"] {
    --primary: #ffffff;
    --secondary: #4d94ff;
    --background: #0b131e;
    --surface: #141f2e;
    --text: #e1e6ed;
    --text-muted: #9aa7b8;
    --border: #2a3a50;
    color-scheme: dark;
}

html.dark body,
html[data-theme="dark"] body {
    background-color: #0b131e !important;
    color: #e1e6ed !important;
}

html.dark header,
html[data-theme="dark"] header {
    background-color: #141f2e !important;
    border-color: #2a3a50 !important;
    color: #ffffff !important;
}

/* VISIBILIDAD DE ICONOS DE CABECERA EN MODO OSCURO */
html.dark header button,
html[data-theme="dark"] header button,
html.dark #themeToggleBtn,
html[data-theme="dark"] #themeToggleBtn,
html.dark #notifBellBtn,
html[data-theme="dark"] #notifBellBtn,
html.dark #bookmarksBtn,
html[data-theme="dark"] #bookmarksBtn,
html.dark #mobileMenuBtn,
html[data-theme="dark"] #mobileMenuBtn {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark header button:hover,
html[data-theme="dark"] header button:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

html.dark .material-symbols-outlined,
html[data-theme="dark"] .material-symbols-outlined {
    color: #ffffff !important;
}

/* Destacar el icono de modo claro/oscuro activado */
html.dark #themeToggleBtn .material-symbols-outlined,
html[data-theme="dark"] #themeToggleBtn .material-symbols-outlined {
    color: #facc15 !important; /* Amarillo brillante para sol/luna */
}

html.dark #notifBellBtn .material-symbols-outlined,
html[data-theme="dark"] #notifBellBtn .material-symbols-outlined {
    color: #60a5fa !important; /* Azul brillante */
}

html.dark #bookmarksBtn .material-symbols-outlined,
html[data-theme="dark"] #bookmarksBtn .material-symbols-outlined {
    color: #fbbf24 !important; /* Dorado/Ámbar */
}

/* DESPLEGABLES DE NOTIFICACIONES Y GUARDADOS EN MODO OSCURO */
html.dark #notifDropdown,
html[data-theme="dark"] #notifDropdown,
html.dark #bookmarksDropdown,
html[data-theme="dark"] #bookmarksDropdown {
    background-color: #141f2e !important;
    border-color: #2a3a50 !important;
}

/* OVERRIDES GLOBALES DE TAILWIND PARA MODO OSCURO (Componentes) */
html.dark .bg-white, html[data-theme="dark"] .bg-white {
    background-color: #141f2e !important;
    color: #e1e6ed !important;
}
html.dark .bg-gray-50, html[data-theme="dark"] .bg-gray-50,
html.dark .bg-gray-100, html[data-theme="dark"] .bg-gray-100,
html.dark .bg-slate-50, html[data-theme="dark"] .bg-slate-50,
html.dark .bg-slate-100, html[data-theme="dark"] .bg-slate-100 {
    background-color: #0b131e !important;
    color: #e1e6ed !important;
}
html.dark .bg-blue-50, html[data-theme="dark"] .bg-blue-50,
html.dark .bg-blue-50\/80, html[data-theme="dark"] .bg-blue-50\/80,
html.dark .bg-blue-100, html[data-theme="dark"] .bg-blue-100,
html.dark .bg-sky-50, html[data-theme="dark"] .bg-sky-50,
html.dark .bg-indigo-50, html[data-theme="dark"] .bg-indigo-50 {
    background-color: #162438 !important;
    color: #e1e6ed !important;
    border-color: #2a3a50 !important;
}

html.dark .bg-blue-50 *, html[data-theme="dark"] .bg-blue-50 *,
html.dark .bg-blue-50\/80 *, html[data-theme="dark"] .bg-blue-50\/80 *,
html.dark .bg-blue-100 *, html[data-theme="dark"] .bg-blue-100 * {
    border-color: #2a3a50 !important;
}

html.dark .bg-blue-50 p, html[data-theme="dark"] .bg-blue-50 p,
html.dark .bg-blue-50\/80 p, html[data-theme="dark"] .bg-blue-50\/80 p,
html.dark .bg-blue-50 li, html[data-theme="dark"] .bg-blue-50 li,
html.dark .bg-blue-50\/80 li, html[data-theme="dark"] .bg-blue-50\/80 li,
html.dark .bg-blue-50 span, html[data-theme="dark"] .bg-blue-50 span,
html.dark .bg-blue-50\/80 span, html[data-theme="dark"] .bg-blue-50\/80 span,
html.dark .bg-blue-50 ul, html[data-theme="dark"] .bg-blue-50 ul {
    color: #e1e6ed !important;
}

html.dark .bg-blue-50 strong, html[data-theme="dark"] .bg-blue-50 strong,
html.dark .bg-blue-50\/80 strong, html[data-theme="dark"] .bg-blue-50\/80 strong,
html.dark .bg-blue-50 b, html[data-theme="dark"] .bg-blue-50 b,
html.dark .bg-blue-50\/80 b, html[data-theme="dark"] .bg-blue-50\/80 b {
    color: #ffffff !important;
}

html.dark .bg-blue-50 h1, html[data-theme="dark"] .bg-blue-50 h1,
html.dark .bg-blue-50 h2, html[data-theme="dark"] .bg-blue-50 h2,
html.dark .bg-blue-50 h3, html[data-theme="dark"] .bg-blue-50 h3,
html.dark .bg-blue-50 h4, html[data-theme="dark"] .bg-blue-50 h4,
html.dark .bg-blue-50\/80 h1, html[data-theme="dark"] .bg-blue-50\/80 h1,
html.dark .bg-blue-50\/80 h2, html[data-theme="dark"] .bg-blue-50\/80 h2,
html.dark .bg-blue-50\/80 h3, html[data-theme="dark"] .bg-blue-50\/80 h3,
html.dark .bg-blue-50\/80 h4, html[data-theme="dark"] .bg-blue-50\/80 h4 {
    color: #93c5fd !important;
}

html.dark .text-gray-900, html[data-theme="dark"] .text-gray-900,
html.dark .text-gray-800, html[data-theme="dark"] .text-gray-800,
html.dark .text-gray-700, html[data-theme="dark"] .text-gray-700,
html.dark .text-black, html[data-theme="dark"] .text-black {
    color: #f8fafc !important;
}
html.dark .text-gray-600, html[data-theme="dark"] .text-gray-600,
html.dark .text-gray-500, html[data-theme="dark"] .text-gray-500 {
    color: #94a3b8 !important;
}
html.dark .border-gray-200, html[data-theme="dark"] .border-gray-200,
html.dark .border-gray-300, html[data-theme="dark"] .border-gray-300,
html.dark .border-gray-100, html[data-theme="dark"] .border-gray-100,
html.dark .border-slate-200, html[data-theme="dark"] .border-slate-200,
html.dark .border-blue-200, html[data-theme="dark"] .border-blue-200,
html.dark .border-blue-300, html[data-theme="dark"] .border-blue-300 {
    border-color: #2a3a50 !important;
}
html.dark .shadow-sm, html[data-theme="dark"] .shadow-sm,
html.dark .shadow, html[data-theme="dark"] .shadow,
html.dark .shadow-md, html[data-theme="dark"] .shadow-md,
html.dark .shadow-lg, html[data-theme="dark"] .shadow-lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3) !important;
}
html.dark #notifDropdown .bg-gray-50,
html[data-theme="dark"] #notifDropdown .bg-gray-50,
html.dark #bookmarksDropdown .bg-gray-50,
html[data-theme="dark"] #bookmarksDropdown .bg-gray-50,
html.dark #bookmarksList > div,
html[data-theme="dark"] #bookmarksList > div {
    background-color: #1c2b3e !important;
    border-color: #2a3a50 !important;
    color: #e2e8f0 !important;
}

html.dark #notifDropdown .text-gray-800,
html[data-theme="dark"] #notifDropdown .text-gray-800,
html.dark #bookmarksDropdown .text-gray-800,
html[data-theme="dark"] #bookmarksDropdown .text-gray-800,
html.dark #notifDropdown .text-gray-900,
html[data-theme="dark"] #notifDropdown .text-gray-900 {
    color: #ffffff !important;
}

html.dark #notifDropdown .text-gray-600,
html[data-theme="dark"] #notifDropdown .text-gray-600,
html.dark #bookmarksDropdown .text-gray-600,
html[data-theme="dark"] #bookmarksDropdown .text-gray-600 {
    color: #94a3b8 !important;
}

html.dark nav,
html[data-theme="dark"] nav {
    background-color: transparent !important;
    border-color: #2a3a50 !important;
}

html.dark main,
html[data-theme="dark"] main,
html.dark section,
html[data-theme="dark"] section {
    background-color: #0b131e !important;
    border-color: #2a3a50 !important;
    color: #e1e6ed !important;
}

html.dark article,
html[data-theme="dark"] article,
html.dark .bg-white,
html[data-theme="dark"] .bg-white,
html.dark .bg-surface,
html[data-theme="dark"] .bg-surface,
html.dark .bg-gray-50,
html[data-theme="dark"] .bg-gray-50,
html.dark .bg-blue-50,
html[data-theme="dark"] .bg-blue-50,
html.dark .bg-blue-50\/80,
html[data-theme="dark"] .bg-blue-50\/80,
html.dark .bg-surface-container,
html[data-theme="dark"] .bg-surface-container {
    background-color: #141f2e !important;
    color: #e1e6ed !important;
    border-color: #2a3a50 !important;
}

html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6,
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4,
html.dark strong, html[data-theme="dark"] strong,
html.dark b, html[data-theme="dark"] b,
html.dark .font-bold, html[data-theme="dark"] .font-bold,
html.dark .font-semibold, html[data-theme="dark"] .font-semibold,
html.dark .font-black, html[data-theme="dark"] .font-black {
    color: #ffffff !important;
}

html.dark label, html[data-theme="dark"] label {
    color: #cbd5e1 !important;
}

/* OVERRIDES DE @TAILWIND/TYPOGRAPHY (.prose) EN MODO OSCURO */
html.dark .prose, html[data-theme="dark"] .prose {
    color: #e1e6ed !important;
    --tw-prose-body: #e1e6ed !important;
    --tw-prose-headings: #ffffff !important;
    --tw-prose-lead: #cbd5e1 !important;
    --tw-prose-links: #60a5fa !important;
    --tw-prose-bold: #ffffff !important;
    --tw-prose-counters: #94a3b8 !important;
    --tw-prose-bullets: #94a3b8 !important;
    --tw-prose-hr: #2a3a50 !important;
    --tw-prose-quotes: #f1f5f9 !important;
    --tw-prose-quote-borders: #3b82f6 !important;
    --tw-prose-captions: #94a3b8 !important;
    --tw-prose-code: #93c5fd !important;
    --tw-prose-pre-code: #e2e8f0 !important;
    --tw-prose-pre-bg: #0b131e !important;
    --tw-prose-th-borders: #2a3a50 !important;
    --tw-prose-td-borders: #2a3a50 !important;
}

html.dark .prose p, html[data-theme="dark"] .prose p,
html.dark .prose span, html[data-theme="dark"] .prose span,
html.dark .prose li, html[data-theme="dark"] .prose li,
html.dark .prose ul, html[data-theme="dark"] .prose ul,
html.dark .prose ol, html[data-theme="dark"] .prose ol {
    color: #e1e6ed !important;
}

html.dark .prose strong, html[data-theme="dark"] .prose strong,
html.dark .prose b, html[data-theme="dark"] .prose b,
html.dark .prose h1, html[data-theme="dark"] .prose h1,
html.dark .prose h2, html[data-theme="dark"] .prose h2,
html.dark .prose h3, html[data-theme="dark"] .prose h3,
html.dark .prose h4, html[data-theme="dark"] .prose h4,
html.dark .prose code, html[data-theme="dark"] .prose code,
html.dark .prose a, html[data-theme="dark"] .prose a {
    color: #ffffff !important;
}

html.dark p,
html[data-theme="dark"] p {
    color: #cbd5e1;
}

html.dark .text-primary, html[data-theme="dark"] .text-primary,
html.dark .text-blue-950, html[data-theme="dark"] .text-blue-950,
html.dark .text-blue-900, html[data-theme="dark"] .text-blue-900,
html.dark .text-blue-800, html[data-theme="dark"] .text-blue-800 {
    color: #93c5fd !important;
}

html.dark .text-blue-700, html[data-theme="dark"] .text-blue-700,
html.dark .text-blue-600, html[data-theme="dark"] .text-blue-600 {
    color: #60a5fa !important;
}

html.dark .text-gray-900, html[data-theme="dark"] .text-gray-900,
html.dark .text-gray-800, html[data-theme="dark"] .text-gray-800,
html.dark .text-gray-700, html[data-theme="dark"] .text-gray-700 {
    color: #e2e8f0 !important;
}

html.dark .text-gray-600, html[data-theme="dark"] .text-gray-600,
html.dark .text-gray-500, html[data-theme="dark"] .text-gray-500,
html.dark .text-on-surface-variant, html[data-theme="dark"] .text-on-surface-variant {
    color: #94a3b8 !important;
}

html.dark .border-outline-variant, html[data-theme="dark"] .border-outline-variant,
html.dark .border-gray-200, html[data-theme="dark"] .border-gray-200,
html.dark .border-gray-100, html[data-theme="dark"] .border-gray-100 {
    border-color: #2a3a50 !important;
}

/* Tablas en Modo Oscuro */
html.dark table, html[data-theme="dark"] table {
    background-color: #141f2e !important;
    color: #e1e6ed !important;
    border-color: #2a3a50 !important;
}
html.dark thead tr, html[data-theme="dark"] thead tr {
    background-color: #0b131e !important;
    color: #ffffff !important;
}
html.dark th, html[data-theme="dark"] th {
    color: #ffffff !important;
    border-color: #2a3a50 !important;
}
html.dark td, html[data-theme="dark"] td {
    border-color: #2a3a50 !important;
    color: #cbd5e1 !important;
}
html.dark tbody tr:hover, html[data-theme="dark"] tbody tr:hover {
    background-color: #1c2b3e !important;
}
html.dark td .text-blue-950, html[data-theme="dark"] td .text-blue-950,
html.dark td.text-blue-950, html[data-theme="dark"] td.text-blue-950 {
    color: #93c5fd !important;
}
html.dark td .text-green-700, html[data-theme="dark"] td .text-green-700,
html.dark td.text-green-700, html[data-theme="dark"] td.text-green-700 {
    color: #4ade80 !important;
}

html.dark input, html[data-theme="dark"] input,
html.dark select, html[data-theme="dark"] select,
html.dark textarea, html[data-theme="dark"] textarea {
    background-color: #1c2b3e !important;
    color: #ffffff !important;
    border-color: #3b4e68 !important;
}

html.dark input[readonly], html[data-theme="dark"] input[readonly] {
    background-color: #141f2e !important;
    color: #94a3b8 !important;
    border-color: #2a3a50 !important;
}

html.dark footer, html[data-theme="dark"] footer {
    background-color: #070d14 !important;
    border-color: #1e2d42 !important;
}

h1, h2, h3, h4, h5, h6, .font-display {
    font-family: 'Hanken Grotesk', sans-serif;
}

/* Transiciones fluidas */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}

/* Ajustes Responsivos Móviles */
@media (max-width: 768px) {
    .container-mobile-padding {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Adaptar tablas en móvil */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Scrollbar Personalizado */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--background);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--secondary);
}

/* Excepciones de Modo Oscuro para Banners Amarillos y Naranjas */
html.dark .bg-yellow-400, html[data-theme="dark"] .bg-yellow-400,
html.dark .bg-yellow-500, html[data-theme="dark"] .bg-yellow-500,
html.dark .bg-tertiary, html[data-theme="dark"] .bg-tertiary {
    color: #172554 !important; /* text-blue-950 */
}
html.dark .bg-yellow-400 .text-blue-950, html[data-theme="dark"] .bg-yellow-400 .text-blue-950,
html.dark .bg-yellow-500 .text-blue-950, html[data-theme="dark"] .bg-yellow-500 .text-blue-950,
html.dark .bg-yellow-400.text-blue-950, html[data-theme="dark"] .bg-yellow-400.text-blue-950,
html.dark .bg-yellow-500.text-blue-950, html[data-theme="dark"] .bg-yellow-500.text-blue-950,
html.dark .bg-tertiary .text-primary, html[data-theme="dark"] .bg-tertiary .text-primary,
html.dark .bg-tertiary.text-primary, html[data-theme="dark"] .bg-tertiary.text-primary {
    color: #172554 !important; /* Mantiene el texto oscuro sobre fondo amarillo */
}
html.dark .bg-yellow-100, html[data-theme="dark"] .bg-yellow-100 {
    color: #854d0e !important; /* text-yellow-800 */
}
html.dark .bg-amber-100, html[data-theme="dark"] .bg-amber-100 {
    color: #78350f !important; /* text-amber-900 */
}
html.dark .bg-amber-50, html[data-theme="dark"] .bg-amber-50 {
    color: #b45309 !important; /* text-amber-700 */
}

/* Excepciones para que el Footer NO varíe en Modo Oscuro (se mantenga como en claro) */
html.dark footer, html[data-theme="dark"] footer {
    background-color: #172554 !important; /* Mantiene bg-blue-950 original */
    border-color: #1e3a8a !important; /* border-blue-900 */
}
html.dark footer .bg-white, html[data-theme="dark"] footer .bg-white {
    background-color: #ffffff !important;
    color: #172554 !important;
}
html.dark footer .text-blue-950, html[data-theme="dark"] footer .text-blue-950 {
    color: #172554 !important;
}
html.dark footer .text-blue-200, html[data-theme="dark"] footer .text-blue-200 {
    color: #bfdbfe !important;
}
html.dark footer .text-white, html[data-theme="dark"] footer .text-white {
    color: #ffffff !important;
}

/* El logo de OrkiUp ahora usa un contenedor blanco (bg-white) en modo oscuro, 
   por lo que ya no necesitamos invertirlo. */
/* html.dark img[src*="orkiup_logo"], html[data-theme="dark"] img[src*="orkiup_logo"] {
    filter: brightness(0) invert(1) !important;
} */