/* =====================================================================
   ESTILOS AUTOCONTENIDOS · Eventos MASC
   Todo está limitado a #eventos-section para no afectar al resto del sitio
   ===================================================================== */

/* ---------- Variables (design-system.css + paleta MASC de style.css) ---------- */
#eventos-section {
    --azul-tfja: #01273E;
    --azul-claro: #0A3D5E;
    --bronce-tfja: #B67238;
    --fondo-principal: #F4F7F9;
    --blanco: #FFFFFF;
    --texto-principal: #2C3E50;
    --texto-secundario: #5A6A7A;

    --masc-primary: #233566;
    --masc-secondary: #6c83b3;
    --masc-accent: #a7d3b9;
    --masc-bg-light: rgba(108, 131, 179, 0.08);

    --sys-color-primary: var(--azul-tfja);
    --sys-color-on-primary: var(--blanco);
    --sys-color-surface: var(--blanco);
    --sys-color-surface-variant: #E2E7EC;
    --sys-color-on-surface-variant: var(--texto-secundario);
    --sys-color-outline: rgba(1, 39, 62, 0.2);
    --sys-color-outline-variant: rgba(1, 39, 62, 0.08);

    --font-main: 'Noto Sans', sans-serif;
    --font-serif: 'Playfair Display', serif;

    --sys-display-small: 400 2.25rem/2.75rem var(--font-serif);
    --sys-headline-medium: 400 1.75rem/2.25rem var(--font-serif);
    --sys-headline-small: 400 1.5rem/2rem var(--font-serif);
    --sys-title-large: 400 1.375rem/1.75rem var(--font-serif);
    --sys-title-medium: 500 1rem/1.5rem var(--font-main);
    --sys-title-small: 500 0.875rem/1.25rem var(--font-main);
    --sys-body-large: 400 1rem/1.5rem var(--font-main);
    --sys-body-medium: 400 0.875rem/1.25rem var(--font-main);
    --sys-body-small: 400 0.75rem/1rem var(--font-main);
    --sys-label-large: 500 0.875rem/1.25rem var(--font-main);
    --sys-label-medium: 500 0.75rem/1rem var(--font-main);
    --sys-label-small: 500 0.6875rem/1rem var(--font-main);

    --sys-elevation-1: 0px 1px 2px 0px rgba(1, 39, 62, 0.3), 0px 1px 3px 1px rgba(1, 39, 62, 0.15);
    --sys-elevation-2: 0px 1px 2px 0px rgba(1, 39, 62, 0.3), 0px 2px 6px 2px rgba(1, 39, 62, 0.15);

    --sys-shape-small: 8px;
    --sys-shape-medium: 12px;
    --sys-shape-full: 9999px;

    --sys-space-2: 8px;
    --sys-space-3: 12px;
    --sys-space-5: 24px;

    --sys-motion-easing-standard: cubic-bezier(0.2, 0.0, 0, 1.0);
    --sys-motion-duration-short: 150ms;
    --sys-motion-duration-medium: 250ms;

    --sys-state-hover: 0.08;
    --sys-state-focus: 0.12;
    --sys-state-pressed: 0.12;

    --sys-focus-ring-width: 3px;
    --sys-focus-ring-color: var(--sys-color-primary);
    --sys-focus-ring-offset: 2px;

    font-family: var(--font-main);
    color: var(--texto-principal);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Reset acotado (especificidad 0 para no pisar clases) ---------- */
:where(#eventos-section) *,
:where(#eventos-section) *::before,
:where(#eventos-section) *::after { margin: 0; padding: 0; box-sizing: border-box; }

:where(#eventos-section) h2 { font: var(--sys-headline-medium); color: var(--azul-tfja); margin-bottom: 0.875rem; }
:where(#eventos-section) h3 { font: var(--sys-headline-small); color: var(--azul-tfja); margin-bottom: 0.75rem; }
:where(#eventos-section) h4 { font: var(--sys-title-large); color: var(--texto-principal); margin-bottom: 0.5rem; }
:where(#eventos-section) p  { font: var(--sys-body-large); color: var(--texto-secundario); margin-bottom: 1rem; letter-spacing: 0.5px; }
:where(#eventos-section) a  { text-decoration: none; }

/* ---------- Utilidades de color MASC ---------- */
#eventos-section .text-masc-primary { color: var(--masc-primary) !important; }
#eventos-section .text-masc-secondary { color: var(--masc-secondary) !important; }

/* ---------- Tipografía ---------- */
#eventos-section .display-small { font: var(--sys-display-small); }
#eventos-section .title-large   { font: var(--sys-title-large); }
#eventos-section .title-medium  { font: var(--sys-title-medium); letter-spacing: 0.15px; }
#eventos-section .body-medium   { font: var(--sys-body-medium); letter-spacing: 0.25px; }
#eventos-section .body-small    { font: var(--sys-body-small); letter-spacing: 0.4px; }
#eventos-section .label-large   { font: var(--sys-label-large); letter-spacing: 0.1px; }
#eventos-section .label-medium  { font: var(--sys-label-medium); letter-spacing: 0.5px; }
#eventos-section .label-small   { font: var(--sys-label-small); letter-spacing: 0.5px; }

/* ---------- Iconos MDI ---------- */
#eventos-section .mdi::before { line-height: 1; vertical-align: middle; }

/* ---------- Botones ---------- */
#eventos-section .btn,
#eventos-section .btn-filled,
#eventos-section .btn-outlined,
#eventos-section .btn-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sys-space-2);
    font: var(--sys-label-large);
    border-radius: var(--sys-shape-full);
    min-height: 40px;
    padding: 0 var(--sys-space-5);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    transition:
        background-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
        box-shadow var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
        border-color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
        color var(--sys-motion-duration-short) var(--sys-motion-easing-standard),
        transform var(--sys-motion-duration-short) var(--sys-motion-easing-standard);
}
#eventos-section .btn::before,
#eventos-section .btn-filled::before,
#eventos-section .btn-outlined::before,
#eventos-section .btn-text::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: currentColor;
    opacity: 0;
    border-radius: inherit;
    transition: opacity var(--sys-motion-duration-medium) var(--sys-motion-easing-standard);
    pointer-events: none;
}
#eventos-section .btn:hover::before,
#eventos-section .btn-filled:hover::before,
#eventos-section .btn-outlined:hover::before,
#eventos-section .btn-text:hover::before { opacity: var(--sys-state-hover); }

#eventos-section .btn:active,
#eventos-section .btn-filled:active,
#eventos-section .btn-outlined:active,
#eventos-section .btn-text:active { transform: scale(0.96); }

#eventos-section .btn:active::before,
#eventos-section .btn-filled:active::before,
#eventos-section .btn-outlined:active::before,
#eventos-section .btn-text:active::before { opacity: var(--sys-state-pressed); }

#eventos-section .btn:focus-visible,
#eventos-section .btn-filled:focus-visible,
#eventos-section .btn-outlined:focus-visible,
#eventos-section .btn-text:focus-visible {
    outline: var(--sys-focus-ring-width) solid var(--sys-focus-ring-color);
    outline-offset: var(--sys-focus-ring-offset);
}

#eventos-section .btn-filled { background-color: var(--sys-color-primary); color: var(--sys-color-on-primary); border: none; }
#eventos-section .btn-filled:hover { box-shadow: var(--sys-elevation-1); }
#eventos-section .btn-outlined { background-color: transparent; color: var(--sys-color-primary); border: 1px solid var(--sys-color-outline); }
#eventos-section .btn-text { background-color: transparent; color: var(--sys-color-primary); border: none; padding: 0 var(--sys-space-3); }

/* ---------- Chips ---------- */
#eventos-section .sys-chip {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--sys-space-3);
    border-radius: var(--sys-shape-small);
    font: var(--sys-label-medium);
    letter-spacing: 0.3px;
    white-space: nowrap;
    background: var(--sys-color-surface-variant);
    color: var(--sys-color-on-surface-variant);
    border: 1px solid transparent;
}
#eventos-section .sys-chip--outlined { background: transparent; border-color: var(--sys-color-outline); }
#eventos-section .sys-chip.is-selected { background: var(--masc-bg-light); color: var(--masc-primary); }

/* ---------- Tarjetas ---------- */
#eventos-section .sys-card {
    display: flex;
    background: var(--sys-color-surface);
    border: 1px solid var(--sys-color-outline-variant);
    border-radius: var(--sys-shape-medium);
    box-shadow: var(--sys-elevation-1);
    overflow: hidden;
    transition: box-shadow var(--sys-motion-duration-medium) var(--sys-motion-easing-standard),
                transform var(--sys-motion-duration-medium) var(--sys-motion-easing-standard);
}
#eventos-section .sys-card:hover { box-shadow: var(--sys-elevation-2); transform: translateY(-2px); }
#eventos-section .sys-card--vertical { flex-direction: column; }
#eventos-section .sys-card--horizontal { flex-direction: row; }
#eventos-section .sys-card__media-zone { display: flex; align-items: center; flex-shrink: 0; }
#eventos-section .sys-card__content { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
#eventos-section .sys-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sys-space-3); }

@media (max-width: 600px) {
    #eventos-section .sys-card--horizontal { flex-direction: column; }
    #eventos-section .sys-card__media-zone { width: 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
    #eventos-section .sys-card,
    #eventos-section .btn-filled,
    #eventos-section .btn-outlined,
    #eventos-section .btn-text { transition: none; }
    #eventos-section .sys-card:hover { transform: none; }
}