/**
 * ═══════════════════════════════════════════════════════════════════════════
 * INTISSAR BEAUTY - SISTEMA DE DISENO ANDALUSI v3.0
 * Inspirado en la Alhambra, Mezquita de Córdoba y Alcázar de Sevilla
 * Estilo Árabe-Español Premium para el Barrio de Salamanca, Madrid
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ============================================
   1. GOOGLE FONTS - TIPOGRAFIAS ANDALUSI
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Amiri:ital,wght@0,400;0,700;1,400&family=Scheherazade+New:wght@400;700&display=swap');

/* ============================================
   2. PALETA DE COLORES ANDALUSI
   Inspirada en los colores de la Alhambra y la cerámica nazarí
   
   IMPORTANTE: Los colores principales (esmeralda, oro, arena, negro)
   son sobrescritos por el sistema de temas dinámico (intissar-theme-system.js)
   ============================================ */
:root {
    /* === COLORES DEL SISTEMA DE TEMAS (DINAMICOS) === */
    /* Estos colores son sobrescritos por intissar-theme-system.js */
    /* Tema por defecto: Intissar Marfil Nazarí */
    --color-esmeralda: #B8956E;
    --color-esmeralda-dark: #9A7A58;
    --color-esmeralda-light: #D4B08E;
    --color-esmeralda-rgb: 184, 149, 110;
    
    --color-oro: #C8A97D;
    --color-oro-light: #E0C9A7;
    --color-oro-dark: #A08960;
    --color-oro-rosa: #B8956E;
    --color-oro-rgb: 200, 169, 125;
    
    --color-arena: #F5F0E6;
    --color-arena-dark: #EAE3D5;
    --color-arena-rgb: 245, 240, 230;
    
    --color-negro: #4A4036;
    --color-negro-noche: #3A3026;
    --color-azul-noche: #5A5046;
    --color-negro-rgb: 74, 64, 54;
    
    --color-marfil: #F5F0E6;
    --color-marfil-light: #FAF7F2;
    --color-marfil-dark: #EAE3D5;
    
    /* === COLORES SECUNDARIOS ANDALUSI (ESTATICOS) === */
    /* Azul Alhambra - Azul profundo de los azulejos nazaríes */
    --color-azul-alhambra: #1A3A5C;
    --color-azul-alhambra-light: #2A5A8C;
    --color-azul-alhambra-dark: #0D2840;
    --color-azul-alhambra-rgb: 26, 58, 92;
    
    /* Oro Nazari - Dorado cálido de los estucos de la Alhambra */
    --color-oro-nazari: #C8A45C;
    --color-oro-nazari-light: #D4B87A;
    --color-oro-nazari-dark: #A88840;
    --color-oro-nazari-rgb: 200, 164, 92;
    
    /* Terracota Andalusi - Tono cálido de la tierra mediterránea */
    --color-terracota: #B86B4C;
    --color-terracota-light: #D4896A;
    --color-terracota-dark: #8C5038;
    --color-terracota-rgb: 184, 107, 76;
    
    /* Verde Alhambra - Verde agua de los jardines del Generalife */
    --color-verde-alhambra: #2D6B5A;
    --color-verde-alhambra-light: #3D8B7A;
    --color-verde-alhambra-dark: #1D4B3A;
    --color-verde-alhambra-rgb: 45, 107, 90;
    
    /* Granate Cordobes - Rojo profundo de la cerámica */
    --color-granate: #7A2A3A;
    --color-granate-light: #9A4A5A;
    --color-granate-dark: #5A1A2A;
    
    /* Ocre Sevillano - Amarillo cálido mediterráneo */
    --color-ocre: #D4A54A;
    --color-ocre-light: #E4C56A;
    --color-ocre-dark: #B48530;
    
    /* Cobre/Rose Gold - Para el tema Intissar */
    --color-cobre: #B8956E;
    --color-cobre-light: #D4B08E;
    --color-cobre-dark: #9A7A58;
    
    /* === COLORES NEUTRALES === */
    --color-negro-andalusi: #1C1A18;
    --color-negro-suave: #2C2A28;
    --color-gris-piedra: #6B6560;
    --color-gris-claro: #A8A298;
    --color-blanco-puro: #FFFFFF;
    --color-sombra: rgba(28, 26, 24, 0.12);
    
    /* === COLORES DE ESTADO === */
    --color-exito: var(--color-esmeralda);
    --color-exito-light: rgba(45, 107, 90, 0.15);
    --color-alerta: var(--color-ocre);
    --color-alerta-light: rgba(212, 165, 74, 0.15);
    --color-error: var(--color-terracota);
    --color-error-light: rgba(184, 107, 76, 0.15);
    --color-info: var(--color-azul-alhambra);
    --color-info-light: rgba(26, 58, 92, 0.15);
    
    /* === ALIASES PARA COMPATIBILIDAD === */
    /* Mapeo de variables antiguas a nuevas */
    --primary-color: var(--color-esmeralda);
    --primary-dark: var(--color-esmeralda-dark);
    --primary-light: var(--color-esmeralda-light);
    --accent-color: var(--color-oro);
    --accent-light: var(--color-oro-light);
    --accent-dark: var(--color-oro-dark);
    --background-color: var(--color-arena);
    --background-dark: var(--color-arena-dark);
    --text-color: var(--color-negro);
    --text-dark: var(--color-negro-noche);
    
    /* === TIPOGRAFIAS === */
    --font-heading: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
    --font-heading-alt: 'Cormorant Garamond', Georgia, serif;
    --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-arabic: 'Amiri', 'Scheherazade New', 'Traditional Arabic', serif;
    --font-decorative: 'Cormorant Garamond', Georgia, serif;
    
    /* === TAMANOS DE FUENTE === */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-7xl: 4.5rem;
    
    /* === ESPACIADO === */
    --spacing-1: 0.25rem;
    --spacing-2: 0.5rem;
    --spacing-3: 0.75rem;
    --spacing-4: 1rem;
    --spacing-5: 1.25rem;
    --spacing-6: 1.5rem;
    --spacing-8: 2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;
    --spacing-20: 5rem;
    
    /* === BORDES ANDALUSI === */
    --radius-sm: 0.375rem;
    --radius-md: 0.625rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
    --radius-arch: 50% 50% 0 0; /* Arco de herradura */
    --radius-full: 9999px;
    
    /* === SOMBRAS ANDALUSI === */
    --shadow-sm: 0 2px 4px rgba(28, 26, 24, 0.06);
    --shadow-md: 0 4px 12px rgba(28, 26, 24, 0.08), 0 2px 4px rgba(28, 26, 24, 0.04);
    --shadow-lg: 0 8px 24px rgba(28, 26, 24, 0.1), 0 4px 8px rgba(28, 26, 24, 0.06);
    --shadow-xl: 0 16px 48px rgba(28, 26, 24, 0.12), 0 8px 16px rgba(28, 26, 24, 0.08);
    --shadow-2xl: 0 24px 64px rgba(28, 26, 24, 0.15);
    --shadow-oro: 0 8px 32px rgba(200, 164, 92, 0.25);
    --shadow-azul: 0 8px 32px rgba(26, 58, 92, 0.2);
    --shadow-inner: inset 0 2px 4px rgba(28, 26, 24, 0.08);
    
    /* === TRANSICIONES === */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-elegant: 600ms cubic-bezier(0.23, 1, 0.32, 1);
    
    /* === Z-INDEX === */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 9999;
}

/* ============================================
   3. RESET Y BASE ANDALUSI
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.65;
    color: var(--color-negro);
    background-color: var(--color-arena);
    margin: 0;
    padding: 0;
}

/* ============================================
   4. PATRONES GEOMETRICOS NAZARIES
   Inspirados en los azulejos de la Alhambra
   ============================================ */

/* Patron Zellige - Mosaico geometrico */
.pattern-zellige {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8A45C' fill-opacity='0.08'%3E%3Cpath d='M30 0l30 30-30 30L0 30 30 0zm0 10L10 30l20 20 20-20-20-20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Patron Zellige Oscuro */
.pattern-zellige-dark {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23C8A45C' fill-opacity='0.15'%3E%3Cpath d='M30 0l30 30-30 30L0 30 30 0zm0 10L10 30l20 20 20-20-20-20z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* Patron Estrella de 8 puntas (Rub el Hizb) */
.pattern-estrella {
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C8A45C' stroke-opacity='0.1' stroke-width='1'%3E%3Cpath d='M40 0 L50 30 L80 40 L50 50 L40 80 L30 50 L0 40 L30 30 Z'/%3E%3Cpath d='M40 15 L45 35 L65 40 L45 45 L40 65 L35 45 L15 40 L35 35 Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Patron Arabesco floral */
.pattern-arabesco {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231A3A5C' stroke-opacity='0.06' stroke-width='0.5'%3E%3Ccircle cx='50' cy='50' r='40'/%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3Ccircle cx='50' cy='50' r='20'/%3E%3Cpath d='M50 10 Q70 30 50 50 Q30 30 50 10'/%3E%3Cpath d='M90 50 Q70 70 50 50 Q70 30 90 50'/%3E%3Cpath d='M50 90 Q30 70 50 50 Q70 70 50 90'/%3E%3Cpath d='M10 50 Q30 30 50 50 Q30 70 10 50'/%3E%3C/g%3E%3C/svg%3E");
}

/* Patron Hexagonal (tipo mezquita) */
.pattern-hexagonal {
    background-image: url("data:image/svg+xml,%3Csvg width='56' height='100' viewBox='0 0 56 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23C8A45C' stroke-opacity='0.08'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23C8A45C' stroke-opacity='0.05'/%3E%3C/svg%3E");
}

/* ============================================
   5. TIPOGRAFIA ANDALUSI
   ============================================ */

/* Headings principales */
h1, h2, h3, h4, h5, h6,
.heading, .title {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-negro);
    margin: 0 0 var(--spacing-4);
    letter-spacing: -0.01em;
}

h1, .h1 { 
    font-size: var(--text-5xl); 
    font-weight: 700;
    letter-spacing: -0.02em; 
}
h2, .h2 { 
    font-size: var(--text-4xl); 
    letter-spacing: -0.015em; 
}
h3, .h3 { font-size: var(--text-3xl); }
h4, .h4 { font-size: var(--text-2xl); }
h5, .h5 { font-size: var(--text-xl); }
h6, .h6 { font-size: var(--text-lg); }

/* Titulos especiales Andalusi */
.heading-andalusi {
    font-family: var(--font-heading);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    position: relative;
    display: inline-block;
}

.heading-andalusi::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-oro), transparent);
}

.heading-arabe {
    font-family: var(--font-arabic);
    font-size: 1.3em;
    color: var(--color-oro);
    direction: rtl;
    unicode-bidi: bidi-override;
}

.heading-luxury {
    font-family: var(--font-heading);
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.heading-elegant {
    font-family: var(--font-heading-alt);
    font-style: italic;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* Body text */
p {
    margin: 0 0 var(--spacing-4);
    line-height: 1.75;
}

.lead {
    font-size: var(--text-lg);
    font-weight: 300;
    line-height: 1.85;
    color: var(--color-gris-piedra);
}

.text-small { font-size: var(--text-sm); }
.text-tiny { font-size: var(--text-xs); }

/* Links */
a {
    color: var(--color-azul-alhambra);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-azul-alhambra-dark);
}

/* Text utilities */
.text-oro { color: var(--color-oro); }
.text-azul { color: var(--color-azul-alhambra); }
.text-verde { color: var(--color-esmeralda); }
.text-terracota { color: var(--color-terracota); }
.text-granate { color: var(--color-granate); }
.text-blanco { color: var(--color-blanco-puro); }
.text-muted { color: var(--color-gris-piedra); }
.text-dark { color: var(--color-negro); }

/* ============================================
   6. GRADIENTES ANDALUSI
   ============================================ */

/* Gradiente Alhambra (azul a verde) */
.gradient-alhambra {
    background: linear-gradient(135deg, var(--color-azul-alhambra) 0%, var(--color-esmeralda) 100%);
}

/* Gradiente Nazari (oro) */
.gradient-nazari {
    background: linear-gradient(135deg, var(--color-oro-dark) 0%, var(--color-oro) 50%, var(--color-oro-light) 100%);
}

/* Gradiente Cordoba (granate a terracota) */
.gradient-cordoba {
    background: linear-gradient(135deg, var(--color-granate) 0%, var(--color-terracota) 100%);
}

/* Gradiente Generalife (verde jardín) */
.gradient-generalife {
    background: linear-gradient(135deg, var(--color-esmeralda-dark) 0%, var(--color-esmeralda-light) 100%);
}

/* Gradiente Noche Andalusi */
.gradient-noche {
    background: linear-gradient(180deg, var(--color-negro) 0%, var(--color-azul-alhambra-dark) 50%, var(--color-azul-alhambra) 100%);
}

/* Gradiente Ocaso (sunset) */
.gradient-ocaso {
    background: linear-gradient(135deg, var(--color-ocre) 0%, var(--color-terracota) 50%, var(--color-granate) 100%);
}

/* Gradiente Marfil */
.gradient-marfil {
    background: linear-gradient(180deg, var(--color-marfil-light) 0%, var(--color-marfil-dark) 100%);
}

/* Gradiente Premium */
.gradient-premium {
    background: linear-gradient(135deg, var(--color-azul-alhambra) 0%, var(--color-granate) 50%, var(--color-oro) 100%);
}

/* Texto con gradiente oro */
.text-gradient-oro {
    background: linear-gradient(135deg, var(--color-oro-dark) 0%, var(--color-oro) 50%, var(--color-oro-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   7. BOTONES ANDALUSI
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Boton Primario Azul Alhambra */
.btn-primary {
    background: var(--color-azul-alhambra);
    color: var(--color-blanco-puro);
}

.btn-primary:hover:not(:disabled) {
    background: var(--color-azul-alhambra-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-azul);
}

/* Boton Oro Nazari */
.btn-oro {
    background: linear-gradient(135deg, var(--color-oro) 0%, var(--color-oro-dark) 100%);
    color: var(--color-negro);
}

.btn-oro:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-oro);
}

/* Boton Oro con brillo */
.btn-oro-shine {
    background: linear-gradient(135deg, var(--color-oro) 0%, var(--color-oro-dark) 100%);
    color: var(--color-negro);
    position: relative;
    overflow: hidden;
}

.btn-oro-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.6s ease;
}

.btn-oro-shine:hover::before {
    left: 100%;
}

.btn-oro-shine:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--shadow-oro);
}

/* Boton Verde Alhambra */
.btn-verde {
    background: var(--color-esmeralda);
    color: var(--color-blanco-puro);
}

.btn-verde:hover:not(:disabled) {
    background: var(--color-esmeralda-dark);
    transform: translateY(-2px);
}

/* Boton Outline */
.btn-outline {
    background: transparent;
    border: 2px solid var(--color-azul-alhambra);
    color: var(--color-azul-alhambra);
}

.btn-outline:hover:not(:disabled) {
    background: var(--color-azul-alhambra);
    color: var(--color-blanco-puro);
}

/* Boton Outline Oro */
.btn-outline-oro {
    background: transparent;
    border: 2px solid var(--color-oro);
    color: var(--color-oro);
}

.btn-outline-oro:hover:not(:disabled) {
    background: var(--color-oro);
    color: var(--color-negro);
}

/* Boton Ghost */
.btn-ghost {
    background: transparent;
    color: var(--color-azul-alhambra);
}

.btn-ghost:hover:not(:disabled) {
    background: rgba(26, 58, 92, 0.1);
}

/* Boton Blanco */
.btn-white {
    background: var(--color-blanco-puro);
    color: var(--color-azul-alhambra);
}

.btn-white:hover:not(:disabled) {
    background: var(--color-arena);
}

/* Tamanos de boton */
.btn-lg {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--text-base);
}

.btn-sm {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--text-xs);
}

.btn-rounded {
    border-radius: var(--radius-full);
}

.btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius-lg);
}

/* ============================================
   8. TARJETAS ANDALUSI
   ============================================ */
.card {
    background: var(--color-blanco-puro);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    transition: all var(--transition-elegant);
    position: relative;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.card-header {
    padding: var(--spacing-6);
    border-bottom: 1px solid var(--color-marfil-dark);
}

.card-body {
    padding: var(--spacing-6);
}

.card-footer {
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-arena);
    border-top: 1px solid var(--color-marfil-dark);
}

/* Tarjeta Andalusi con borde decorativo */
.card-andalusi {
    position: relative;
    background: linear-gradient(180deg, var(--color-blanco-puro) 0%, var(--color-marfil-light) 100%);
    border: 1px solid var(--color-marfil-dark);
    border-radius: var(--radius-xl);
}

.card-andalusi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-azul-alhambra), var(--color-oro), var(--color-azul-alhambra));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

/* Tarjeta Premium con patron */
.card-premium {
    position: relative;
    background: linear-gradient(145deg, var(--color-blanco-puro) 0%, var(--color-marfil) 100%);
    border: 1px solid rgba(200, 164, 92, 0.25);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), var(--shadow-oro);
}

.card-premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--color-oro), var(--color-ocre), var(--color-oro));
}

/* Tarjeta con arco nazari */
.card-arco {
    border-radius: 50% 50% var(--radius-xl) var(--radius-xl) / 15% 15% var(--radius-xl) var(--radius-xl);
    padding-top: var(--spacing-8);
}

/* Tarjeta vidrio (glassmorphism) */
.card-glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.card-glass-dark {
    background: rgba(28, 26, 24, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(200, 164, 92, 0.2);
    color: var(--color-blanco-puro);
}

/* ============================================
   9. FORMULARIOS ANDALUSI
   ============================================ */
.form-group {
    margin-bottom: var(--spacing-5);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-2);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-negro-noche);
    letter-spacing: 0.02em;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-negro);
    background: var(--color-blanco-puro);
    border: 2px solid var(--color-marfil-dark);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-azul-alhambra);
    box-shadow: 0 0 0 4px rgba(26, 58, 92, 0.1);
}

.form-input::placeholder {
    color: var(--color-gris-claro);
}

/* Input Andalusi premium */
.form-input-andalusi {
    background: var(--color-marfil-light);
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.form-input-andalusi:focus {
    border-color: var(--color-oro);
    box-shadow: 0 0 0 4px rgba(200, 164, 92, 0.15);
}

/* Input con label flotante */
.form-floating {
    position: relative;
}

.form-floating .form-input {
    padding: var(--spacing-5) var(--spacing-4) var(--spacing-2);
}

.form-floating .form-label {
    position: absolute;
    top: var(--spacing-4);
    left: var(--spacing-4);
    font-size: var(--text-base);
    color: var(--color-gris-piedra);
    pointer-events: none;
    transition: all var(--transition-fast);
    margin: 0;
}

.form-floating .form-input:focus + .form-label,
.form-floating .form-input:not(:placeholder-shown) + .form-label {
    top: var(--spacing-1);
    left: var(--spacing-3);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-azul-alhambra);
}

/* ============================================
   10. BADGES Y ETIQUETAS ANDALUSI
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
}

.badge-oro {
    background: linear-gradient(135deg, var(--color-oro) 0%, var(--color-oro-dark) 100%);
    color: var(--color-negro);
}

.badge-azul {
    background: var(--color-azul-alhambra);
    color: var(--color-blanco-puro);
}

.badge-verde {
    background: var(--color-esmeralda);
    color: var(--color-blanco-puro);
}

.badge-terracota {
    background: var(--color-terracota);
    color: var(--color-blanco-puro);
}

.badge-granate {
    background: var(--color-granate);
    color: var(--color-blanco-puro);
}

.badge-exito { background: var(--color-exito-light); color: var(--color-exito); }
.badge-alerta { background: var(--color-alerta-light); color: var(--color-alerta); }
.badge-error { background: var(--color-error-light); color: var(--color-error); }
.badge-info { background: var(--color-info-light); color: var(--color-info); }

/* Badges de nivel VIP */
.badge-bronce { 
    background: linear-gradient(135deg, #CD7F32, #8B4513); 
    color: white; 
}
.badge-plata { 
    background: linear-gradient(135deg, #C0C0C0, #A8A8A8); 
    color: #333; 
}
.badge-oro-tier { 
    background: linear-gradient(135deg, var(--color-oro), var(--color-ocre)); 
    color: #333; 
}
.badge-diamante { 
    background: linear-gradient(135deg, #B9F2FF, #87CEEB); 
    color: #1a365d; 
}

/* ============================================
   11. NAVEGACION ANDALUSI
   ============================================ */
.nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.nav-link {
    position: relative;
    padding: var(--spacing-2) 0;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gris-piedra);
    transition: color var(--transition-fast);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-azul-alhambra);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-oro), var(--color-ocre));
    border-radius: var(--radius-full);
}

/* Sidebar Andalusi */
.sidebar-andalusi {
    background: linear-gradient(180deg, var(--color-azul-alhambra-dark) 0%, var(--color-azul-alhambra) 100%);
    color: var(--color-blanco-puro);
}

.sidebar-andalusi .menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border-radius: var(--radius-lg);
    color: rgba(255, 255, 255, 0.75);
    transition: all var(--transition-fast);
}

.sidebar-andalusi .menu-item:hover {
    background: rgba(200, 164, 92, 0.15);
    color: var(--color-blanco-puro);
    transform: translateX(4px);
}

.sidebar-andalusi .menu-item.active {
    background: rgba(200, 164, 92, 0.2);
    color: var(--color-blanco-puro);
    border-left: 3px solid var(--color-oro);
}

/* ============================================
   12. TABS ANDALUSI
   ============================================ */
.tabs {
    display: flex;
    gap: var(--spacing-1);
    border-bottom: 2px solid var(--color-marfil-dark);
}

.tab-btn {
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-gris-piedra);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tab-btn:hover {
    color: var(--color-azul-alhambra);
}

.tab-btn.active {
    color: var(--color-azul-alhambra);
    border-bottom-color: var(--color-oro);
    font-weight: 600;
}

.tab-content {
    display: none;
    padding: var(--spacing-6) 0;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* ============================================
   13. ELEMENTOS DECORATIVOS ANDALUSI
   ============================================ */

/* Divisor ornamental */
.divider-andalusi {
    display: flex;
    align-items: center;
    gap: var(--spacing-4);
    margin: var(--spacing-8) 0;
}

.divider-andalusi::before,
.divider-andalusi::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-oro), transparent);
}

.divider-andalusi-icon {
    color: var(--color-oro);
    font-size: var(--text-xl);
}

/* Estrella andalusi decorativa */
.star-andalusi {
    display: inline-block;
    color: var(--color-oro);
}

.star-andalusi::before { content: '✦ '; }
.star-andalusi::after { content: ' ✦'; }

/* Decoracion de esquina */
.corner-decoration {
    position: absolute;
    width: 50px;
    height: 50px;
    opacity: 0.2;
}

.corner-decoration.top-left {
    top: 0;
    left: 0;
    border-top: 3px solid var(--color-oro);
    border-left: 3px solid var(--color-oro);
}

.corner-decoration.top-right {
    top: 0;
    right: 0;
    border-top: 3px solid var(--color-oro);
    border-right: 3px solid var(--color-oro);
}

.corner-decoration.bottom-left {
    bottom: 0;
    left: 0;
    border-bottom: 3px solid var(--color-oro);
    border-left: 3px solid var(--color-oro);
}

.corner-decoration.bottom-right {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid var(--color-oro);
    border-right: 3px solid var(--color-oro);
}

/* Arco herradura (arco de la Alhambra) */
.arco-herradura {
    position: relative;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    overflow: hidden;
}

.arco-herradura::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    bottom: 20%;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    border: 3px solid var(--color-oro);
    border-bottom: none;
}

/* Borde oro decorativo */
.border-oro-decorative {
    border: 2px solid transparent;
    background: 
        linear-gradient(var(--color-marfil-light), var(--color-marfil-light)) padding-box,
        linear-gradient(135deg, var(--color-oro), var(--color-ocre), var(--color-oro)) border-box;
}

/* Nombre en arabe */
.brand-arabic {
    font-family: var(--font-arabic);
    font-size: 1.5em;
    color: var(--color-oro);
    direction: rtl;
}

/* ============================================
   14. ANIMACIONES ANDALUSI
   ============================================ */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes pulse-oro {
    0%, 100% { box-shadow: 0 0 0 0 rgba(200, 164, 92, 0.4); }
    50% { box-shadow: 0 0 0 20px rgba(200, 164, 92, 0); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes glow-oro {
    0%, 100% { box-shadow: 0 0 20px rgba(200, 164, 92, 0.3); }
    50% { box-shadow: 0 0 40px rgba(200, 164, 92, 0.6); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes bounce-in {
    0% { transform: scale(0); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.animate-fade-in { animation: fadeIn 0.5s ease; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease; }
.animate-fade-in-down { animation: fadeInDown 0.6s ease; }
.animate-slide-in-right { animation: slideInRight 0.6s ease; }
.animate-slide-in-left { animation: slideInLeft 0.6s ease; }
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-pulse-oro { animation: pulse-oro 2s infinite; }
.animate-glow-oro { animation: glow-oro 3s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-bounce-in { animation: bounce-in 0.4s ease; }

/* Shimmer loading */
.shimmer {
    background: linear-gradient(90deg, var(--color-marfil-dark) 25%, var(--color-marfil-light) 50%, var(--color-marfil-dark) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ============================================
   15. UTILIDADES ANDALUSI
   ============================================ */

/* Display */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* Flexbox */
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }
.gap-1 { gap: var(--spacing-1); }
.gap-2 { gap: var(--spacing-2); }
.gap-3 { gap: var(--spacing-3); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }
.gap-8 { gap: var(--spacing-8); }

/* Spacing */
.m-0 { margin: 0; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
.my-8 { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }
.mr-2 { margin-right: var(--spacing-2); }
.mr-4 { margin-right: var(--spacing-4); }
.ml-2 { margin-left: var(--spacing-2); }
.ml-auto { margin-left: auto; }

.p-0 { padding: 0; }
.p-2 { padding: var(--spacing-2); }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }
.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
.py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }
.py-12 { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }
.py-16 { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }

/* Text alignment */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Borders */
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-oro { box-shadow: var(--shadow-oro); }
.shadow-azul { box-shadow: var(--shadow-azul); }

/* Backgrounds */
.bg-white { background-color: var(--color-blanco-puro); }
.bg-marfil { background-color: var(--color-arena); }
.bg-marfil-light { background-color: var(--color-marfil-light); }
.bg-azul { background-color: var(--color-azul-alhambra); }
.bg-oro { background-color: var(--color-oro); }
.bg-verde { background-color: var(--color-esmeralda); }
.bg-terracota { background-color: var(--color-terracota); }
.bg-granate { background-color: var(--color-granate); }

/* Width */
.w-full { width: 100%; }
.max-w-sm { max-width: 24rem; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }

/* Container */
.container {
    width: 100%;
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-4);
    padding-right: var(--spacing-4);
}

@media (min-width: 640px) {
    .container { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
}

@media (min-width: 1024px) {
    .container { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
}

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Transition */
.transition { transition: all var(--transition-base); }
.transition-fast { transition: all var(--transition-fast); }
.transition-slow { transition: all var(--transition-slow); }

/* Hover effects */
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }
.hover\:shadow-xl:hover { box-shadow: var(--shadow-xl); }
.hover\:-translate-y-1:hover { transform: translateY(-4px); }

/* ============================================
   16. COMPONENTES ESPECIALES ANDALUSI
   ============================================ */

/* Hero Section */
.hero-andalusi {
    position: relative;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.hero-overlay-andalusi {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(26, 58, 92, 0.85) 0%,
        rgba(45, 107, 90, 0.7) 50%,
        rgba(26, 58, 92, 0.9) 100%
    );
}

.hero-content-andalusi {
    position: relative;
    z-index: 1;
    color: var(--color-blanco-puro);
}

/* Stat Cards */
.stat-card-andalusi {
    position: relative;
    padding: var(--spacing-6);
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all var(--transition-elegant);
}

.stat-card-andalusi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-oro), var(--color-ocre));
}

.stat-card-andalusi:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

/* Quick Link Cards */
.quick-link-andalusi {
    background: var(--color-blanco-puro);
    border-radius: var(--radius-xl);
    padding: var(--spacing-5);
    text-align: center;
    transition: all var(--transition-elegant);
    border: 1px solid var(--color-marfil-dark);
}

.quick-link-andalusi:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-oro);
}

.quick-link-andalusi .icon-wrapper {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-3);
    transition: all var(--transition-base);
}

.quick-link-andalusi:hover .icon-wrapper {
    transform: scale(1.1);
}

/* ============================================
   17. TABLAS ANDALUSI
   ============================================ */
.table-andalusi {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.table-andalusi thead {
    background: linear-gradient(135deg, var(--color-azul-alhambra) 0%, var(--color-azul-alhambra-dark) 100%);
}

.table-andalusi th {
    padding: var(--spacing-4);
    text-align: left;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-blanco-puro);
}

.table-andalusi th:first-child {
    border-radius: var(--radius-xl) 0 0 0;
}

.table-andalusi th:last-child {
    border-radius: 0 var(--radius-xl) 0 0;
}

.table-andalusi tbody tr {
    transition: background var(--transition-fast);
}

.table-andalusi tbody tr:hover {
    background: rgba(200, 164, 92, 0.08);
}

.table-andalusi td {
    padding: var(--spacing-4);
    border-bottom: 1px solid var(--color-marfil-dark);
    font-size: var(--text-sm);
    color: var(--color-negro-noche);
}

/* ============================================
   18. MODALES ANDALUSI
   ============================================ */
.modal-backdrop-andalusi {
    position: fixed;
    inset: 0;
    background: rgba(28, 26, 24, 0.6);
    backdrop-filter: blur(6px);
    z-index: var(--z-modal-backdrop);
    opacity: 0;
    transition: opacity var(--transition-base);
}

.modal-backdrop-andalusi.active {
    opacity: 1;
}

.modal-andalusi {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    z-index: var(--z-modal);
    background: var(--color-blanco-puro);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    opacity: 0;
    transition: all var(--transition-base);
}

.modal-andalusi.active {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.modal-header-andalusi {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-6);
    border-bottom: 1px solid var(--color-marfil-dark);
    background: linear-gradient(90deg, var(--color-marfil-light), var(--color-blanco-puro));
}

.modal-title-andalusi {
    font-family: var(--font-heading);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--color-negro);
}

.modal-body-andalusi {
    padding: var(--spacing-6);
    overflow-y: auto;
    max-height: calc(90vh - 180px);
}

.modal-footer-andalusi {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-6);
    background: var(--color-arena);
    border-top: 1px solid var(--color-marfil-dark);
}

/* ============================================
   19. TOASTS Y NOTIFICACIONES ANDALUSI
   ============================================ */
.toast-container-andalusi {
    position: fixed;
    top: var(--spacing-6);
    right: var(--spacing-6);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    max-width: 400px;
    width: calc(100% - var(--spacing-12));
}

.toast-andalusi {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-3);
    padding: var(--spacing-4);
    background: var(--color-blanco-puro);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    border-left: 4px solid var(--color-azul-alhambra);
    animation: slideInRight 0.4s ease;
}

.toast-andalusi.success { border-left-color: var(--color-exito); }
.toast-andalusi.error { border-left-color: var(--color-error); }
.toast-andalusi.warning { border-left-color: var(--color-alerta); }
.toast-andalusi.info { border-left-color: var(--color-info); }

/* ============================================
   20. LOADERS ANDALUSI
   ============================================ */
.loader-andalusi {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-marfil-dark);
    border-top-color: var(--color-oro);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loader-dots-andalusi {
    display: flex;
    gap: var(--spacing-2);
}

.loader-dots-andalusi span {
    width: 12px;
    height: 12px;
    background: var(--color-oro);
    border-radius: 50%;
    animation: pulse-oro 1.4s ease-in-out infinite;
}

.loader-dots-andalusi span:nth-child(2) { animation-delay: 0.2s; }
.loader-dots-andalusi span:nth-child(3) { animation-delay: 0.4s; }

/* Skeleton loader */
.skeleton-andalusi {
    background: linear-gradient(90deg, var(--color-marfil-dark) 25%, var(--color-marfil-light) 50%, var(--color-marfil-dark) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* ============================================
   21. SCROLLBAR PERSONALIZADO
   ============================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--color-oro), var(--color-oro-dark));
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--color-oro-dark), var(--color-oro));
}

/* Scrollbar oscuro para sidebars */
.sidebar-andalusi::-webkit-scrollbar-track {
    background: var(--color-azul-alhambra-dark);
}

.sidebar-andalusi::-webkit-scrollbar-thumb {
    background: var(--color-oro);
}

/* ============================================
   22. RESPONSIVE ANDALUSI
   ============================================ */
@media (max-width: 768px) {
    :root {
        --text-5xl: 2.5rem;
        --text-4xl: 2rem;
        --text-3xl: 1.5rem;
    }
    
    .hidden-mobile { display: none !important; }
    .show-mobile { display: block !important; }
    
    .container {
        padding-left: var(--spacing-4);
        padding-right: var(--spacing-4);
    }
}

@media (min-width: 769px) {
    .hidden-desktop { display: none !important; }
    .show-desktop { display: block !important; }
}

/* ============================================
   23. ACCESIBILIDAD
   ============================================ */
:focus-visible {
    outline: 3px solid var(--color-oro);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   24. TAILWIND CSS EXTENSIONS
   ============================================ */

/* Colores custom para Tailwind */
.bg-azul-alhambra { background-color: var(--color-azul-alhambra); }
.bg-azul-alhambra-light { background-color: var(--color-azul-alhambra-light); }
.bg-azul-alhambra-dark { background-color: var(--color-azul-alhambra-dark); }

.bg-oro-nazari { background-color: var(--color-oro); }
.bg-oro-nazari-light { background-color: var(--color-oro-light); }
.bg-oro-nazari-dark { background-color: var(--color-oro-dark); }

.bg-verde-alhambra { background-color: var(--color-esmeralda); }
.bg-terracota-andalusi { background-color: var(--color-terracota); }
.bg-granate-cordobes { background-color: var(--color-granate); }
.bg-ocre-sevillano { background-color: var(--color-ocre); }
.bg-marfil-andalusi { background-color: var(--color-arena); }

.text-azul-alhambra { color: var(--color-azul-alhambra); }
.text-oro-nazari { color: var(--color-oro); }
.text-verde-alhambra { color: var(--color-esmeralda); }
.text-terracota-andalusi { color: var(--color-terracota); }
.text-granate-cordobes { color: var(--color-granate); }

.border-oro-nazari { border-color: var(--color-oro); }
.border-azul-alhambra { border-color: var(--color-azul-alhambra); }
.border-verde-alhambra { border-color: var(--color-esmeralda); }

/* Hover states */
.hover\:bg-azul-alhambra:hover { background-color: var(--color-azul-alhambra); }
.hover\:bg-azul-alhambra-dark:hover { background-color: var(--color-azul-alhambra-dark); }
.hover\:bg-oro-nazari:hover { background-color: var(--color-oro); }
.hover\:text-oro-nazari:hover { color: var(--color-oro); }

/* Focus ring */
.focus\:ring-oro-nazari:focus { --tw-ring-color: var(--color-oro); }
.focus\:ring-azul-alhambra:focus { --tw-ring-color: var(--color-azul-alhambra); }

/* ============================================
   25. LOGO Y MARCA INTISSAR
   ============================================ */
.brand-logo-andalusi {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-3);
}

.brand-logo-icon {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--color-oro) 0%, var(--color-oro-dark) 100%);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-oro);
}

.brand-logo-text {
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-blanco-puro);
}

.brand-logo-arabic {
    font-family: var(--font-arabic);
    font-size: var(--text-sm);
    color: var(--color-oro);
}

/* ============================================
   26. IMPRESION
   ============================================ */
@media print {
    .no-print { display: none !important; }
    
    body {
        background: white;
        color: black;
    }
    
    .sidebar-andalusi,
    .fixed,
    .sticky {
        display: none !important;
    }
    
    a {
        color: black;
        text-decoration: underline;
    }
}