/* ============================================================================
   SEB Dark Mode Toggle — Estilos del Frontend (style.css)
   ============================================================================
   Este archivo contiene los estilos CSS para:

   1. El BOTÓN de toggle (sol/luna) — forma circular con iconos animados.
   2. Los ICONOS de sol ☀ y luna ☾ — transiciones de opacidad y rotación.
   3. El MODE OSCURO — propiedad color-scheme y transiciones suaves.
   4. El BOTÓN FLOTANTE — posición fija en la esquina inferior derecha.
   5. La PREVIEW del editor — estilo desactivado para Gutenberg.

   NOTA: Los colores del modo oscuro (variables CSS) se inyectan como CSS
   inline desde PHP (seb_dmt_enqueue_frontend), NO están en este archivo.
   Este archivo solo contiene estilos de presentación y animación.
   ============================================================================ */


/* ============================================================================
   1. BOTÓN TOGGLE — Contenedor y estilos base
   ============================================================================ */

/* Contenedor del bloque Gutenberg — inline-block para no romper el flujo */
.wp-block-seb-dark-mode-toggle {
    display: inline-block;
    line-height: 1;
}

/* Botón circular de toggle entre modo claro y modo oscuro.
   - Tamaño de 44px (mínimo recomendado por accesibilidad para touch targets)
   - Borde que hereda el color del texto (currentColor)
   - Fondo transparente para integrarse con cualquier diseño
   - overflow: hidden para que los iconos no se desborden al rotar */
.seb-dark-mode-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 2px solid currentColor;
    border-radius: 50%;           /* Círculo perfecto */
    background: transparent;
    color: inherit;               /* Hereda el color del texto del padre */
    cursor: pointer;
    overflow: hidden;
    /* Transiciones suaves para múltiples propiedades al cambiar de modo */
    transition: background-color 0.3s ease,
                color 0.3s ease,
                transform 0.2s ease,
                box-shadow 0.3s ease;
    font-size: 20px;
    line-height: 1;
    padding: 0;
}

/* Efecto hover: el botón crece ligeramente y aparece una sombra sutil */
.seb-dark-mode-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
}

/* Estilo de foco visible para navegación por teclado (accesibilidad).
   Usa :focus-visible para que no aparezca al hacer clic con el ratón,
   solo al navegar con Tab. */
.seb-dark-mode-btn:focus-visible {
    outline: 2px solid #0073aa;   /* Azul de WordPress */
    outline-offset: 2px;
}


/* ============================================================================
   2. ICONOS SOL ☀ Y LUNA ☾ — Animaciones de transición
   ============================================================================
   Los dos iconos están posicionados uno encima del otro (position: absolute).
   Se alterna su visibilidad con opacity y se animan con rotate + scale
   para crear un efecto de "giro" al cambiar de modo.
   ============================================================================ */

/* Estilos base compartidos por ambos iconos */
.seb-dmt-icon {
    position: absolute;           /* Superpuestos en el mismo espacio */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* MODO CLARO: El sol ☀ es visible, la luna ☾ está oculta */

/* Sol visible — posición normal, tamaño completo */
.seb-dmt-icon--sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Luna oculta — rotada -90° y reducida al 50% */
.seb-dmt-icon--moon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

/* MODO OSCURO: La luna ☾ es visible, el sol ☀ está oculto */

/* Sol oculto en modo oscuro — rota 90° en sentido contrario y se encoge */
body.seb-dark-mode .seb-dmt-icon--sun {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

/* Luna visible en modo oscuro — posición normal, tamaño completo */
body.seb-dark-mode .seb-dmt-icon--moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}


/* ============================================================================
   3. MODO OSCURO — Estilos globales
   ============================================================================
   Los colores específicos (variables CSS) se inyectan desde PHP.
   Aquí solo se define el esquema de color y las transiciones.
   ============================================================================ */

/* Indicar al navegador que estamos en esquema oscuro.
   Esto hace que los inputs nativos, scrollbars y otros elementos del
   navegador se adapten automáticamente al modo oscuro. */
body.seb-dark-mode {
    color-scheme: dark;
}

/* Transición suave para TODOS los elementos de la página.
   Esto hace que los colores de fondo, texto, bordes y sombras
   cambien gradualmente al activar/desactivar el modo oscuro,
   en vez de cambiar instantáneamente (que sería muy brusco). */
body *,
body *::before,
body *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Transición específica para bloques de Gutenberg con fondo personalizado.
   La clase .has-background la añade WordPress a bloques con color de fondo. */
body.seb-dark-mode .has-background {
    transition: background-color 0.3s ease;
}


/* ============================================================================
   4. BOTÓN FLOTANTE — Posición fija en esquina inferior derecha
   ============================================================================
   Se muestra solo si la opción 'floating_button' está activada en el admin.
   El HTML se inyecta con PHP desde wp_footer.
   ============================================================================ */

/* Contenedor del botón flotante — posición fija que no se mueve al hacer scroll */
.seb-dmt-floating {
    position: fixed;
    bottom: 24px;                 /* Separación del borde inferior */
    right: 24px;                  /* Separación del borde derecho */
    z-index: 99999;               /* Siempre por encima de todo el contenido */
}

/* Botón flotante — más grande que el normal, con fondo sólido y sombra */
.seb-dark-mode-btn--floating {
    width: 52px;                  /* Más grande que el estándar (44px) */
    height: 52px;
    font-size: 24px;              /* Icono más grande */
    /* Colores usando las variables de Kadence (con fallback) */
    background: var(--global-palette8, #1a1a2e);  /* Fondo oscuro */
    color: var(--global-palette3, #e0e0e0);        /* Texto claro */
    border: none;                 /* Sin borde (tiene sombra en su lugar) */
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);      /* Sombra de elevación */
}

/* Botón flotante EN modo oscuro — colores invertidos */
body.seb-dark-mode .seb-dark-mode-btn--floating {
    background: var(--global-palette8, #ffffff);  /* Fondo claro en modo oscuro */
    color: var(--global-palette3, #333333);        /* Texto oscuro */
}

/* Efecto hover del botón flotante — sombra más pronunciada */
.seb-dark-mode-btn--floating:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}


/* ============================================================================
   5. PREVIEW DEL EDITOR — Estilos para la vista previa en Gutenberg
   ============================================================================
   En el editor de bloques, el botón se muestra como preview no interactiva.
   ============================================================================ */

/* Desactiva la interacción y reduce la opacidad para indicar que es una preview */
.seb-dark-mode-btn--preview {
    pointer-events: none;         /* No se puede hacer clic */
    opacity: 0.85;                /* Ligeramente transparente */
}