/* Utilidades personalizadas de app.css - La Unión 2026 */

@utility neo-brutal {
    border: 2px solid var(--color-coffee-brown);
    box-shadow: 4px 4px 0px 0px rgba(75, 54, 33, 1);
    transition: all 0.2s ease;
}
.neo-brutal:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0px 0px rgba(75, 54, 33, 1);
}

/* Material Symbols Fix (Previene que clases de Tailwind como uppercase rompan los íconos) */
.material-symbols-outlined {
    font-family: "Material Symbols Outlined", sans-serif;
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none !important;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Clases de utilidad para iconos */
.material-symbols-filled {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.fill-1 {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.weight-300 {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.weight-600 {
    font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

.material-symbols-outlined.size-16 {
    font-size: 16px;
}

.material-symbols-outlined.size-20 {
    font-size: 20px;
}

.material-symbols-outlined.size-24 {
    font-size: 24px;
}

.material-symbols-outlined.size-32 {
    font-size: 32px;
}

.material-symbols-outlined.size-40 {
    font-size: 40px;
}

/* Variables del tema (simplificadas del @theme original) */
:root {
    /* Colores del sistema de diseño referenciados */
    --color-coffee-brown: #33140a; /* Very Dark Espresso Brown */
    --color-background-light: var(--color-surface-light);
    --color-background-dark: var(--color-surface-darker);
    --color-neutral-soft: var(--color-primary-soft);
    
    /* Tipografía */
    --font-display: "Public Sans", sans-serif;
    --font-sans: "Public Sans", ui-sans-serif, system-ui, sans-serif;
}