/**
 * ============================================================
 * ESTILOS PERSONALIZADOS
 * ============================================================
 *
 * Estilos adicionales que complementan a Tailwind CSS.
 * Tailwind cubre el 95% de los estilos con sus clases utilitarias,
 * pero algunos efectos especiales necesitan CSS personalizado.
 *
 * Este archivo se carga en templates/layout.php
 */

/* ── Transiciones suaves para todos los elementos interactivos ── */
a, button, input, select, textarea {
    transition: all 0.2s ease-in-out;
}

/* ── Zona de drag & drop: borde animado cuando se arrastra ───── */
.dropzone-active {
    border-color: #3b82f6 !important; /* primary-500 */
    background-color: #eff6ff !important; /* primary-50 */
    border-style: solid !important;
}

/* ── Animación de carga (spinner) ─────────────────────────────── */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ── Animación de aparición suave (fade in) ───────────────────── */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.3s ease-out forwards;
}

/* ── Barra de progreso ────────────────────────────────────────── */
.progress-bar {
    transition: width 0.5s ease-in-out;
}

/* ── Modal overlay ────────────────────────────────────────────── */
.modal-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

/* ── Tabla KPI: estilos para las tablas generadas ─────────────── */
/* Estos estilos se aplican a las tablas HTML que genera HtmlBuilder.php
   para los emails. En el preview del wizard, mostramos las tablas
   con estos estilos. */
.kpi-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.875rem;
}

.kpi-table th {
    background-color: #f3f4f6;
    font-weight: 600;
    text-align: center;
    border: 1px solid #000;
    padding: 8px 12px;
}

.kpi-table td {
    text-align: center;
    border: 1px solid #000;
    padding: 6px 12px;
}

.kpi-table .kpi-header {
    background-color: #fef08a; /* amarillo */
    font-weight: 700;
}

.kpi-table .kpi-compliant {
    background-color: #bbf7d0; /* verde claro */
    font-weight: 600;
}

.kpi-table .kpi-non-compliant {
    background-color: #ffffff;
    font-weight: 400;
}

/* ── Scrollbar personalizada para áreas de texto ──────────────── */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #64748b;
}

/* ── MODO OSCURO ──────────────────────────────────────────────── */

/* Scrollbar oscura en modo dark */
.dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #1f2937;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #4b5563;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* Zona de drag & drop en modo oscuro */
.dark .dropzone-active {
    border-color: #60a5fa !important; /* primary-400 */
    background-color: #1e3a8a !important; /* primary-900 */
}

/* Modal overlay más oscuro en modo dark */
.dark .modal-overlay {
    background-color: rgba(0, 0, 0, 0.75);
}

/* Tabla KPI en modo oscuro */
.dark .kpi-table th {
    background-color: #374151;
    color: #f9fafb;
    border-color: #4b5563;
}

.dark .kpi-table td {
    border-color: #4b5563;
    color: #e5e7eb;
}

.dark .kpi-table .kpi-header {
    background-color: #ca8a04;
    color: #ffffff;
}

.dark .kpi-table .kpi-compliant {
    background-color: #166534;
    color: #dcfce7;
}

.dark .kpi-table .kpi-non-compliant {
    background-color: #1f2937;
    color: #e5e7eb;
}

/* Transiciones suaves para el cambio de tema */
* {
    transition-property: background-color, border-color, color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Deshabilitar transición durante carga inicial */
.preload * {
    transition: none !important;
}

/* ══════════════════════════════════════════════════════════════
   GUÍA DE PERSONALIZACIÓN MANUAL DE ESTILOS
   ══════════════════════════════════════════════════════════════
   
   Esta sección proporciona indicaciones para personalizar los estilos
   de cada parte de la aplicación de forma manual.
   
   ESTRUCTURA DE LA APLICACIÓN:
   
   1. PÁGINA PRINCIPAL (index.php)
      - Tarjetas de acceso rápido
      - Área de información "¿Cómo funciona?"
   
   2. WIZARD (Asistente de envío)
      - Paso 1: Zonas de drag & drop para subir archivos
      - Paso 2: Selección de columnas
      - Paso 3: Vista previa de datos
      - Paso 4: Confirmación y envío
   
   3. DASHBOARD (Panel de control)
      - Tarjetas de estadísticas
      - Tabla del historial de envíos
      - Badges de estado (enviado, fallido, descargado)
      - Paginación
   
   4. PLANTILLAS (Gestión de templates)
      - Lista de plantillas
      - Editor de plantillas
   
   5. CONFIGURACIÓN SMTP
      - Formulario de configuración
      - Botones de presets rápidos
      - Tarjetas de ayuda lateral
   
   ────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   SECCIÓN 1: TARJETAS (CARDS)
   ══════════════════════════════════════════════════════════════
   
   Las tarjetas son los elementos rectangulares con bordes redondeados
   que contienen información o acciones.
   
   CLASES UTILIZADAS:
   - Modo claro: bg-white, border-gray-200
   - Modo oscuro: dark:bg-gray-800, dark:border-gray-700
   
   PERSONALIZACIÓN:
   ────────────────────────────────────────────────────────────── */

/* Ejemplo: Cambiar el color de fondo de todas las tarjetas en modo oscuro */
/*
.dark .bg-gray-800 {
    background-color: #1a1a2e !important;
}
*/

/* Ejemplo: Añadir sombra personalizada a las tarjetas */
/*
.shadow-sm {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.dark .shadow-sm {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
*/

/* ══════════════════════════════════════════════════════════════
   SECCIÓN 2: INPUTS Y FORMULARIOS
   ══════════════════════════════════════════════════════════════
   
   Los inputs son los campos de texto donde el usuario introduce datos.
   
   CLASES UTILIZADAS:
   - Modo claro: bg-white, border-gray-300, text-gray-900
   - Modo oscuro: dark:bg-gray-700, dark:border-gray-600, dark:text-gray-100
   
   PERSONALIZACIÓN:
   ────────────────────────────────────────────────────────────── */

/* Ejemplo: Cambiar el color de fondo de los inputs */
/*
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
    background-color: #ffffff;
    border-color: #d1d5db;
}

.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark textarea,
.dark select {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}
*/

/* Ejemplo: Personalizar el color del borde al hacer focus */
/*
input:focus,
textarea:focus,
select:focus {
    border-color: #3b82f6;
    ring-color: rgba(59, 130, 246, 0.5);
}
*/

/* ══════════════════════════════════════════════════════════════
   SECCIÓN 3: BOTONES
   ══════════════════════════════════════════════════════════════
   
   Los botones permiten al usuario realizar acciones.
   
   TIPOS DE BOTONES:
   - Botón primario: bg-primary-600, hover:bg-primary-700
   - Botón secundario: bg-white, border-gray-300, hover:bg-gray-50
   - Botón de éxito: bg-green-600, hover:bg-green-700
   - Botón de peligro: bg-red-600, hover:bg-red-700
   
   PERSONALIZACIÓN:
   ────────────────────────────────────────────────────────────── */

/* Ejemplo: Cambiar el color de los botones primarios */
/*
.bg-primary-600 {
    background-color: #2563eb !important;
}

.hover\:bg-primary-700:hover {
    background-color: #1d4ed8 !important;
}

.dark .dark\:hover\:bg-primary-500:hover {
    background-color: #3b82f6 !important;
}
*/

/* Ejemplo: Añadir efecto de sombra a los botones al hacer hover */
/*
button:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dark button:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
*/

/* ══════════════════════════════════════════════════════════════
   SECCIÓN 4: TABLAS
   ══════════════════════════════════════════════════════════════
   
   Las tablas muestran datos en filas y columnas.
   
   CLASES UTILIZADAS:
   - Encabezado: bg-gray-50, dark:bg-gray-900
   - Filas: bg-white, dark:bg-gray-800
   - Hover: hover:bg-gray-50, dark:hover:bg-gray-700
   - Bordes: divide-gray-200, dark:divide-gray-700
   
   PERSONALIZACIÓN:
   ────────────────────────────────────────────────────────────── */

/* Ejemplo: Cambiar el color de fondo del encabezado de la tabla */
/*
thead.bg-gray-50 {
    background-color: #f9fafb;
}

.dark thead.dark\:bg-gray-900 {
    background-color: #111827;
}
*/

/* Ejemplo: Cambiar el color de las filas al hacer hover */
/*
tbody tr:hover {
    background-color: #f3f4f6;
}

.dark tbody tr:hover {
    background-color: #374151;
}
*/

/* Ejemplo: Añadir zebra striping (filas alternadas) */
/*
tbody tr:nth-child(odd) {
    background-color: #ffffff;
}

tbody tr:nth-child(even) {
    background-color: #f9fafb;
}

.dark tbody tr:nth-child(odd) {
    background-color: #1f2937;
}

.dark tbody tr:nth-child(even) {
    background-color: #111827;
}
*/

/* ══════════════════════════════════════════════════════════════
   SECCIÓN 5: BADGES (ETIQUETAS DE ESTADO)
   ══════════════════════════════════════════════════════════════
   
   Los badges son pequeñas etiquetas que muestran estados o categorías.
   
   TIPOS DE BADGES:
   - Éxito/Enviado: bg-green-100, text-green-800 (claro)
                    dark:bg-green-900, dark:text-green-200 (oscuro)
   - Error/Fallido: bg-red-100, text-red-800 (claro)
                    dark:bg-red-900, dark:text-red-200 (oscuro)
   - Info/Descargado: bg-blue-100, text-blue-800 (claro)
                      dark:bg-blue-900, dark:text-blue-200 (oscuro)
   - Advertencia: bg-yellow-100, text-yellow-800 (claro)
                  dark:bg-yellow-900, dark:text-yellow-200 (oscuro)
   
   PERSONALIZACIÓN:
   ────────────────────────────────────────────────────────────── */

/* Ejemplo: Cambiar el estilo de los badges de éxito */
/*
.bg-green-100 {
    background-color: #d1fae5;
}

.text-green-800 {
    color: #065f46;
}

.dark .dark\:bg-green-900 {
    background-color: #064e3b;
}

.dark .dark\:text-green-200 {
    color: #a7f3d0;
}
*/

/* Ejemplo: Añadir borde a los badges */
/*
span[class*="bg-green-"],
span[class*="bg-red-"],
span[class*="bg-blue-"],
span[class*="bg-yellow-"] {
    border: 1px solid currentColor;
    border-opacity: 0.3;
}
*/

/* ══════════════════════════════════════════════════════════════
   SECCIÓN 6: ZONAS DE DRAG & DROP
   ══════════════════════════════════════════════════════════════
   
   Las zonas de drag & drop permiten subir archivos arrastrándolos.
   
   ESTADOS:
   - Normal: border-gray-300, dark:border-gray-600
   - Hover: hover:border-primary-400, dark:hover:border-primary-500
   - Éxito: border-green-400, bg-green-50/30
   - Error: border-red-400
   
   PERSONALIZACIÓN:
   ────────────────────────────────────────────────────────────── */

/* Ejemplo: Cambiar el estilo del dropzone */
/*
.border-dashed {
    border-style: dashed;
    border-width: 2px;
}

.border-gray-300 {
    border-color: #d1d5db;
}

.dark .dark\:border-gray-600 {
    border-color: #4b5563;
}
*/

/* Ejemplo: Personalizar el hover del dropzone */
/*
.dropzone:hover {
    background-color: rgba(59, 130, 246, 0.05);
    border-color: #3b82f6;
}

.dark .dropzone:hover {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: #60a5fa;
}
*/

/* ══════════════════════════════════════════════════════════════
   SECCIÓN 7: ÁREAS INFORMATIVAS
   ══════════════════════════════════════════════════════════════
   
   Las áreas informativas muestran consejos, ayuda o mensajes importantes.
   
   TIPOS:
   - Info (azul): bg-blue-50, border-blue-200, text-blue-700
   - Advertencia (amarillo): bg-amber-50, border-amber-200, text-amber-700
   - Éxito (verde): bg-green-50, border-green-200, text-green-700
   - Error (rojo): bg-red-50, border-red-200, text-red-700
   
   PERSONALIZACIÓN:
   ────────────────────────────────────────────────────────────── */

/* Ejemplo: Personalizar el área informativa azul */
/*
.bg-blue-50 {
    background-color: #eff6ff;
}

.border-blue-200 {
    border-color: #bfdbfe;
}

.text-blue-700 {
    color: #1d4ed8;
}

.dark .dark\:bg-blue-900\/20 {
    background-color: rgba(30, 58, 138, 0.2);
}

.dark .dark\:border-blue-800 {
    border-color: #1e40af;
}

.dark .dark\:text-blue-300 {
    color: #93c5fd;
}
*/

/* ══════════════════════════════════════════════════════════════
   SECCIÓN 8: NAVEGACIÓN Y PAGINACIÓN
   ══════════════════════════════════════════════════════════════
   
   Los elementos de navegación incluyen botones de paginación, links, etc.
   
   CLASES UTILIZADAS:
   - Botones de paginación: bg-white, border-gray-300, hover:bg-gray-50
   - Página activa: bg-primary-600, text-white
   
   PERSONALIZACIÓN:
   ────────────────────────────────────────────────────────────── */

/* Ejemplo: Personalizar la paginación */
/*
.pagination-button {
    background-color: #ffffff;
    border: 1px solid #d1d5db;
}

.pagination-button:hover {
    background-color: #f3f4f6;
}

.pagination-button.active {
    background-color: #2563eb;
    color: #ffffff;
}

.dark .pagination-button {
    background-color: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

.dark .pagination-button:hover {
    background-color: #4b5563;
}
*/

/* ══════════════════════════════════════════════════════════════
   SECCIÓN 9: COLORES PRINCIPALES (BRAND COLORS)
   ══════════════════════════════════════════════════════════════
   
   Los colores principales de la aplicación se definen aquí.
   Puedes cambiarlos para adaptar la aplicación a tu marca.
   
   COLORES ACTUALES:
   - Primario (primary): Azul (#2563eb)
   - Éxito (success): Verde (#22c55e)
   - Error (error): Rojo (#ef4444)
   - Advertencia (warning): Amarillo (#f59e0b)
   - Info: Azul claro (#3b82f6)
   
   PERSONALIZACIÓN:
   ────────────────────────────────────────────────────────────── */

/* Ejemplo: Cambiar el color primario de toda la aplicación */
/*
:root {
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-200: #bfdbfe;
    --color-primary-300: #93c5fd;
    --color-primary-400: #60a5fa;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary-800: #1e40af;
    --color-primary-900: #1e3a8a;
}

.bg-primary-600 {
    background-color: var(--color-primary-600) !important;
}

.text-primary-600 {
    color: var(--color-primary-600) !important;
}

.border-primary-600 {
    border-color: var(--color-primary-600) !important;
}
*/

/* ══════════════════════════════════════════════════════════════
   NOTAS FINALES
   ══════════════════════════════════════════════════════════════
   
   - Todos los ejemplos están comentados por defecto
   - Descomenta (quita los símbolos de comentario) y modifica según necesites
   - Usa !important solo cuando sea necesario para sobrescribir estilos
   - Los colores están en formato hexadecimal (#rrggbb)
   - Puedes usar herramientas como https://tailwindcss.com/docs/customizing-colors
     para generar paletas de colores coherentes
   - Recuerda probar tus cambios tanto en modo claro como en modo oscuro
   
   ══════════════════════════════════════════════════════════════ */