/* ===================================================
   FUENTE VARIABLE LOCAL (Montserrat)
   =================================================== */

/* Versión Normal */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
}

/* Versión Cursiva / Italic */
@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
}

/* ===================================================
   VARIABLES DE PALETA Y CONFIGURACIÓN BASE
   =================================================== */
:root {
    /* Paleta Principal */
    --color-rosado: #FF5C91;
    --color-verde: #ACE7D5;
    --color-morado: #7253C4;

    /* Tonos Neutros */
    --color-fondo: #FEF4F3;
    --color-negro: #1A1A1A;
    --color-blanco: #FFFFFF;

    /* Tipografía */
    --font-principal: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* Reset Básico */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--color-fondo);
    color: var(--color-negro);
    font-family: var(--font-principal);
    font-weight: 400;
    line-height: 1.6;
}

/* ===================================================
   ENCABEZADOS Y TÍTULOS
   =================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-principal);
    font-weight: 800;
    color: var(--color-morado);
}

/* ===================================================
   ENLACES Y EFECTOS AL PASAR EL CURSOR (HOVER)
   =================================================== */
a {
    color: var(--color-morado);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease, background-color 0.3s ease;
}

a:hover {
    color: var(--color-rosado);
    background-color: var(--color-verde);
    border-radius: 4px;
    padding: 2px 4px;
}

/* ===================================================
   BOTONES E INTERACTIVOS DE IDENTIDAD VISUAL
   =================================================== */
.btn-pilar-primary {
    background-color: var(--color-rosado);
    color: var(--color-blanco);
    font-weight: 700;
    border: 2px solid var(--color-rosado);
    border-radius: 25px;
    transition: all 0.3s ease;
}

.btn-pilar-primary:hover {
    background-color: var(--color-verde);
    color: var(--color-morado);
    border-color: var(--color-verde);
    box-shadow: 0 4px 12px rgba(114, 83, 196, 0.25);
}

.btn-pilar-secondary {
    background-color: var(--color-morado);
    color: var(--color-blanco);
    font-weight: 700;
    border: 2px solid var(--color-morado);
    border-radius: 25px;
    transition: all 0.3s ease;
}

.btn-pilar-secondary:hover {
    background-color: var(--color-rosado);
    color: var(--color-blanco);
    border-color: var(--color-rosado);
    box-shadow: 0 4px 12px rgba(255, 92, 145, 0.3);
}

.btn-pilar-outline {
    border: 2px solid var(--color-morado);
    color: var(--color-morado);
    font-weight: 600;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.btn-pilar-outline:hover {
    background-color: var(--color-morado);
    color: var(--color-blanco);
}

/* ===================================================
   TARJETAS Y TABLAS
   =================================================== */
.card-custom {
    background-color: var(--color-blanco);
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 20px rgba(114, 83, 196, 0.08);
    overflow: hidden;
}

.table-custom-header {
    background-color: var(--color-morado) !important;
    color: var(--color-blanco) !important;
}

.table-custom-header th {
    font-weight: 700;
    padding: 15px;
}

/* Modales */
.modal-header-custom {
    background-color: var(--color-morado);
    color: var(--color-blanco);
}

.modal-section-header {
    background-color: var(--color-verde);
    color: var(--color-morado);
    font-weight: 700;
    border-radius: 6px;
    padding: 6px 12px;
}

/* Badges de Estado */
.badge-reclamo {
    background-color: var(--color-rosado);
    color: var(--color-blanco);
}

.badge-queja {
    background-color: var(--color-verde);
    color: var(--color-morado);
}

.badge-atendido {
    background-color: var(--color-morado);
    color: var(--color-blanco);
}

@media print {
    .no-print { display: none !important; }
    body { background-color: #fff !important; }
    .card-custom { border: none !important; box-shadow: none !important; }
}