/**
 * ============================================================================
 * GLOBAL.CSS - Sistema de Diseño Base para Plataforma GMedia
 * ============================================================================
 * 
 * Este archivo contiene los estilos base (CORE) de la plataforma:
 * - Variables CSS (colores, tipografía, espaciados)
 * - Reset y normalización
 * - Estilos base del body y HTML
 * - Componentes base reutilizables (loading, utilidades)
 * 
 * IMPORTANTE:
 * - Este archivo se importa en todas las páginas vía layout_header.php o directamente
 * - Los estilos específicos de componentes (header, footer, cards) están en layout_header.php
 * - Los estilos específicos de página deben ir en <style> dentro de cada página
 * 
 * ============================================================================
 */

/* ============================================================================
   VARIABLES CSS - Sistema de Diseño
   ============================================================================
   USO: Usa estas variables en lugar de valores hardcodeados para mantener
   coherencia visual en toda la plataforma.
   
   Ejemplo:
     color: var(--color-primary);
     background: var(--bg-glass);
   ============================================================================ */

:root {
    /* --- Colores Principales --- */
    /* Color primario de la marca (verde Gravito) */
    --color-primary: #3BA776;
    --color-primary-light: #50C28E;
    --color-primary-dark: #2d8a5e;

    /* Colores de fondo */
    --bg-dark: #101010;
    --bg-dark-secondary: #0a0a0a;
    --bg-dark-tertiary: #1a1a1a;

    /* Colores de texto */
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #CCCCCC;
    --text-disabled: #666666;

    /* --- Bootstrap Overrides --- */
    --bs-secondary-color: #CCCCCC !important;
    --bs-secondary-color-rgb: 204, 204, 204 !important;
    --bs-muted-color: #CCCCCC !important;

    /* Colores de estado */
    --status-success: #28a745;
    --status-warning: #ffc107;
    --status-info: #17a2b8;
    --status-error: #dc3545;

    /* Colores de glassmorphism */
    --glass-bg: rgba(26, 26, 26, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-border-primary: rgba(59, 167, 118, 0.15);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* --- Tipografía --- */
    /* Fuente principal: Inter (cargada desde Google Fonts) */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;

    /* Tamaños de fuente base */
    --font-size-xs: 0.75rem;
    /* 12px */
    --font-size-sm: 0.85rem;
    /* 13.6px */
    --font-size-base: 0.95rem;
    /* 15.2px */
    --font-size-md: 1rem;
    /* 16px */
    --font-size-lg: 1.1rem;
    /* 17.6px */
    --font-size-xl: 1.5rem;
    /* 24px */
    --font-size-2xl: 2rem;
    /* 32px */

    /* Line height */
    --line-height-tight: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* --- Espaciados --- */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-2xl: 60px;

    /* --- Bordes y Radios --- */
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;
    --border-radius-full: 50%;

    /* --- Sombras --- */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-primary: 0 8px 20px rgba(59, 167, 118, 0.3);

    /* --- Transiciones --- */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* --- Z-index Scale --- */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 1000;
    --z-modal: 2000;
    --z-toast: 10000;
}

/* ============================================================================
   RESET Y NORMALIZACIÓN
   ============================================================================
   Estilos base para eliminar diferencias entre navegadores y establecer
   valores por defecto consistentes.
   ============================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    /* Base para rem */
}

/* ============================================================================
   ESTILOS BASE DEL BODY
   ============================================================================
   Estilos fundamentales que aplican a toda la plataforma.
   Incluye el fondo con efectos visuales característicos de Gravito.
   ============================================================================ */

body {
    font-family: var(--font-family);
    background-color: var(--bg-dark);
    color: var(--text-primary);
    line-height: var(--line-height-normal);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

/* Fondo con patrón de gradiente base */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 30%, rgba(26, 26, 26, 0.1) 30%, rgba(26, 26, 26, 0.1) 70%, transparent 70%),
        linear-gradient(-45deg, transparent 30%, rgba(26, 26, 26, 0.08) 30%, rgba(26, 26, 26, 0.08) 70%, transparent 70%),
        linear-gradient(135deg, var(--bg-dark-secondary) 0%, var(--bg-dark) 50%, var(--bg-dark-secondary) 100%);
    background-attachment: fixed;
    z-index: -2;
    pointer-events: none;
}

/* Fondo con patrón de puntos decorativos */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle, rgba(59, 167, 118, 0.20) 2px, transparent 2px),
        radial-gradient(circle, rgba(255, 152, 0, 0.20) 2px, transparent 2px);
    background-size: 120px 60px;
    background-position: 0 0, 60px 0;
    background-attachment: fixed;
    z-index: -1;
    pointer-events: none;
    opacity: 1;
}

/* ============================================================================
   COMPONENTES BASE - Loading Spinner
   ============================================================================
   USO: Para mostrar estados de carga en la plataforma.
   
   HTML:
     <div class="loading-animation">
         <div class="loading-spinner"></div>
     </div>
   
   NOTA: El contenedor .loading-animation centra el spinner.
   El spinner usa el color primario de la marca.
   ============================================================================ */

.loading-animation {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(59, 167, 118, 0.2);
    border-top: 2px solid var(--color-primary);
    border-radius: var(--border-radius-full);
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ============================================================================
   UTILIDADES - Clases Helper
   ============================================================================
   Clases pequeñas y reutilizables para casos comunes.
   ============================================================================ */

/* Clase para texto secundario/muted */
.text-muted {
    color: var(--text-muted) !important;
    font-size: var(--font-size-sm);
}

/* Clase para ocultar elementos */
.hidden {
    display: none;
}

/* Required field indicator - add to label elements */
.required-label::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
    margin-left: 2px;
}

/* ============================================================================
   ICONOS SVG - Estilos de Alineación
   ============================================================================ */
.icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 0;
}

.icon-svg svg {
    display: block;
}

/* ============================================================================
   SHARED ANIMATIONS
   ============================================================================ */
@keyframes slideInBottom {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* --- Shared Chat & Component Animations --- */

/* Slide from Left (Standard for AI/Assistant messages) */
@keyframes msgInLeft {
    0% {
        opacity: 0;
        transform: translateX(-30px) translateZ(0);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateZ(0);
    }
}

/* Slide from Right (Standard for User messages) */
@keyframes msgInRight {
    0% {
        opacity: 0;
        transform: translateX(30px) scale(0.95) translateZ(0);
    }

    100% {
        opacity: 1;
        transform: translateX(0) scale(1) translateZ(0);
    }
}

/* General Fade In with slight vertical movement */
@keyframes animFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px) translateZ(0);
    }

    to {
        opacity: 1;
        transform: translateY(0) translateZ(0);
    }
}

.anim-fade-in {
    animation: animFadeIn 0.8s ease forwards;
}

.slide-in-bottom {
    animation: slideInBottom 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.fade-in {
    animation: fadeIn 0.8s ease forwards;
    opacity: 0;
}

/* ============================================================================
   MOBILE TOUCH INTERACTIONS
   ============================================================================
   Mejoras para dispositivos táctiles y móviles
   ============================================================================ */

/* Touch-friendly cursor for interactive elements */
a,
/* Los enlaces ya tienen cursor pointer, incluyendo <a class="glass-card"> */
a.glass-card,
/* Explícito para claridad: tarjetas dentro de enlaces */
.glass-card[onclick],
/* Tarjetas con onclick */
button,
.btn-portal,
.btn-secondary,
.pack-card,
.deliverable-item,
.nav-item,
.checkbox-btn,
.radio-btn,
.file-input-wrapper label,
.pagination-btn,
.download-btn,
input[type="checkbox"],
input[type="radio"],
select,
[role="button"],
[onclick] {
    cursor: pointer;
}

/* Improved tap highlight for mobile */
* {
    -webkit-tap-highlight-color: rgba(59, 167, 118, 0.2);
    -webkit-touch-callout: none;
}

/* Active state for touch */
a:active,
a.glass-card:active,
/* Solo tarjetas clickeables */
button:active,
.btn-portal:active,
.pack-card:active {
    opacity: 0.9;
    transform: scale(0.98);
}

/* Ensure proper z-index layering */
.glass-card {
    position: relative;
    z-index: var(--z-base);
    /* Ensure content inside isn't blocked */
    isolation: isolate;
}

.glass-card:hover {
    z-index: calc(var(--z-base) + 1);
}

/* ============================================================================
   RESPONSIVE - Media Queries Base
   ============================================================================
   Breakpoints y ajustes responsive básicos.
   ============================================================================ */

@media (max-width: 1020px) {

    /* Bloqueo de desbordamiento horizontal en móvil */
    html,
    body {
        max-width: 100vw;
        overflow-x: hidden;
        position: relative;
    }

    /* Ajuste del tamaño base de fuente en móvil */
    html {
        font-size: 14px;
    }

    /* PREVENCIÓN DE ZOOM EN IOS: Inputs deben tener 16px mínimo */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px !important;
        max-height: 100%;
        /* Fix para Safari resize */
    }
}

/* ============================================================================
   NOTAS DE USO
   ============================================================================
   
   1. VARIABLES CSS:
      - Siempre usa variables CSS en lugar de valores hardcodeados
      - Ejemplo: color: var(--color-primary) en lugar de color: #3BA776
      - Esto facilita cambios globales y mantiene coherencia
   
   2. COMPONENTES ESPECÍFICOS:
      - Los estilos de header, footer, cards y botones están en layout_header.php
      - No dupliques estos estilos aquí
      - Si necesitas variaciones, usa clases específicas en cada página
   
   3. ESTILOS DE PÁGINA:
      - Cada página puede tener sus propios estilos en <style>
      - Usa las variables CSS definidas arriba
      - Mantén la coherencia con el sistema de diseño
   
   4. NUEVOS COMPONENTES:
      - Si creas un componente reutilizable usado en múltiples páginas,
        considera agregarlo aquí o crear un archivo CSS de componente
      - Si es específico de una página, déjalo en el <style> de esa página
   
   5. RESPONSIVE:
      - Siempre prueba en móvil (max-width: 1020px)
      - Usa las variables de espaciado para mantener consistencia
      - Evita valores fijos que rompan el diseño en diferentes tamaños
   
   ============================================================================
 */

/* ============================================================================
   GLOBAL ANIMATIONS EXTENDED (Standardized from focus_room.php)
   ============================================================================ */

/* Fade In Up (used for buttons, cards) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Floating Animation (used for avatars) */
@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Wave Animation (used for typing dots) */
@keyframes wave {

    0%,
    60%,
    100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-7px);
    }
}

/* Blinking Cursor (used for typewriter) */
@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Utility classes for these animations */
.fade-in-up {
    animation: fadeInUp 0.5s ease-out;
}

.float-anim {
    animation: float 6s ease-in-out infinite;
}

.blink-anim {
    animation: blink 1s step-end infinite;
}

/* Tool UI Components */
.tool-usage-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    margin: 10px 0;
    font-size: 0.85rem;
    color: var(--text-secondary);
    width: fit-content;
    max-width: 100%;
    word-break: break-word;
    animation: fadeInUp 0.3s ease-out;
}

.tool-usage-card strong {
    color: var(--color-primary);
}

.tool-status-indicator {
    background: rgba(100, 149, 237, 0.1);
    border-left: 3px solid #6495ed;
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 4px;
    animation: fadeIn 0.4s ease-in;
    display: flex;
    align-items: center;
    gap: 10px;
}

.tool-status-indicator .status-text {
    font-size: 0.9em;
    font-weight: 500;
    color: #6495ed;
}

/* Global Toast Notifications (Centralized from chat_interface.css) */
.toast {
    position: fixed;
    top: 90px;
    right: var(--spacing-md);
    min-width: 300px;
    max-width: 400px;
    padding: var(--spacing-md);
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--border-radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    transform: translateX(120%);
    transition: transform var(--transition-base);
    pointer-events: auto;
}

.toast.show {
    transform: translateX(0);
}

.toast-info {
    border-left-color: var(--status-info, #3498db);
}

.toast-success {
    border-left-color: var(--status-success, #2ecc71);
}

.toast-warning {
    border-left-color: var(--status-warning, #f1c40f);
}

.toast-error {
    border-left-color: var(--status-error, #e74c3c);
}

/* ============================================================================
   TYPING INDICATOR (Centralized)
   ============================================================================ */
.typing-indicator {
    display: none;
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.05);
    padding: 15px 25px;
    border-radius: 20px;
    margin-bottom: 20px;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--text-secondary);
    border-radius: 50%;
    margin-right: 5px;
    animation: wave 1.3s linear infinite;
}

.dot:nth-child(2) {
    animation-delay: -1.1s;
}

.dot:nth-child(3) {
    animation-delay: -0.9s;
}

/* ============================================================================
   VOICE DICTATION (Microphone Button)
   ============================================================================ */
.mic-button {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    color: var(--color-primary);
    cursor: pointer;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-bottom: 5px;
    margin-right: 8px;
    /* Separación sutil del botón enviar */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.mic-button:hover {
    background: rgba(59, 167, 118, 0.1);
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(59, 167, 118, 0.2);
    transform: scale(1.05);
    color: var(--color-primary-light);
}

.mic-button.recording {
    background: rgba(220, 53, 69, 0.1);
    border-color: var(--status-error);
    color: var(--status-error);
    box-shadow: 0 0 20px rgba(220, 53, 69, 0.4);
    animation: micPulse 1.5s infinite;
}

@keyframes micPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.4);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(220, 53, 69, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
    }
}