/**
 * CIVI Dashboard - Branding & Claymorphism
 * Identidad visual: Amigo experto que simplifica lo complicado
 * Estilo: Notion + Clay + Memorae
 */

/* ============================================================================
   TIPOGRAFÍA - INTER FONT
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ============================================================================
   VARIABLES Y PALETA CIVI
   ============================================================================ */

:root {
    /* Colores Primarios CIVI */
    --civi-azul-cielo: #87CEEB;
    --civi-azul-cielo-mid: #B0D8F0;
    --civi-azul-cielo-light: #D4E8F5;
    
    --civi-verde-esmeralda: #10b981;
    --civi-verde-esmeralda-dark: #059669;
    
    /* Colores Secundarios */
    --civi-morado: #7c3aed;
    --civi-morado-dark: #6d28d9;
    
    --civi-azul-profundo: #2563eb;
    --civi-azul-profundo-dark: #1d4ed8;
    
    --civi-verde-bosque: #059669;
    --civi-verde-bosque-dark: #047857;
    
    --civi-turquesa: #0d9488;
    --civi-turquesa-dark: #0f766e;
    
    /* Colores de Soporte */
    --civi-amarillo: #fbbf24;
    --civi-blanco: #FFFFFF;
    --civi-gris-neutro-1: #f9fafb;
    --civi-gris-neutro-2: #f3f4f6;
    --civi-gris-neutro-3: #e5e7eb;
    --civi-negro-suave: #111827;
    --civi-negro-suave-2: #1f2937;
    
    /* Tipografía */
    --font-civi: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    
    /* Border Radius - Generosos como plastilina */
    --radius-sm: 16px;
    --radius-md: 20px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-pill: 50px;
    
    /* Transiciones suaves y orgánicas */
    --transition-base: all 0.3s ease;
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Espaciado */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
}

/* ============================================================================
   CLAYMORPHISM - SOMBRAS MULTICAPA
   ============================================================================ */

/* Formula de Claymorphism para elementos principales */
.clay-card {
    box-shadow: 
        -8px -8px 16px rgba(255, 255, 255, 0.5),
        8px 8px 16px rgba(0, 0, 0, 0.1),
        inset -2px -2px 8px rgba(255, 255, 255, 0.2),
        inset 2px 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-md);
    transition: var(--transition-smooth);
}

.clay-card:hover {
    box-shadow: 
        -12px -12px 24px rgba(255, 255, 255, 0.6),
        12px 12px 24px rgba(0, 0, 0, 0.12),
        inset -2px -2px 8px rgba(255, 255, 255, 0.3),
        inset 2px 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px);
}

/* Sombras más sutiles para elementos pequeños */
.clay-card-sm {
    box-shadow: 
        -4px -4px 12px rgba(255, 255, 255, 0.5),
        4px 4px 12px rgba(0, 0, 0, 0.08),
        inset -2px -2px 6px rgba(255, 255, 255, 0.2),
        inset 2px 2px 6px rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-sm);
}

/* Glassmorphism para navbar y elementos translúcidos */
.glass-card {
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-pill);
    box-shadow: 
        -6px -6px 16px rgba(255, 255, 255, 0.5),
        6px 6px 16px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   ANIMACIONES ORGÁNICAS
   ============================================================================ */

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

@keyframes bobble {
    0%, 100% {
        transform: translateY(0px) rotate(-3deg) scale(1);
    }
    50% {
        transform: translateY(-20px) rotate(3deg) scale(1.02);
    }
}

@keyframes pulse-soft {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes morph {
    0%, 100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
        transform: rotate(0deg);
    }
    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
        transform: rotate(180deg);
    }
}

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

@keyframes floatBlob {
    0%, 100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
}

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

.bobble-animation {
    animation: bobble 4s ease-in-out infinite;
}

.pulse-animation {
    animation: pulse-soft 2s ease-in-out infinite;
}

/* ============================================================================
   FONDOS CON GRADIENTES Y TEXTURAS
   ============================================================================ */

/* Fondo Hero Azul Cielo */
.bg-hero-civi {
    background: linear-gradient(180deg, 
        var(--civi-azul-cielo) 0%, 
        var(--civi-azul-cielo-mid) 50%, 
        var(--civi-azul-cielo-light) 100%);
    position: relative;
    overflow: hidden;
}

/* Fondo Gris Neutro con gradiente multicapa */
.bg-neutral-gradient {
    background: linear-gradient(135deg, 
        var(--civi-gris-neutro-3) 0%,
        var(--civi-gris-neutro-2) 25%,
        var(--civi-gris-neutro-3) 50%,
        var(--civi-gris-neutro-1) 75%,
        var(--civi-gris-neutro-2) 100%);
    box-shadow: 
        inset 0 10px 30px rgba(255, 255, 255, 0.8),
        inset 0 -10px 30px rgba(0, 0, 0, 0.05);
}

/* Overlay con radial gradients */
.bg-with-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.1) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(124, 58, 237, 0.1) 0%, transparent 40%);
    pointer-events: none;
}

/* ============================================================================
   ELEMENTOS DECORATIVOS - BLOBS
   ============================================================================ */

.decorative-blobs {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.35;
    animation: floatBlob 12s ease-in-out infinite;
}

.blob-green {
    width: 220px;
    height: 220px;
    background: radial-gradient(circle, var(--civi-verde-esmeralda) 0%, transparent 70%);
    top: 10%;
    left: 10%;
}

.blob-blue {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--civi-azul-profundo) 0%, transparent 70%);
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.blob-yellow {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--civi-amarillo) 0%, transparent 70%);
    bottom: 15%;
    left: 50%;
    animation-delay: 4s;
}

/* Forma orgánica más compleja */
.organic-shape {
    position: absolute;
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, 
        var(--civi-verde-esmeralda) 0%, 
        var(--civi-azul-profundo) 50%, 
        var(--civi-morado) 100%);
    filter: blur(70px);
    opacity: 0.3;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: morph 14s ease-in-out infinite;
}

/* ============================================================================
   BOTONES CON PROFUNDIDAD CIVI
   ============================================================================ */

/* Botón Primario Verde con gradiente */
.btn-civi-primary {
    background: linear-gradient(135deg, var(--civi-verde-esmeralda) 0%, var(--civi-verde-esmeralda-dark) 100%);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    padding: 0.875rem 1.75rem;
    font-weight: 600;
    font-family: var(--font-civi);
    font-size: 0.9375rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 
        -6px -6px 16px rgba(16, 185, 129, 0.5),
        6px 6px 16px rgba(5, 150, 105, 0.6),
        inset -2px -2px 8px rgba(255, 255, 255, 0.2),
        inset 2px 2px 8px rgba(0, 0, 0, 0.1);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.btn-civi-primary:hover {
    transform: translateY(-2px);
    box-shadow: 
        -8px -8px 20px rgba(16, 185, 129, 0.6),
        8px 8px 20px rgba(5, 150, 105, 0.7),
        inset -2px -2px 8px rgba(255, 255, 255, 0.3),
        inset 2px 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-civi-primary:active {
    transform: translateY(0px);
}

/* Botón Secundario Translúcido */
.btn-civi-secondary {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-lg);
    padding: 0.875rem 1.75rem;
    color: var(--civi-negro-suave);
    font-weight: 600;
    font-family: var(--font-civi);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.btn-civi-secondary:hover {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(255, 255, 255, 0.6);
    transform: translateY(-2px);
}

/* Botón Oscuro para fondos claros */
.btn-civi-dark {
    background: var(--civi-negro-suave);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0.875rem 1.75rem;
    font-weight: 600;
    font-family: var(--font-civi);
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 
        -6px -6px 16px rgba(0, 0, 0, 0.3),
        6px 6px 16px rgba(0, 0, 0, 0.5);
}

.btn-civi-dark:hover {
    background: var(--civi-negro-suave-2);
    transform: translateY(-2px);
}

/* ============================================================================
   BADGES Y TAGS CIVI
   ============================================================================ */

.badge-civi {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-family: var(--font-civi);
    background: rgba(16, 185, 129, 0.1);
    color: var(--civi-verde-esmeralda-dark);
    width: fit-content;
}

.badge-civi-morado {
    background: rgba(124, 58, 237, 0.1);
    color: var(--civi-morado-dark);
}

.badge-civi-azul {
    background: rgba(37, 99, 235, 0.1);
    color: var(--civi-azul-profundo-dark);
}

.badge-civi-turquesa {
    background: rgba(13, 148, 136, 0.1);
    color: var(--civi-turquesa-dark);
}

.badge-civi-amarillo {
    background: rgba(251, 191, 36, 0.15);
    color: #92400e;
}

/* Card Badge translúcido */
.card-badge-civi {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    color: white;
}

/* ============================================================================
   CARDS CON GRADIENTES CIVI
   ============================================================================ */

.card-gradient-morado {
    background: linear-gradient(135deg, var(--civi-morado) 0%, var(--civi-morado-dark) 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    min-height: 400px;
    box-shadow: 
        -8px -8px 16px rgba(124, 58, 237, 0.3),
        8px 8px 16px rgba(109, 40, 217, 0.5);
}

.card-gradient-azul {
    background: linear-gradient(135deg, var(--civi-azul-profundo) 0%, var(--civi-azul-profundo-dark) 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    min-height: 400px;
    box-shadow: 
        -8px -8px 16px rgba(37, 99, 235, 0.3),
        8px 8px 16px rgba(29, 78, 216, 0.5);
}

.card-gradient-verde {
    background: linear-gradient(135deg, var(--civi-verde-bosque) 0%, var(--civi-verde-bosque-dark) 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    min-height: 400px;
    box-shadow: 
        -8px -8px 16px rgba(5, 150, 105, 0.3),
        8px 8px 16px rgba(4, 120, 87, 0.5);
}

.card-gradient-turquesa {
    background: linear-gradient(135deg, var(--civi-turquesa) 0%, var(--civi-turquesa-dark) 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: 2.5rem;
    min-height: 400px;
    box-shadow: 
        -8px -8px 16px rgba(13, 148, 136, 0.3),
        8px 8px 16px rgba(15, 118, 110, 0.5);
}

/* ============================================================================
   TIPOGRAFÍA CIVI - JERARQUÍA
   ============================================================================ */

body {
    font-family: var(--font-civi);
}

.civi-title-hero {
    font-size: 4.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    font-family: var(--font-civi);
}

.civi-title-section {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.1;
    font-family: var(--font-civi);
}

.civi-title-subsection {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
    font-family: var(--font-civi);
}

.civi-body-large {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.6;
    font-family: var(--font-civi);
}

.civi-body {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    font-family: var(--font-civi);
}

.civi-small {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.6;
    font-family: var(--font-civi);
}

/* Text shadow sutil para textos blancos sobre fondos claros */
.text-white-shadow {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   INPUTS CON EFECTO HUNDIDO (PLASTILINA)
   ============================================================================ */

.input-clay {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    font-family: var(--font-civi);
    background: var(--civi-gris-neutro-2);
    border: 2px solid var(--civi-gris-neutro-3);
    border-radius: var(--radius-sm);
    box-shadow: 
        inset 4px 4px 8px rgba(0, 0, 0, 0.1),
        inset -4px -4px 8px rgba(255, 255, 255, 0.5);
    transition: var(--transition-base);
}

.input-clay:focus {
    outline: none;
    border-color: var(--civi-verde-esmeralda);
    background: white;
    box-shadow: 
        inset 2px 2px 6px rgba(0, 0, 0, 0.08),
        inset -2px -2px 6px rgba(255, 255, 255, 0.6),
        0 0 0 4px rgba(16, 185, 129, 0.1);
}

/* ============================================================================
   UTILIDADES CIVI
   ============================================================================ */

.relative {
    position: relative;
}

.overflow-hidden {
    overflow: hidden;
}

.z-content {
    position: relative;
    z-index: 1;
}

/* Espaciado */
.p-civi-xs { padding: var(--space-xs); }
.p-civi-sm { padding: var(--space-sm); }
.p-civi-md { padding: var(--space-md); }
.p-civi-lg { padding: var(--space-lg); }
.p-civi-xl { padding: var(--space-xl); }
.p-civi-2xl { padding: var(--space-2xl); }
.p-civi-3xl { padding: var(--space-3xl); }

.m-civi-xs { margin: var(--space-xs); }
.m-civi-sm { margin: var(--space-sm); }
.m-civi-md { margin: var(--space-md); }
.m-civi-lg { margin: var(--space-lg); }
.m-civi-xl { margin: var(--space-xl); }
.m-civi-2xl { margin: var(--space-2xl); }

/* Gap para flex */
.gap-civi-sm { gap: var(--space-sm); }
.gap-civi-md { gap: var(--space-md); }
.gap-civi-lg { gap: var(--space-lg); }
.gap-civi-xl { gap: var(--space-xl); }

/* Colores de texto */
.text-civi-green { color: var(--civi-verde-esmeralda); }
.text-civi-blue { color: var(--civi-azul-profundo); }
.text-civi-purple { color: var(--civi-morado); }
.text-civi-dark { color: var(--civi-negro-suave); }

/* ============================================================================
   EMOJIS CIVI - GRANDES Y DESTACADOS
   ============================================================================ */

.emoji-civi {
    display: inline-block;
    font-size: 2.5rem;
    vertical-align: middle;
    margin: 0 0.2rem;
}

.emoji-pulse {
    animation: pulse-soft 2s ease-in-out infinite;
}

/* ============================================================================
   RESPONSIVE CIVI
   ============================================================================ */

@media (max-width: 768px) {
    .civi-title-hero {
        font-size: 3rem;
    }
    
    .civi-title-section {
        font-size: 2rem;
    }
    
    .civi-body-large {
        font-size: 1.125rem;
    }
    
    .blob, .organic-shape {
        opacity: 0.2;
        filter: blur(40px);
    }
}