/* =====================================================================
   Percy Theme — Páginas (page-responsive): Estilos
   =====================================================================
   Este archivo contiene SOLO los estilos específicos del template
   "page-responsive" y sus páginas (home, etc.). El resto del CSS
   del theme (layout global, navbar, variables, secciones específicas)
   vive en style.css.

   Filosofía: mínimo CSS propio + máximo uso de componentes nativos de
   los frameworks que el theme ya carga:
     - Bootstrap 5.3 (escritorio ≥ 992px) → .d-flex, .d-none, etc.
     - Onsen UI v2  (móvil < 992px) → <ons-page>, <ons-toolbar>, etc.

   Cada regla tiene un comentario explicando QUÉ componente nativo
   reemplaza o por qué es estrictamente necesaria.
   ===================================================================== */


/* ============================================================
   DETECCIÓN RESPONSIVA (escritorio vs móvil)
   ============================================================
   Patrón CSS-only (sin JS): por defecto escritorio visible, móvil
   oculto. En < 992px (Bootstrap lg breakpoint) invertir.

   Nota: NO se usa .d-none/.d-lg-block de Bootstrap porque nuestro
   breakpoint custom (991.98px) difiere del lg de Bootstrap (992px).
   Si quisiéramos alinearnos exactamente, se podría reescribir con
   .d-none .d-lg-block .d-md-block, pero perderíamos precisión.
   ============================================================ */
.view-desktop { display: block; }
.view-mobile  { display: none; }

@media (max-width: 991.98px) {
    .view-desktop { display: none; }
    .view-mobile  { display: block; }
}

/* Ocultar TODO el stack móvil en escritorio (v1.13.0+).
   Hasta v1.12 era `.percy-onsen-page` (single <ons-page> raíz); desde
   v1.13 el wrapper es <ons-navigator> + <ons-tabbar> que viven dentro
   de .percy-onsen-mobile-stack. Ocultamos el wrapper completo para
   que nada del nav SPA (que Onsen renderiza via Shadow DOM) interfiera
   con las secciones .view-desktop en escritorio. */
@media (min-width: 992px) {
    .percy-onsen-mobile-stack {
        display: none !important;
    }
}


/* ============================================================
   STACK REORDENABLE DE SECCIONES
   ============================================================
   Wrapper flex column que respeta style="order:N" en cada hijo.
   Reemplaza el patrón antiguo de "Bootstrap order utilities"
   (.order-1, .order-2...) con algo más flexible: cada sección
   declara su propio orden en línea, no en CSS.
   ============================================================ */
.sections-stack {
    display: flex;
    flex-direction: column;
}
ons-page .sections-stack {
    display: flex;
    flex-direction: column;
}


/* ============================================================
   SCROLL SUAVE Y ANCLAS
   ============================================================
   Bootstrap ya provee .scroll-spy pero aquí necesitamos scroll-behavior
   suave al navegar entre secciones (anclas #seccion-x).
   ============================================================ */
html { scroll-behavior: smooth; }
section[id],
ons-card[id],
.page__content [id] { scroll-margin-top: 20px; }


/* ============================================================
   VISTA ESCRITORIO (Bootstrap)
   ============================================================
   Garantiza que .view-desktop ocupe toda la altura sin forzar
   position:absolute (que rompería el flujo del body).
   ============================================================ */
.view-desktop {
    position: static;
    overflow: visible;
    height: auto;
    width: 100%;
}


/* ============================================================
   VISTA MÓVIL (Onsen UI)
   ============================================================
   Onsen UI organiza su propio scroll interno (por eso height:auto),
   pero necesita un wrapper position:relative para que <ons-splitter>
   se ancle correctamente. CSS mínimo indispensable.
   ============================================================ */
.view-mobile {
    position: relative;
    width: 100%;
    min-height: 0;
    background: #f9f9f9;
}
.view-mobile ons-splitter {
    position: relative !important;
    min-height: 0;
    height: auto !important;
}
.view-mobile ons-splitter-side {
    position: absolute !important;
    height: 100% !important;
}
.view-mobile ons-splitter-content {
    position: relative !important;
    min-height: 0;
    height: auto !important;
    overflow-y: visible;
}
.view-mobile ons-page {
    /* HISTORIAL: este rule existía porque el slider móvil usaba <ons-page>
       como wrapper. Se eliminó porque <ons-page> es la RAÍZ de cada página
       de Onsen UI (cubre toda la viewport) y tapaba la sección de features
       que viene como hermana. Ahora el slider usa un <section> normal con
       <ons-toolbar inline> + <ons-carousel> directo (ver blocks/slider.php).
       El carousel trae height:260px inline, así que no necesita este min-height. */
}


/* ============================================================
   LIST ITEM TAPPABLE (utilidad Onsen)
   ============================================================
   <ons-list-item tappable> necesita cursor:pointer para feedback
   visual de clickeabilidad. Onsen no lo aplica por defecto.
   ============================================================ */
.list-item-tappable { cursor: pointer; }


/* ============================================================
   BOTÓN TOGGLE DE TEMA (🌙 / ☀️)
   ============================================================
   Botón presente en navbar (escritorio) y toolbar Onsen (móvil).
   Los iconos se alternan vía data-bs-theme en pages/script.js.
   ============================================================ */
.theme-toggle {
    background: transparent;
    border: 1px solid currentColor;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    color: inherit;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.3s ease, color 0.3s ease, opacity 0.2s ease;
}
.theme-toggle:hover { opacity: 0.8; }
.theme-icon-dark { display: none; }


/* ============================================================
   DARK MODE — Componentes Onsen UI
   ============================================================
   Bootstrap 5.3 ya provee dark mode nativo via data-bs-theme="dark".
   Onsen UI v2 NO tiene dark mode automático, así que sobrescribimos
   manualmente los colores de sus web-components (card, list, toolbar,
   button, page, splitter, etc.) usando selectores profundos.

   Bootstrap aplica data-bs-theme a <html>; replicamos esa lógica
   usando html[data-bs-theme="dark"] para que coincida con el código
   de pages/script.js que también usa html (no :root).
   ============================================================ */

/* Paleta dark mode para Onsen */
html[data-bs-theme="dark"] .view-mobile {
    background-color: #121212 !important;
    color: #f0f0f0 !important;
}

/* ====================================================================
   DARK MODE — Variables CSS de Onsen UI v2 (v1.12.2)
   ====================================================================
   Onsen UI v2 NO reacciona automáticamente al cambio data-bs-theme.
   Sus variables CSS (--list-header-color, --list-background-color, etc.)
   mantienen sus valores LIGHT por defecto, lo que hace invisible el
   texto sobre fondo oscuro: el <ons-list-header> tiene fondo blanco
   hardcoded y el texto termina siendo #f0f0f0 sobre #fff.
   Para que los bloques de features y faq se vean en dark mode
   redefinimos estas variables acá.

   El selector html[data-bs-theme="dark"] iguala o supera la
   especificidad del :root de :root, así que las redefiniciones
   de variables CSS (que viven en :root por default) se aplican
   bien en el árbol. */
:root[data-bs-theme="dark"] {
    /* <ons-list-header>: el bloque features usa esto en mobile. */
    --list-header-color: #f0f0f0;
    --list-header-background-color: transparent;
    --material-list-header-text-color: #f0f0f0;

    /* <ons-list> y <ons-list-item>: contenedor y filas. */
    --list-background-color: #1a1a1a;
    --list-color: #f0f0f0;
    --list-item-color: #f0f0f0;
    --list-item-background-color: #1a1a1a;
    --list-item-separator-color: #2a2a2a;

    /* <ons-list-item expandable> en FAQ: el panel expandible hereda
       de los tokens del list-item. */
    --material-list-item-color: #f0f0f0;
    --material-list-item-background-color: #1a1a1a;
}

/* <ons-card> y sus elementos internos */
html[data-bs-theme="dark"] ons-card,
html[data-bs-theme="dark"] ons-card .card,
html[data-bs-theme="dark"] ons-card > div {
    background-color: #1f1f1f !important;
    color: #f0f0f0 !important;
    border-color: #444 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.4) !important;
}
html[data-bs-theme="dark"] ons-card * {
    color: #f0f0f0 !important;
}

/* <ons-list> y <ons-list-item> */
html[data-bs-theme="dark"] ons-list,
html[data-bs-theme="dark"] ons-list .list,
html[data-bs-theme="dark"] ons-list-item,
html[data-bs-theme="dark"] ons-list-item .list-item {
    background-color: #1a1a1a !important;
    color: #f0f0f0 !important;
    border-color: #444 !important;
}
html[data-bs-theme="dark"] ons-list-item .list-item--active,
html[data-bs-theme="dark"] ons-list-item:active,
html[data-bs-theme="dark"] ons-list-item.tappable:active {
    background-color: #2a2a2a !important;
}
html[data-bs-theme="dark"] ons-list-item * {
    color: #f0f0f0 !important;
}

/* <ons-toolbar> (header móvil).
   OJO: el Customizer setea `movil_fondo` (light|dark) y eso genera clases
   .percy-onsen-toolbar-light o .percy-onsen-toolbar-dark en el <ons-toolbar>
   (definidas en blocks/style.css con !important). Sus selectores derivados
   (.percy-onsen-toolbar-light .center = 0,2,0) ganan por especificidad
   contra la regla simple `html[data-bs-theme="dark"] ons-toolbar` (0,1,1),
   por lo que si el usuario eligió movil_fondo='light' y activa dark mode,
   el header móvil quedaba blanco. Por eso acá listamos explícitamente
   tanto las variant classes como sus descendientes .center/.right/.toolbar,
   para que el dark mode SIEMPRE tenga prioridad sobre el variant elegido
   en el Customizer. */
html[data-bs-theme="dark"] ons-toolbar,
html[data-bs-theme="dark"] ons-toolbar .toolbar,
html[data-bs-theme="dark"] .percy-onsen-toolbar,
html[data-bs-theme="dark"] .percy-onsen-toolbar .toolbar,
html[data-bs-theme="dark"] .percy-onsen-toolbar-light,
html[data-bs-theme="dark"] .percy-onsen-toolbar-light .toolbar,
html[data-bs-theme="dark"] .percy-onsen-toolbar-dark,
html[data-bs-theme="dark"] .percy-onsen-toolbar-dark .toolbar {
    background-color: #1d2327 !important;
    color: #f0f0f0 !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
}
/* .center y .right heredan background del .toolbar en Onsen, pero el variant
   'light' les aplica background-color:#ffffff !important con especificidad
   0,2,0 — mayor que `ons-toolbar *` (0,1,0). Sobreescribimos acá. */
html[data-bs-theme="dark"] .percy-onsen-toolbar-light .center,
html[data-bs-theme="dark"] .percy-onsen-toolbar-light .right,
html[data-bs-theme="dark"] .percy-onsen-toolbar-dark .center,
html[data-bs-theme="dark"] .percy-onsen-toolbar-dark .right {
    background-color: #1d2327 !important;
    color: #f0f0f0 !important;
}
html[data-bs-theme="dark"] ons-toolbar *,
html[data-bs-theme="dark"] .percy-onsen-toolbar *,
html[data-bs-theme="dark"] .percy-onsen-toolbar-light *,
html[data-bs-theme="dark"] .percy-onsen-toolbar-dark * {
    color: #f0f0f0 !important;
    fill: #f0f0f0 !important;
}
html[data-bs-theme="dark"] ons-toolbar-button,
html[data-bs-theme="dark"] .percy-onsen-toolbar-light ons-toolbar-button,
html[data-bs-theme="dark"] .percy-onsen-toolbar-dark ons-toolbar-button {
    background-color: transparent !important;
    color: #f0f0f0 !important;
}

/* <ons-button> */
html[data-bs-theme="dark"] ons-button,
html[data-bs-theme="dark"] ons-button .button {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-color: #444 !important;
}
html[data-bs-theme="dark"] ons-button[modifier="outline"],
html[data-bs-theme="dark"] ons-button .button--outline {
    background-color: transparent !important;
    color: #f0f0f0 !important;
    border: 1px solid #444 !important;
}

/* <ons-page> y <ons-splitter> (layout principal móvil) */
html[data-bs-theme="dark"] ons-page,
html[data-bs-theme="dark"] ons-page .page,
html[data-bs-theme="dark"] ons-page .page__content {
    background-color: #121212 !important;
    color: #f0f0f0 !important;
}
html[data-bs-theme="dark"] ons-splitter,
html[data-bs-theme="dark"] ons-splitter-side,
html[data-bs-theme="dark"] ons-splitter-side .page {
    background-color: #121212 !important;
    color: #f0f0f0 !important;
}

/* <ons-tabbar> + <ons-tab>: barra inferior de navegación (v1.13.0+).
   Onsen usa internamente .tabbar (contenedor) y .tabbar__item por tab.
   Reforzamos los colores para que el tab activo y los inactivos se
   distingan tanto en light como en dark mode. */
html[data-bs-theme="dark"] .percy-onsen-tabbar,
html[data-bs-theme="dark"] .percy-onsen-tabbar .tabbar {
    background-color: #1d2327 !important;
    color: #f0f0f0 !important;
    border-top-color: rgba(255, 255, 255, 0.1) !important;
}
html[data-bs-theme="dark"] .percy-onsen-tabbar ons-tab {
    color: #c8c8c8 !important;
}
html[data-bs-theme="dark"] .percy-onsen-tabbar ons-tab[active],
html[data-bs-theme="dark"] .percy-onsen-tabbar ons-tab.active {
    color: #72aee6 !important;
}

/* Inputs Onsen */
html[data-bs-theme="dark"] ons-input .text-input,
html[data-bs-theme="dark"] ons-input .text-input__label,
html[data-bs-theme="dark"] ons-search-input .search-input {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
    border-color: #444 !important;
}

/* Dialogs / modales Onsen */
html[data-bs-theme="dark"] .alert-dialog,
html[data-bs-theme="dark"] .alert-dialog-title,
html[data-bs-theme="dark"] .alert-dialog-content,
html[data-bs-theme="dark"] .modal,
html[data-bs-theme="dark"] .modal__content,
html[data-bs-theme="dark"] .dialog,
html[data-bs-theme="dark"] .dialog-container {
    background-color: #2a2a2a !important;
    color: #f0f0f0 !important;
}
html[data-bs-theme="dark"] .alert-dialog-mask,
html[data-bs-theme="dark"] .modal-mask,
html[data-bs-theme="dark"] .dialog-mask {
    background-color: rgba(0,0,0,.7) !important;
}

/* Icono del toggle de tema dentro de la toolbar Onsen */
html[data-bs-theme="dark"] #onsenThemeToggle {
    color: #f0f0f0 !important;
}


/* ============================================================
   TRANSICIONES SUAVES DE TEMA
   ============================================================
   Aplica a todos los elementos que cambian de color al alternar
   tema. Solo propiedades que NO afectan layout (evita jank).
   ============================================================ */
html, body,
.card, .navbar,
ons-card, ons-list, ons-toolbar, ons-page, ons-button, ons-list-item {
    transition: background-color 0.3s ease, color 0.3s ease;
}


/* ============================================================
   SIDE MENU MÓVIL (drawer) — v1.14.3
   ============================================================
   Overlay HTML + CSS + JS vanilla, SIN web-components de Onsen UI.
   Razón: Onsen 2.12.8 tiene quirks con <ons-splitter> y <ons-action-sheet>
   que dejaban la vista en blanco tras el compile (ver v1.15.0 rollback).

   El HTML vive en footer-responsive.php (aparece UNA sola vez en
   TODAS las páginas). El botón ☰ que lo abre está en cada toolbar
   (home.php / template-blog.php / single.php) y usa el atributo
   data-percy-menu-open para ser detectado por el listener delegado
   del footer.

   Solo se muestra en móvil (<992px). En escritorio el navbar Bootstrap
   ya muestra el menú — el drawer no es necesario.
   ============================================================ */
.percy-mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 9999;
}
.percy-mobile-menu[hidden] {
    display: none;
}
.percy-mobile-menu-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.percy-mobile-menu-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 80%;
    background: #ffffff;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.percy-mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #e9ecef;
}
.percy-mobile-menu-brand {
    font-weight: 700;
    font-size: 1.1rem;
    color: #212529;
}
.percy-mobile-menu-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}
.percy-mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.percy-mobile-menu-list li a {
    display: block;
    padding: 0.875rem 1rem;
    color: #212529;
    text-decoration: none;
    border-bottom: 1px solid #f1f3f5;
    font-size: 1rem;
}
.percy-mobile-menu-list li a:hover,
.percy-mobile-menu-list li a:focus {
    background: #f8f9fa;
}
.percy-mobile-menu-btn {
    background: transparent;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    margin-right: 0.5rem;
}

/* Dark mode del drawer móvil */
html[data-bs-theme="dark"] .percy-mobile-menu-panel {
    background: #1d2327;
}
html[data-bs-theme="dark"] .percy-mobile-menu-brand {
    color: #f0f0f0;
}
html[data-bs-theme="dark"] .percy-mobile-menu-header {
    border-bottom-color: #2a2a2a;
}
html[data-bs-theme="dark"] .percy-mobile-menu-list li a {
    color: #f0f0f0;
    border-bottom-color: #2a2a2a;
}
html[data-bs-theme="dark"] .percy-mobile-menu-list li a:hover,
html[data-bs-theme="dark"] .percy-mobile-menu-list li a:focus {
    background: #2a2a2a;
}
html[data-bs-theme="dark"] .percy-mobile-menu-close {
    color: #adb5bd;
}

/* En escritorio el drawer no se necesita (Bootstrap navbar lo cubre). */
@media (min-width: 992px) {
    .percy-mobile-menu-btn {
        display: none;
    }
}