/**
 * ============================================================================
 * YACHAY PATAZ — Sistema de Marca (Asociación Pataz / PODEROSA)
 * ============================================================================
 * Paleta extraída del logo oficial de Asociación Pataz.
 * Importar este archivo ANTES de cualquier otro CSS para que las variables
 * estén disponibles globalmente.
 * ============================================================================
 */

:root{
    /* ── Marca: morado primario (texto y pétalos del logo) ── */
    --brand-purple:        #6D2E8B;
    --brand-purple-dark:   #4A1F60;
    --brand-purple-darker: #2E1340;
    --brand-purple-light:  #9B59B6;
    --brand-purple-50:     #F4ECF7;
    --brand-purple-100:    #E5D2EE;
    --brand-purple-200:    #C9A4DC;

    /* ── Marca: magenta / rosa (pétalo) ── */
    --brand-magenta:       #E91E89;
    --brand-magenta-dark:  #B71670;
    --brand-magenta-light: #F368B7;
    --brand-magenta-50:    #FCE4F1;

    /* ── Marca: verde (pétalo) ── */
    --brand-green:         #7AB648;
    --brand-green-dark:    #5C8E33;
    --brand-green-light:   #A8D275;
    --brand-green-50:      #EEF6E3;

    /* ── Marca: amarillo / naranja (centro de la flor) ── */
    --brand-yellow:        #F2A900;
    --brand-yellow-dark:   #C68900;
    --brand-yellow-light:  #FFC94A;
    --brand-yellow-50:     #FFF4D6;

    /* ── Aliases semánticos (los componentes usan estos) ── */
    --primary:        var(--brand-purple);
    --primary-dark:   var(--brand-purple-dark);
    --primary-darker: var(--brand-purple-darker);
    --primary-light:  var(--brand-purple-light);

    --accent:         var(--brand-yellow);
    --accent-dark:    var(--brand-yellow-dark);
    --accent-light:   var(--brand-yellow-light);

    --secondary:      var(--brand-magenta);
    --tertiary:       var(--brand-green);

    /* ── Compatibilidad retro: navy/gold se mapean a la marca ── */
    --navy:           var(--brand-purple);
    --navy-light:     var(--brand-purple-light);
    --navy-dark:      var(--brand-purple-dark);
    --gold:           var(--brand-yellow);
    --gold-light:     var(--brand-yellow-light);
    --gold-dark:      var(--brand-yellow-dark);
    --blue:           var(--brand-purple);
    --blue-light:     var(--brand-purple-light);

    /* ── Estado ── */
    --success:        #2E7D32;
    --success-soft:   #E8F5E9;
    --info:           #1976D2;
    --info-soft:      #E3F2FD;
    --warning:        #ED6C02;
    --warning-soft:   #FFF4E5;
    --danger:         #C62828;
    --danger-soft:    #FDECEA;

    /* ── Superficies ── */
    --bg:             #F5F3F8;
    --bg-soft:        #FAF9FC;
    --bg-card:        #FFFFFF;
    --bg-elev:        #FFFFFF;
    --border:         #E2DAEC;
    --border-strong:  #C9BCD8;

    /* ── Texto: SIEMPRE legible sobre superficies claras ── */
    --text-strong:    #1B0F2A;
    --text-dark:      #2A1A3D;
    --text:           #3A2A4F;
    --text-soft:      #5A4D6E;
    --text-muted:     #7A6E8C;
    --text-on-primary:#FFFFFF;
    --text-on-accent: #2E1340;

    /* ── Gradientes oficiales ── */
    --grad-brand:    linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-magenta) 100%);
    --grad-brand-soft: linear-gradient(135deg, var(--brand-purple-50) 0%, var(--brand-magenta-50) 100%);
    --grad-accent:   linear-gradient(135deg, var(--brand-yellow) 0%, var(--brand-yellow-light) 100%);
    --grad-flower:   linear-gradient(135deg, #6D2E8B 0%, #E91E89 35%, #F2A900 70%, #7AB648 100%);
    --grad-sidebar:  linear-gradient(180deg, var(--brand-purple-darker) 0%, var(--brand-purple-dark) 100%);
    --grad-hero:     linear-gradient(135deg, var(--brand-purple) 0%, var(--brand-purple-dark) 60%, var(--brand-magenta-dark) 100%);

    /* ── Sombras ── */
    --shadow-xs:  0 1px 2px rgba(46, 19, 64, .06);
    --shadow-sm:  0 2px 6px rgba(46, 19, 64, .08);
    --shadow-md:  0 6px 18px rgba(46, 19, 64, .10);
    --shadow-lg:  0 12px 32px rgba(46, 19, 64, .14);
    --shadow-brand: 0 8px 24px rgba(109, 46, 139, .28);

    /* ── Radios ── */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius:    14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* ── Fuentes ── */
    --font-sans:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Montserrat', 'Poppins', sans-serif;
}

/* ─────────────────────────────────────────────────────────────
   Utilidades de marca reutilizables
   ───────────────────────────────────────────────────────────── */
.brand-text-gradient{
    background: var(--grad-brand);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.brand-bg-gradient{ background: var(--grad-brand); color: #fff; }
.brand-bg-soft{ background: var(--grad-brand-soft); }
.brand-shadow{ box-shadow: var(--shadow-brand); }

/* Pill / badge institucional */
.brand-pill{
    display:inline-flex;align-items:center;gap:.45rem;
    padding:.35rem .75rem;border-radius:var(--radius-pill);
    background: var(--brand-purple-50);
    color: var(--brand-purple-dark);
    font-size:.75rem;font-weight:600;letter-spacing:.2px;
}
.brand-pill--accent{ background:var(--brand-yellow-50); color:var(--brand-yellow-dark); }
.brand-pill--green{  background:var(--brand-green-50);  color:var(--brand-green-dark); }
.brand-pill--magenta{background:var(--brand-magenta-50);color:var(--brand-magenta-dark); }

/* Botón primario de marca */
.btn-brand{
    background: var(--grad-brand);
    color:#fff;border:none;
    padding:.75rem 1.4rem;border-radius:var(--radius-sm);
    font-weight:700;font-family:var(--font-display);
    box-shadow: var(--shadow-brand);
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    cursor:pointer;
}
.btn-brand:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 12px 28px rgba(109,46,139,.36); }
.btn-brand:active{ transform:translateY(0); }

/* Botón secundario (outline) */
.btn-brand-outline{
    background: transparent; color: var(--brand-purple);
    border: 2px solid var(--brand-purple);
    padding:.7rem 1.35rem;border-radius:var(--radius-sm);
    font-weight:700;font-family:var(--font-display);
    transition: all .2s ease; cursor:pointer;
}
.btn-brand-outline:hover{ background:var(--brand-purple); color:#fff; }

/* Tarjeta institucional */
.brand-card{
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.25rem 1.4rem;
}
.brand-card--gradient{
    background: var(--grad-brand);
    color: #fff; border:none;
}
.brand-card--gradient .brand-card__title,
.brand-card--gradient .brand-card__value{ color:#fff; }

/* Barra superior de marca (accent line) */
.brand-strip{
    height:4px;
    background: var(--grad-flower);
    border-radius: 0 0 var(--radius-xs) var(--radius-xs);
}

/* Texto siempre legible (utilidades) */
.text-on-light{ color: var(--text-strong) !important; }
.text-on-light-soft{ color: var(--text) !important; }
.text-on-dark{ color: #FFFFFF !important; }
.text-on-dark-soft{ color: rgba(255,255,255,.78) !important; }