/* Asociación - Main Styles */
/* © 2024 - Sistema de Gestión de Asociación */

:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --accent-color: #e74c3c;
    --success-color: #27ae60;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --light-color: #ecf0f1;
    --dark-color: #2c3e50;
    --white: #ffffff;
    --gray-100: #f8f9fa;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --gray-500: #adb5bd;
    --gray-600: #6c757d;
    --gray-700: #495057;
    --gray-800: #343a40;
    --gray-900: #212529;
    
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --border-radius: 8px;
    --box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    --transition: all 0.3s ease;
    
    /* Sistema de espaciado */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;
    
    /* Sistema tipográfico */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Variables de diseño avanzado */
    --button-radius: 8px;
    --card-radius: 16px;
    --input-radius: 8px;
    --border-width: 2px;
    --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-strong: 0 18px 45px rgba(0, 0, 0, 0.3);
    --button-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --button-hover-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    --card-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    --card-shadow-hover: 0 16px 40px rgba(0, 0, 0, 0.2);
    --button-hover-translate: 2px;
    --card-hover-translate: 6px;
    --header-gradient-start: #2c3e50;
    --header-gradient-middle: #34495e;
    --header-gradient-end: #2c3e50;
    --page-background-color: #ffffff;
    --page-gradient-start: #f8f9fa;
    --page-gradient-end: #ffffff;
    --text-color: #343a40;
    --heading-color: #2c3e50;
    --link-color: #3498db;
    --heading-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --heading-scale: 1;
    --btn-primary-bg: #3498db;
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #2980b9;
    --btn-primary-hover-text: #ffffff;
    --btn-outline-bg: transparent;
    --btn-outline-text: #3498db;
    --btn-outline-border: #3498db;
    --btn-outline-hover-bg: #3498db;
    --btn-outline-hover-text: #ffffff;
    --btn-success-bg: #27ae60;
    --btn-warning-bg: #f39c12;
    --btn-danger-bg: #e74c3c;
    --card-bg-start: #ffffff;
    --card-bg-end: #f8f9ff;
    --card-border-color: #dee2e6;
    --card-header-bg: #f8f9fa;
    --dark-primary-color: #0f172a;
    --dark-secondary-color: #38bdf8;
    --dark-accent-color: #f59e0b;
    --dark-text-color: #e2e8f0;
    --dark-heading-color: #f8fafc;
    --dark-link-color: #38bdf8;
    --dark-page-background-color: #0b1220;
    --dark-page-gradient-start: #0b1220;
    --dark-page-gradient-end: #111827;
    --dark-card-bg-start: #111827;
    --dark-card-bg-end: #0f172a;
    --dark-card-border-color: #1f2937;
    --dark-header-gradient-start: #0f172a;
    --dark-header-gradient-middle: #1f2937;
    --dark-header-gradient-end: #0f172a;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-padding-bottom: 5rem;
}

/* Ocultar labels huérfanos que aparecen fuera de sus contenedores */
body > label:not([for]),
body > label[for]:not([for=""]) {
    display: none !important;
}

/* Ocultar específicamente labels con texto "página" que estén fuera de formularios */
label:contains("página"),
label:contains("pagina"),
label:contains("Página") {
    position: relative;
}

body > label[for]:not([for=""]) {
    display: none !important;
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    font-size: var(--font-size-base);
    color: var(--text-color, var(--gray-800));
    background-color: var(--page-background-color, var(--white));
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    background: var(--primary-color);
    color: var(--white);
    padding: 0.6rem 1rem;
    border-radius: 8px;
    z-index: 2000;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
    top: 1rem;
    outline: 3px solid var(--white);
    outline-offset: 2px;
}

/* Dark mode: clase en body para alternar tema (persistido en localStorage) */
body.theme-dark {
    --primary-color: var(--dark-primary-color);
    --secondary-color: var(--dark-secondary-color);
    --accent-color: var(--dark-accent-color);
    --text-color: var(--dark-text-color);
    --heading-color: var(--dark-heading-color);
    --link-color: var(--dark-link-color);
    --page-background-color: var(--dark-page-background-color);
    --page-gradient-start: var(--dark-page-gradient-start);
    --page-gradient-end: var(--dark-page-gradient-end);
    --header-gradient-start: var(--dark-header-gradient-start);
    --header-gradient-middle: var(--dark-header-gradient-middle);
    --header-gradient-end: var(--dark-header-gradient-end);
    --card-bg-start: var(--dark-card-bg-start);
    --card-bg-end: var(--dark-card-bg-end);
    --card-border-color: var(--dark-card-border-color);
    --card-header-bg: #1f2937;
    --gray-100: #1f2937;
    --gray-200: #374151;
    --gray-300: #4b5563;
    --gray-400: #6b7280;
    --gray-500: #9ca3af;
    --gray-600: #d1d5db;
    --gray-700: #e5e7eb;
    --gray-800: #f3f4f6;
    --gray-900: #f9fafb;
    --btn-outline-bg: transparent;
    --btn-outline-text: var(--dark-link-color);
    --btn-outline-border: #475569;
    --btn-outline-hover-bg: #334155;
    --btn-outline-hover-text: #f8fafc;
    --box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    --shadow-soft: 0 2px 10px rgba(0,0,0,0.3);
    --input-bg: #1f2937;
    --input-border: #374151;
    --input-color: #e2e8f0;
}

body.theme-gradient {
    background: linear-gradient(135deg, var(--page-gradient-start, #f8f9fa) 0%, var(--page-gradient-end, #ffffff) 100%);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--heading-font-family, var(--font-family));
    color: var(--heading-color, var(--primary-color));
}

h1 { font-size: calc(var(--font-size-4xl) * var(--heading-scale, 1)); }
h2 { font-size: calc(var(--font-size-3xl) * var(--heading-scale, 1)); }
h3 { font-size: calc(var(--font-size-2xl) * var(--heading-scale, 1)); }
h4 { font-size: calc(var(--font-size-xl) * var(--heading-scale, 1)); }

a {
    color: var(--link-color, var(--secondary-color));
}

.main-content section {
    background-color: var(--section-bg, transparent);
    color: var(--section-text-color, inherit);
    font-family: var(--section-font-family, var(--font-family));
    font-size: var(--section-font-size, inherit);
}

.main-content section.section-gradient {
    background: linear-gradient(135deg, var(--section-gradient-start, transparent) 0%, var(--section-gradient-end, transparent) 100%);
}

.main-content section h1,
.main-content section h2,
.main-content section h3,
.main-content section h4,
.main-content section h5,
.main-content section h6 {
    color: var(--section-heading-color, inherit);
    font-family: var(--section-heading-font-family, var(--heading-font-family));
}

.main-content section h1 { font-size: calc(var(--font-size-4xl) * var(--section-heading-scale, var(--heading-scale, 1))); }
.main-content section h2 { font-size: calc(var(--font-size-3xl) * var(--section-heading-scale, var(--heading-scale, 1))); }
.main-content section h3 { font-size: calc(var(--font-size-2xl) * var(--section-heading-scale, var(--heading-scale, 1))); }
.main-content section h4 { font-size: calc(var(--font-size-xl) * var(--section-heading-scale, var(--heading-scale, 1))); }

.main-content section .btn-primary {
    background: var(--section-btn-primary-bg, var(--btn-primary-bg, var(--secondary-color)));
    color: var(--section-btn-primary-text, var(--btn-primary-text, var(--white)));
}

.main-content section .btn-primary:hover {
    background: var(--section-btn-primary-hover-bg, var(--btn-primary-hover-bg, #2980b9));
    color: var(--section-btn-primary-hover-text, var(--btn-primary-hover-text, var(--white)));
}

.main-content section .btn-outline {
    background: var(--section-btn-outline-bg, var(--btn-outline-bg, transparent));
    color: var(--section-btn-outline-text, var(--btn-outline-text, var(--secondary-color)));
    border-color: var(--section-btn-outline-border, var(--btn-outline-border, var(--secondary-color)));
}

.main-content section .btn-outline:hover {
    background: var(--section-btn-outline-hover-bg, var(--btn-outline-hover-bg, var(--secondary-color)));
    color: var(--section-btn-outline-hover-text, var(--btn-outline-hover-text, var(--white)));
}

.main-content section a {
    color: var(--section-link-color, var(--link-color, var(--secondary-color)));
}

.main-content section input,
.main-content section select,
.main-content section textarea {
    background-color: var(--section-input-bg, transparent);
    color: var(--section-input-text, inherit);
    border-color: var(--section-input-border, var(--gray-300));
}

.main-content section .hero-badge,
.main-content section .type-badge,
.main-content section .status-badge,
.main-content section .payment-badge,
.main-content section .welcome-badge {
    background: var(--section-badge-bg, rgba(255, 255, 255, 0.2));
    color: var(--section-badge-text, inherit);
}

.main-content section .chip,
.main-content section .admin-user-chip {
    background: var(--section-chip-bg, transparent);
    color: var(--section-chip-text, inherit);
}

/* Theme calendar */
.theme-calendar {
    background: var(--white);
    border: var(--border-width) solid var(--gray-200);
    border-radius: var(--card-radius, 12px);
    padding: 1rem;
}

.theme-calendar-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.theme-calendar-table th,
.theme-calendar-table td {
    padding: 0.4rem;
    border: 1px solid var(--gray-200);
    font-size: 0.85rem;
}

.theme-calendar-day--active {
    background: var(--secondary-color);
    color: var(--white);
    font-weight: 600;
    border-color: var(--secondary-color);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
.header {
    background: linear-gradient(135deg, var(--header-gradient-start, #2c3e50) 0%, var(--header-gradient-middle, #34495e) 50%, var(--header-gradient-end, #2c3e50) 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-announcement {
    background: #fef3c7;
    color: #7c2d12;
    border-bottom: 1px solid rgba(124, 45, 18, 0.2);
    font-size: 0.9rem;
    padding: 0.35rem 0.75rem;
}

.site-announcement__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    overflow: hidden;
}

.site-announcement__text {
    display: inline-block;
    white-space: nowrap;
}

.site-announcement.is-scroll .site-announcement__text {
    animation: announcementScroll 18s linear infinite;
}

@keyframes announcementScroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.maintenance-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.maintenance-overlay:not([hidden]) {
    display: flex;
}

.maintenance-page {
    max-width: 480px;
    width: 100%;
    text-align: center;
}

.maintenance-page__content {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.maintenance-page__logo {
    max-height: 80px;
    margin-bottom: 1.5rem;
}

.maintenance-page__title {
    font-size: 1.75rem;
    color: #1e293b;
    margin: 0 0 1rem;
}

.maintenance-page__message {
    color: #475569;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.maintenance-page__return {
    color: #64748b;
    font-size: 0.95rem;
    margin: 0;
}

.maintenance-page__admin-link {
    display: inline-block;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: #64748b;
    text-decoration: none;
}

.maintenance-page__admin-link:hover {
    color: #1e293b;
    text-decoration: underline;
}

body.maintenance-active .maintenance-overlay {
    display: flex;
}

body.maintenance-active .main-content,
body.maintenance-active .footer,
body.maintenance-active .sidebar,
body.maintenance-active .header-actions {
    pointer-events: none;
    opacity: 0.6;
}

body.maintenance-active .site-announcement {
  pointer-events: auto;
}

/* Banner offline */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #7f1d1d;
  color: #fef2f2;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.9rem;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.offline-banner[hidden] {
  display: none !important;
}
.offline-banner__icon {
  font-size: 1.1rem;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    gap: 1.5rem;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
}

.logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: var(--border-radius);
}

.logo-right {
    margin-left: 0.5rem;
}

.logo-text h1 {
    color: var(--white);
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    background: linear-gradient(120deg, #ffd700 0%, #ffa500 50%, #ff6b6b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
}

.logo-text p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.main-nav ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
    color: var(--gray-700);
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.nav-link:hover,
.nav-link.active {
    color: var(--secondary-color);
    background-color: var(--gray-100);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-actions .btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
}

.header-actions #register-btn {
    min-width: 7.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    white-space: nowrap;
}

.header-actions .header-login-secondary {
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
    opacity: 0.9;
    border-color: var(--gray-400);
    color: var(--gray-600);
}
.header-actions .header-login-secondary:hover {
    opacity: 1;
    border-color: var(--gray-500);
    color: var(--gray-700);
}

.sidebar-toggle {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.sidebar-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--white);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

body.sidebar-open .sidebar-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

body.sidebar-open .sidebar-toggle span:nth-child(2) {
    opacity: 0;
}

body.sidebar-open .sidebar-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 1400;
}

.sidebar-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100%;
    background: var(--white);
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.15);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    visibility: hidden;
    pointer-events: none;
}

.sidebar.open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--gray-200);
}

.sidebar-header h2 {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.sidebar-close {
    background: none;
    border: none;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--gray-600);
    cursor: pointer;
    transition: var(--transition);
}

.sidebar-close:hover {
    color: var(--primary-color);
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
}

.sidebar-section {
    border-bottom: 1px solid var(--gray-200);
}

.sidebar-section-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    transition: var(--transition);
}

.sidebar-section-toggle:hover {
    background: var(--gray-100);
}

.sidebar-section-toggle:focus-visible {
    background: var(--gray-100);
    outline: 3px solid var(--secondary-color);
    outline-offset: 2px;
}

.sidebar-section .toggle-icon {
    font-size: 1.2rem;
    color: var(--secondary-color);
    transition: transform 0.3s ease;
}

.sidebar-section.open .toggle-icon {
    transform: rotate(180deg);
}

.sidebar-section-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 1.5rem;
}

.sidebar-section.open .sidebar-section-content {
    max-height: 800px;
    padding: 0 1.5rem 1.25rem;
}

.sidebar-text {
    font-size: 0.95rem;
    color: var(--gray-700);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.sidebar-subtitle {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0.75rem 0 0.5rem;
}

.sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--gray-700);
}

.sidebar-list li::before {
    content: '•';
    color: var(--secondary-color);
    margin-right: 0.5rem;
}

.sidebar-list li strong {
    color: var(--secondary-color);
}

.sidebar-cta {
    margin: 0.5rem 0 0.75rem;
    width: 100%;
}

.sidebar .nav-link {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--secondary-color);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    color: var(--primary-color);
}

.sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sidebar-auth-btn,
.sidebar-config-btn {
    width: 100%;
    text-align: center;
    text-decoration: none;
}

body.sidebar-open {
    overflow: hidden;
}

@media (min-width: 1024px) {
    .sidebar {
        width: 360px;
    }
}

/* Buttons - touch targets mínimo 44x44px (accesibilidad) */
.btn {
    padding: 0.75rem 1.5rem;
    min-height: 44px;
    min-width: 44px;
    border: none;
    border-radius: var(--button-radius, var(--border-radius));
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    box-shadow: var(--button-shadow);
}

.btn-primary {
    background: var(--btn-primary-bg, var(--secondary-color));
    color: var(--btn-primary-text, var(--white));
}

.btn-primary:hover {
    background: var(--btn-primary-hover-bg, #2980b9);
    color: var(--btn-primary-hover-text, var(--white));
    transform: translateY(calc(-1 * var(--button-hover-translate, 2px)));
    box-shadow: var(--button-hover-shadow);
}

.btn-outline {
    background: var(--btn-outline-bg, transparent);
    color: var(--btn-outline-text, var(--secondary-color));
    border: var(--border-width) solid var(--btn-outline-border, var(--secondary-color));
    box-shadow: none;
}

.btn-outline:hover {
    background: var(--btn-outline-hover-bg, var(--secondary-color));
    color: var(--btn-outline-hover-text, var(--white));
}

/* Botones del header con fondo oscuro */
.header .btn-outline {
    color: var(--white);
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.1);
}

.header .btn-outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.8);
    color: var(--white);
}

.header .btn-primary {
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 50%, #ffd700 100%);
    color: var(--white);
    border: none;
    box-shadow: var(--button-shadow);
}

.header .btn-primary:hover {
    background: linear-gradient(135deg, #ff5252 0%, #ff9800 50%, #ffc107 100%);
    transform: translateY(calc(-1 * var(--button-hover-translate, 2px)));
    box-shadow: var(--button-hover-shadow);
}

.btn-success {
    background: var(--btn-success-bg, var(--success-color));
    color: var(--white);
}

.btn-warning {
    background: var(--btn-warning-bg, var(--warning-color));
    color: var(--white);
}

.btn-danger {
    background: var(--btn-danger-bg, var(--danger-color));
    color: var(--white);
}

/* User Menu */
.user-menu {
    position: relative;
}
.user-menu:hover .dropdown-menu,
.user-menu:focus-within .dropdown-menu {
    display: block;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.user-info:hover {
    background: var(--gray-100);
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    min-width: 200px;
    padding: 0.5rem 0;
    display: none;
    z-index: 1001;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--gray-700);
    text-decoration: none;
    transition: var(--transition);
}

.dropdown-menu a:hover {
    background: var(--gray-100);
    color: var(--secondary-color);
}

.dropdown-menu hr {
    margin: 0.5rem 0;
    border: none;
    border-top: 1px solid var(--gray-200);
}

/* Main Content */
.main-content {
    min-height: calc(100vh - 200px);
    position: relative;
    padding-bottom: 6rem;
}

/* Marca de agua fija solo en el área central (no header/footer) */
.main-content::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    width: min(70vw, 720px);
    height: min(70vw, 720px);
    background: url('../assets/watermark-encierro.jpg') center / contain no-repeat;
    opacity: 0.22;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}

/* Asegurar que el contenido esté por encima de la marca de agua */
.quick-actions,
.news-section,
.events-section,
.collaborators-section,
.penas-section,
.multimedia-section,
.programa-fiestas-section,
.tradiciones-section {
    position: relative;
    z-index: 1;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: var(--white);
    padding: 4rem 0;
    text-align: center;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    padding: 0.6rem 1.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hero-section .hero-badge {
    color: #ffffff;
}

.hero-title {
    font-size: clamp(1.9rem, 3.2vw, 2.8rem);
    margin-bottom: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    text-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

.hero-highlight {
    background: linear-gradient(120deg, #ffdd00 0%, #ff6b6b 50%, #ffeaa7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
}

.hero-title span {
    display: inline;
    white-space: normal;
}
.hero-subtitle {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 2.2rem;
    opacity: 0.95;
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.hero-quick-widgets {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 1.5rem 0 2rem;
}

.hero-widget {
    min-width: 200px;
    padding: 0.9rem 1.1rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--white);
    text-align: center;
    backdrop-filter: blur(10px);
}

.hero-widget-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04rem;
    opacity: 0.8;
}

.hero-widget-value {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0.4rem 0;
}

.hero-widget-sub {
    font-size: 0.9rem;
    opacity: 0.9;
}

.hero-traditions {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.tradition-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: var(--transition);
    min-width: 140px;
}

.tradition-item:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.tradition-icon {
    font-size: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    animation: float 3s ease-in-out infinite;
}

.tradition-icon img {
    width: 2.5rem;
    height: 2.5rem;
    object-fit: contain;
    display: block;
}

.tradition-item:nth-child(2) .tradition-icon {
    animation-delay: 0.5s;
}

.tradition-item:nth-child(3) .tradition-icon {
    animation-delay: 1s;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.tradition-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--white);
}

.stat-label {
    font-size: 1rem;
    opacity: 0.8;
}

/* Programa de Fiestas Section */
.programa-fiestas-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 50%, #ffd9b3 100%);
    position: relative;
    overflow: hidden;
}

.programa-fiestas-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ff6b6b, #ffa500, #ffd700, #ff6b6b);
    background-size: 200% 100%;
    animation: gradientShift 3s ease infinite;
}

.programa-fiestas-section h3 {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #ff6b6b 0%, #ffa500 50%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.section-intro {
    text-align: center;
    color: var(--gray-700);
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.programa-calendar {
    margin-top: 2rem;
}

.programa-calendar.is-collapsed .main-calendar-grid,
.programa-calendar.is-collapsed .calendar-legend {
    display: none;
}

.programa-calendar.is-collapsed .main-calendar {
    padding-bottom: 0;
}

.programa-calendar-details.is-collapsed {
    display: none;
}

.programa-layout {
    display: block;
}

.programa-documents-card {
    margin: 2rem auto 0;
    max-width: 720px;
    background: var(--white);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--box-shadow);
    text-align: center;
}

.programa-documents-card h4 {
    margin-bottom: 1rem;
    color: var(--primary-color);
    font-size: 1.2rem;
}

.programa-documents-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.programa-document-item {
    width: 100%;
    max-width: 520px;
}

.programa-document-item > div {
    justify-content: center;
}

.programa-documents-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.programa-document-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem;
    border-radius: 12px;
    border: 1px solid var(--gray-200);
    background: var(--gray-100);
}

.programa-document-item a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
}

.programa-document-item small {
    color: var(--gray-600);
}

.programa-calendar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.programa-day {
    background: var(--white);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.programa-day:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.programa-day-header {
    border-bottom: 2px solid var(--gray-200);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.programa-day-header h4 {
    color: var(--primary-color);
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

.programa-day-events {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.programa-calendar-details {
    margin-top: 2rem;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--box-shadow);
}

@media (max-width: 1024px) {
    .programa-layout {
        grid-template-columns: 1fr;
    }
}

.main-calendar {
    background: var(--white);
    border-radius: 18px;
    box-shadow: var(--box-shadow);
    padding: 1.5rem;
}

.main-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.main-calendar-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary-color);
}

.main-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.main-calendar-weekday {
    text-align: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--gray-600);
    padding: 0.4rem 0;
}

.calendar-day {
    background: var(--gray-100);
    border-radius: 12px;
    padding: 0.6rem;
    min-height: 70px;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: relative;
}

.calendar-day:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.calendar-day.is-empty {
    background: transparent;
    cursor: default;
    box-shadow: none;
}

.calendar-day-number {
    font-weight: 700;
    color: var(--gray-800);
}

.calendar-day.has-event {
    background: rgba(52, 152, 219, 0.12);
    border: 1px solid rgba(52, 152, 219, 0.3);
}

.calendar-day.has-highlight {
    border: 2px solid rgba(231, 76, 60, 0.6);
}

.calendar-day-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.calendar-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--gray-700);
}

.calendar-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.calendar-event-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.calendar-event-item {
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid var(--gray-200);
}

.calendar-event-item h5 {
    margin: 0 0 0.35rem 0;
}

.calendar-event-item small {
    color: var(--gray-600);
}

/* Libro de Colaboradores - Flipbook Styles */
.libro-colaboradores-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid rgba(255, 107, 107, 0.2);
}

.flipbook-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.flipbook-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.flipbook-pages {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    perspective: 2000px;
    min-height: 600px;
}

.flipbook-page-left,
.flipbook-page-right {
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
    position: relative;
}

.flipbook-page-content {
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
    background: white;
    transition: transform 0.3s ease;
}

.flipbook-page-content:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
}

.flipbook-page-content canvas {
    display: block;
    width: 100%;
    height: auto;
    max-width: 400px;
    border-radius: 8px;
}

.flipbook-page-cover {
    width: 400px;
    height: 600px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    color: white;
    text-align: center;
    padding: 2rem;
}

.flipbook-page-cover h3 {
    color: white;
    text-align: center;
    font-size: 2rem;
    margin: 0;
}

.page-number {
    position: absolute;
    bottom: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}

.flipbook-zoom-controls {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

/* Responsive para flipbook */
@media (max-width: 768px) {
    .flipbook-pages {
        flex-direction: column;
        align-items: center;
    }
    
    .flipbook-page-content canvas {
        max-width: 100%;
    }
    
    .flipbook-page-cover {
        width: 100%;
        max-width: 400px;
    }
}

.programa-event-card {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--gray-100);
    border-radius: var(--border-radius);
    transition: var(--transition);
    border-left: 4px solid transparent;
}

.programa-event-card:hover {
    background: var(--gray-200);
    transform: translateX(5px);
}

.programa-event-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
}

.event-type-icon {
    font-size: 1.5rem;
}

.programa-event-content {
    flex: 1;
    min-width: 0;
}

.programa-event-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin: 0 0 0.5rem 0;
}

.programa-event-details {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--gray-600);
    margin-bottom: 0.5rem;
}

.programa-event-time,
.programa-event-location {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.programa-event-description {
    font-size: 0.9rem;
    color: var(--gray-700);
    margin: 0.5rem 0 0 0;
    line-height: 1.5;
}

.programa-event-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.programa-empty,
.programa-error {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
}

.programa-empty p,
.programa-error p {
    margin: 0.5rem 0;
    color: var(--gray-600);
}

.programa-error p {
    color: var(--danger-color);
}

/* Tradiciones Section */
.tradiciones-section {
    padding: 5rem 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f0f4f8 100%);
    position: relative;
    overflow: hidden;
}

.tradiciones-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #8b4513, #cd853f, #daa520, #8b4513);
    background-size: 200% 100%;
    animation: gradientShift 3s ease infinite;
}

.tradiciones-section h3 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, #8b4513 0%, #cd853f 50%, #daa520 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
}

.tradiciones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.tradicion-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 8px 25px rgba(139, 69, 19, 0.15);
    transition: var(--transition);
    border: 3px solid transparent;
    position: relative;
    overflow: hidden;
}

/* Fondos específicos para cada tarjeta de tradición */
.tradiciones-grid .tradicion-card:nth-child(1) {
    background: linear-gradient(135deg, #fff5f0 0%, #ffe0d6 50%, #ffd4c4 100%);
    box-shadow: 0 8px 25px rgba(255, 107, 107, 0.2);
}

.tradiciones-grid .tradicion-card:nth-child(2) {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 50%, #ffe082 100%);
    box-shadow: 0 8px 25px rgba(255, 165, 0, 0.2);
}

.tradiciones-grid .tradicion-card:nth-child(3) {
    background: linear-gradient(135deg, #fff9e6 0%, #fff4cc 50%, #ffeb99 100%);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
}

.tradicion-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #8b4513, #cd853f, #daa520);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.tradicion-card:hover::before {
    transform: scaleX(1);
}

.tradiciones-grid .tradicion-card:nth-child(1):hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #ff6b6b;
    box-shadow: 0 12px 35px rgba(255, 107, 107, 0.3);
    background: linear-gradient(135deg, #fff0e6 0%, #ffd9cc 50%, #ffc4b3 100%);
}

.tradiciones-grid .tradicion-card:nth-child(2):hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #ffa500;
    box-shadow: 0 12px 35px rgba(255, 165, 0, 0.3);
    background: linear-gradient(135deg, #fff5d6 0%, #ffe8a3 50%, #ffdb70 100%);
}

.tradiciones-grid .tradicion-card:nth-child(3):hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #ffd700;
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.3);
    background: linear-gradient(135deg, #fff8d6 0%, #fff1b3 50%, #ffea80 100%);
}

.tradicion-icon-large {
    font-size: 5rem;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    animation: iconBounce 2s ease-in-out infinite;
}

.tradicion-card h4 {
    background: linear-gradient(135deg, #8b4513 0%, #cd853f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.tradicion-card p {
    color: var(--gray-700);
    font-size: 1rem;
    line-height: 1.7;
}

/* Quick Actions */
.quick-actions {
    padding: 3rem 0;
    background: var(--white);
    position: relative;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.quick-actions h3 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    position: relative;
    display: inline-block;
    width: 100%;
    letter-spacing: 1px;
}

@keyframes titleGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.2); }
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.action-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    border-radius: 16px;
    padding: 2.5rem;
    text-align: center;
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
    transition: var(--transition);
    cursor: pointer;
    border: 3px solid transparent;
    position: relative;
    overflow: hidden;
}

.action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.action-card:hover::before {
    transform: scaleX(1);
}

.action-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #667eea;
    box-shadow: 0 12px 35px rgba(102, 126, 234, 0.25);
    background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
}

.action-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
    animation: iconBounce 2s ease-in-out infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.action-card h4 {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.action-card p {
    color: var(--gray-700);
    font-size: 1rem;
    line-height: 1.6;
}

/* Sections */
.news-section,
.events-section,
.collaborators-section {
    padding: 3rem 0;
    position: relative;
    background: var(--white);
}

.news-section h3,
.events-section h3,
.collaborators-section h3,
.penas-section h3,
.multimedia-section h3,
.social-section h3 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    font-weight: 800;
    position: relative;
    display: inline-block;
    width: 100%;
    letter-spacing: 1px;
    padding: 1rem 0;
}

.news-section h3,
.events-section h3,
.collaborators-section h3,
.penas-section h3,
.multimedia-section h3 {
    color: var(--primary-color);
}

.social-section h3 {
    color: #1f2a38;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.documents-section .programa-documents-card h4 {
    font-size: 2rem;
    font-weight: 800;
    color: #1f2a38;
}

/* Grids */
.news-grid,
.events-grid,
.collaborators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Skeleton loaders */
.skeleton {
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 8px;
}

.skeleton-text { height: 1rem; margin-bottom: 0.5rem; }
.skeleton-title { height: 1.5rem; width: 70%; margin-bottom: 0.75rem; }
.skeleton-card { min-height: 200px; }
.skeleton-date { height: 0.875rem; width: 80px; margin-bottom: 0.5rem; }

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.news-grid.skeleton-loading .news-card,
.events-grid.skeleton-loading .event-card {
    opacity: 0.6;
    pointer-events: none;
}

.news-card-image {
    overflow: hidden;
    max-height: 160px;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-category-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    font-size: 0.75rem;
    background: var(--gray-200);
    color: var(--gray-700);
    border-radius: 4px;
    margin-left: 0.5rem;
}

.admin-list-item[draggable="true"] {
    cursor: grab;
}

.admin-list-item[draggable="true"]:active {
    cursor: grabbing;
}

.admin-list-item.drag-over {
    border-color: var(--primary-color);
    background: rgba(102, 126, 234, 0.08);
}

/* Cards */
.card {
    background: linear-gradient(135deg, var(--card-bg-start, #ffffff) 0%, var(--card-bg-end, #f8f9ff) 100%);
    border-radius: var(--card-radius, 16px);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: var(--transition);
    border: var(--border-width) solid var(--card-border-color, transparent);
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.card:hover::before {
    transform: scaleX(1);
}

.card:hover {
    transform: translateY(calc(-1 * var(--card-hover-translate, 6px))) scale(1.02);
    box-shadow: var(--card-shadow-hover);
    border-color: #667eea;
    background: linear-gradient(135deg, #ffffff 0%, #f0f4ff 100%);
}

.card-header {
    padding: 1.5rem;
    background: var(--card-header-bg, var(--gray-100));
    border-bottom: 1px solid var(--gray-200);
}

.card-body {
    padding: 1.5rem;
}

.card-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.75rem;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.card-text {
    color: var(--gray-700);
    line-height: 1.7;
    font-size: 1rem;
}

.card-footer {
    padding: 1rem 1.5rem;
    background: var(--gray-100);
    border-top: 1px solid var(--gray-200);
}

/* Footer */
.footer {
    background: var(--primary-color);
    color: var(--white);
    padding: 3rem 0 1rem;
    margin-top: 4rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-content.footer-two-cols {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 1rem 0;
    margin-bottom: 0;
}

.footer-content.footer-three-cols {
    grid-template-columns: 1fr 1fr auto;
    gap: 1.5rem 2rem;
    padding: 0.75rem 0;
    margin-bottom: 0;
}

.footer-col-right {
    justify-self: end;
    min-width: 200px;
}

@media (max-width: 768px) {
    .footer-content.footer-two-cols,
    .footer-content.footer-three-cols {
        grid-template-columns: 1fr;
    }
    .footer-col-right {
        justify-self: start;
    }
}

.footer-col {
    min-width: 0;
}

.footer-col .footer-legal,
.footer-col-left .footer-legal,
.footer-col-right .footer-legal {
    margin-top: 0.75rem;
    font-size: var(--font-size-xs);
    color: var(--gray-400);
}

.footer-col h4 {
    margin-bottom: 0.5rem;
    color: var(--white);
}

.footer-col p {
    margin: 0.25rem 0;
    font-size: var(--font-size-sm);
    color: var(--gray-300);
}

.footer-fiestas-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.footer-fiestas-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.5rem;
    align-items: start;
}

@media (max-width: 480px) {
    .footer-fiestas-two-cols {
        grid-template-columns: 1fr;
    }
}

.footer-section h4 {
    margin-bottom: 1rem;
    color: var(--white);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section a {
    color: var(--gray-300);
    text-decoration: none;
    transition: var(--transition);
}

.footer-section a:hover {
    color: var(--white);
}

/* Footer: sección Fiestas (desplegables) */

.footer-fiestas-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.footer-fiesta-item {
    border: none;
    margin: 0;
    padding: 0;
}

.footer-fiesta-item summary {
    list-style: none;
    cursor: pointer;
    padding: 0.35rem 0;
    color: var(--gray-300);
    font-size: var(--font-size-sm);
    transition: color 0.2s ease;
}

.footer-fiesta-item summary::-webkit-details-marker {
    display: none;
}

.footer-fiesta-item summary::before {
    content: '+ ';
    font-weight: bold;
    margin-right: 0.25rem;
}

.footer-fiesta-item[open] summary::before {
    content: '− ';
}

.footer-fiesta-item summary:hover {
    color: var(--white);
}

.footer-fiesta-text {
    padding: 0.5rem 0 0.5rem 1rem;
    margin-left: 0.5rem;
    border-left: 2px solid var(--gray-600);
    color: var(--gray-300);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.footer-legal-center {
    text-align: center;
    padding-top: 0.75rem;
    margin-top: 0.25rem;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.footer-legal-line {
    margin: 0.15rem 0;
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,0.95);
}

.footer-bottom {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gray-700);
    color: var(--gray-300);
    font-size: var(--font-size-sm);
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(5px);
    overflow: auto;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.modal[style*="display: block"],
.modal[style*="display: flex"] {
    display: flex !important;
}

/* Modal Fiesta (footer): contenido legible, sin mezcla con el footer */
.modal-content-fiesta {
    max-width: 520px;
    width: 95%;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.fiesta-modal-title {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    color: var(--primary-color, #2c3e50);
    line-height: 1.3;
}
.fiesta-modal-text {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--gray-700, #374151);
}

.modal-content {
    background-color: var(--white);
    margin: auto;
    padding: 2rem;
    border-radius: var(--border-radius);
    width: min(900px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: modalSlideIn 0.3s ease;
    box-shadow: 0 15px 30px rgba(0,0,0,0.25);
}

#admin-modal .modal-content {
    width: min(900px, 95%);
}

.section-modal-content {
    width: min(760px, 95%);
    padding: 2.5rem 3rem;
    max-height: 92vh;
}

.section-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.section-modal-header h3 {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin: 0;
}

.section-modal-edit {
    display: none;
}

.section-modal-edit.is-visible {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.section-modal-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.section-modal-body .sidebar-list {
    margin-left: 1.25rem;
}

.section-modal-body .sidebar-cta {
    margin-top: 1rem;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.admin-panel {
    position: fixed;
    inset: 0;
    z-index: 11000;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(8px);
    display: none;
}

.admin-panel-overlay {
    display: flex;
    width: 100%;
    height: 100%;
}

.admin-sidebar {
    width: 300px;
    max-width: 90vw;
    background: linear-gradient(180deg, var(--primary-color) 0%, #1f2a38 100%);
    color: var(--white);
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    box-shadow: 12px 0 35px rgba(0, 0, 0, 0.25);
}

.admin-sidebar-header h2 {
    font-size: 1.25rem;
    margin-bottom: 0.35rem;
}

.admin-sidebar-header p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.admin-sidebar-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-close-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    width: 36px;
    height: 36px;
    border-radius: 999px;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}

.admin-close-btn:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.5);
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.admin-nav-item {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.admin-nav-item:hover,
.admin-nav-item.active {
    background: rgba(255, 255, 255, 0.18);
    color: var(--white);
}

.admin-nav-item .nav-icon {
    font-weight: 700;
    font-size: 1.15rem;
    margin-left: 0.75rem;
}

.admin-main {
    flex: 1;
    background: var(--gray-100);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.admin-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 2rem 3rem 1.5rem;
    background: var(--white);
    border-bottom: 1px solid var(--gray-200);
}

.admin-header-info h1 {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.admin-breadcrumb {
    color: var(--gray-600);
    font-size: 0.95rem;
}

.admin-user-chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid var(--gray-200);
    background: var(--gray-100);
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
}

.chip-avatar {
    font-size: 1.4rem;
}

.admin-user-chip small {
    display: block;
    color: var(--gray-600);
}

.admin-content {
    padding: 2rem 3rem;
    overflow-y: auto;
}

.admin-dashboard {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.admin-welcome-card {
    background: linear-gradient(120deg, rgba(52, 152, 219, 0.95) 0%, rgba(44, 62, 80, 0.95) 100%);
    color: var(--white);
    padding: 2.2rem;
    border-radius: 18px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.welcome-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    letter-spacing: 0.08rem;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.18);
    padding: 0.45rem 0.9rem;
    border-radius: 999px;
}

.admin-welcome-card h2 {
    font-size: 1.6rem;
}

.admin-welcome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.admin-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
}

.admin-dashboard-card {
    background: var(--white);
    border-radius: 16px;
    padding: 1.85rem;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);
}

.admin-dashboard-card .card-icon {
    font-size: 2rem;
}

.admin-dashboard-card .card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--secondary-color);
}

.admin-dashboard-card h3 {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.admin-dashboard-card p {
    color: var(--gray-600);
    font-size: 0.95rem;
    flex: 1;
}

.admin-dashboard-card .btn {
    align-self: flex-start;
}

.admin-section {
    background: var(--white);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--box-shadow);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.admin-section-header h2 {
    font-size: 1.4rem;
    color: var(--primary-color);
}

.admin-section-header p {
    color: var(--gray-600);
    max-width: 720px;
}

.admin-section-tips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--gray-700);
}

.admin-section-tips li {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.admin-section-tips li::before {
    content: '•';
    color: var(--secondary-color);
    margin-right: 0.35rem;
    font-weight: bold;
}

.admin-section-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.section-editor-form {
    display: block;
}

.section-editor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem 1.5rem;
}

.editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 1.5rem;
}

.quick-actions-editor {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.quick-action-row {
    position: relative;
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    background: var(--gray-100);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
}

.quick-action-row .remove-quick-action {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
}

.form-group--full {
    grid-column: 1 / -1;
}

.form-fieldset {
    border: 1px solid var(--gray-200);
    border-radius: var(--border-radius);
    padding: 1.25rem;
    margin: 0;
}

.form-fieldset legend {
    padding: 0 0.5rem;
    font-weight: 600;
    color: var(--primary-color);
}

.fieldset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem 1.5rem;
}

.admin-section-actions {
    margin-top: 1.5rem;
    justify-content: flex-end;
}

.btn-sm {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
    border-radius: 999px;
}

.sidebar-inline-link {
    display: inline-block;
    margin-top: 0.75rem;
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
}

.sidebar-inline-link:hover {
    color: var(--primary-color);
}

@media (max-width: 1100px) {
    .admin-panel-overlay {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
        box-shadow: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .admin-main {
        height: calc(100% - 260px);
    }
}

@media (max-width: 768px) {
    .admin-header,
    .admin-content {
        padding: 1.5rem;
    }

    .admin-nav {
        max-height: 260px;
    }

    .admin-dashboard-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

.close {
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 2rem;
    font-weight: bold;
    cursor: pointer;
    color: var(--gray-500);
    transition: var(--transition);
}

.close:hover {
    color: var(--danger-color);
}

/* Punto 19: Focus visible en botón cerrar (WCAG) */
.close:focus-visible,
[role="button"].close:focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 2px;
    border-radius: 4px;
    color: var(--secondary-color);
}

@media (max-width: 480px) {
    .modal {
        padding: 1.5rem 0.75rem;
    }

    .modal-content {
        padding: 1.5rem;
        border-radius: 12px;
        max-height: 92vh;
    }

    .section-modal-content {
        padding: 1.75rem;
        width: 100%;
    }
}

/* Forms */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--gray-700);
    font-weight: 500;
    position: relative;
}

/* Asegurar que los labels no se muestren fuera de sus contenedores */
body > label:not([for]),
body > label:not(.form-group label):not([class*="form"]):not([class*="modal"]):not([class*="admin"]) {
    display: none !important;
}

/* Ocultar labels huérfanos que puedan aparecer fuera de sus contenedores */
label:not(.form-group label):not([class*="form"]):not([class*="modal"]):not([class*="admin"]):not([class*="sidebar"]) {
    position: relative;
}

/* Asegurar que los labels dentro de modales no se escapen */
.modal label,
.form-group label {
    position: relative;
    z-index: auto;
}

/* Ocultar cualquier texto "página" que aparezca fuera de contexto */
body > *:not(header):not(main):not(footer):not(script):not(style):not(link):not(meta) {
    position: relative;
}

/* Regla más específica para ocultar labels huérfanos en la esquina superior izquierda */
body > label[style*="position: absolute"],
body > label[style*="position: fixed"],
body > label[style*="top: 0"],
body > label[style*="left: 0"] {
    display: none !important;
}

/* Ocultar cualquier elemento con texto "página" que esté directamente en el body */
body > label,
body > span,
body > p,
body > div {
    position: relative;
}

/* Ocultar específicamente elementos con texto "página" en la esquina superior izquierda */
body > *:first-child {
    position: relative;
}

/* Asegurar que los labels solo se muestren dentro de sus contenedores de formulario */
label {
    position: relative !important;
    z-index: auto !important;
}

/* Ocultar labels que estén directamente en el body (huérfanos) */
body > label {
    display: none !important;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: var(--border-width) solid var(--gray-300);
    border-radius: var(--input-radius, var(--border-radius));
    font-size: 1rem;
    transition: var(--transition);
}

/* Punto 19: Mejoras de Focus Visible y contraste (WCAG 2.1) */
/* Focus visible: outline 3px con color de contraste para teclado */
*:focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 2px;
    border-radius: 4px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

.btn:focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3), var(--box-shadow);
}

.nav-link:focus-visible {
    outline: 3px solid var(--secondary-color);
    outline-offset: 2px;
    background-color: var(--gray-100);
}

.nav-link,
[data-global-nav],
[data-section-title] {
    color: var(--nav-color, inherit);
    font-family: var(--nav-font-family, inherit);
    font-size: var(--nav-font-size, inherit);
    font-weight: var(--nav-font-weight, inherit);
    font-style: var(--nav-font-style, inherit);
    text-decoration: var(--nav-text-decoration, inherit);
}

.nav-icon {
    display: inline-flex;
    align-items: center;
    margin-right: 0.4rem;
    font-size: 1em;
}

.nav-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.nav-label {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 768px) {
    .nav-link,
    [data-global-nav],
    [data-section-title] {
        color: var(--nav-mobile-color, var(--nav-color, inherit));
        font-family: var(--nav-mobile-font-family, var(--nav-font-family, inherit));
        font-size: var(--nav-mobile-font-size, var(--nav-font-size, inherit));
        font-weight: var(--nav-mobile-font-weight, var(--nav-font-weight, inherit));
        font-style: var(--nav-mobile-font-style, var(--nav-font-style, inherit));
        text-decoration: var(--nav-mobile-text-decoration, var(--nav-text-decoration, inherit));
    }
}

.form-group input:focus-visible,
.form-group select:focus-visible,
.form-group textarea:focus-visible {
    border-color: var(--secondary-color);
    outline: 3px solid var(--secondary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--secondary-color);
}

/* Password Input Wrapper */
.password-input-wrapper {
    position: relative;
    width: 100%;
}

.password-input-wrapper input {
    padding-right: 3rem;
}

.toggle-password-btn {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    font-size: 1.1rem;
    transition: var(--transition);
    z-index: 10;
    min-width: 32px;
    min-height: 32px;
    border-radius: 4px;
}

.toggle-password-btn:hover {
    background-color: var(--gray-100);
    color: var(--secondary-color);
}

.toggle-password-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.toggle-password-btn:focus {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

.password-icon {
    display: inline-block;
    user-select: none;
    pointer-events: none;
    font-style: normal;
    transition: opacity 0.2s ease;
}

/* Forgot Password Link */
.forgot-password-link {
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--transition);
    display: inline-block;
}

.forgot-password-link:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.forgot-password-link:focus {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Password Reset Modal */
#password-reset-modal .modal-content {
    max-width: 450px;
}

#password-reset-modal #reset-message {
    padding: 0.75rem;
    border-radius: var(--border-radius);
    line-height: 1.5;
    word-wrap: break-word;
}

#password-reset-modal .modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
}

#password-reset-modal .modal-actions .btn {
    min-width: 120px;
}

/* Mobile optimizations for password reset */
@media (max-width: 768px) {
    .forgot-password-link {
        font-size: 0.85rem;
        padding: 0.25rem 0;
    }
    
    #password-reset-modal .modal-content {
        width: 95%;
        padding: 1.5rem;
    }
    
    #password-reset-modal .modal-actions {
        flex-direction: column-reverse;
    }
    
    #password-reset-modal .modal-actions .btn {
        width: 100%;
    }
}

/* Mobile optimizations for password toggle */
@media (max-width: 768px) {
    .toggle-password-btn {
        min-width: 40px;
        min-height: 40px;
        font-size: 1.2rem;
        right: 0.5rem;
    }
    
    .password-input-wrapper input {
        padding-right: 3.5rem;
    }
}

/* Loading States */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--gray-300);
    border-radius: 50%;
    border-top-color: var(--secondary-color);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Alerts */
.alert {
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    border-left: 4px solid;
}

.alert-success {
    background-color: #d4edda;
    border-color: var(--success-color);
    color: #155724;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: var(--warning-color);
    color: #856404;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: var(--danger-color);
    color: #721c24;
}

.alert-info {
    background-color: #d1ecf1;
    border-color: var(--secondary-color);
    color: #0c5460;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mt-5 { margin-top: 3rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-5 { margin-bottom: 3rem; }

.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* Admin Dashboard Modal */
.admin-dashboard-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.admin-dashboard-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
}

.admin-dashboard-content {
    position: relative;
    width: 95%;
    max-width: 1400px;
    height: 90vh;
    max-height: 95vh;
    margin: 2.5vh auto;
    background: var(--white);
    border-radius: var(--card-radius, 16px);
    box-shadow: var(--shadow-strong);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.4s ease;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.admin-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 2px solid var(--gray-200);
    background: linear-gradient(135deg, var(--primary-color) 0%, #34495e 100%);
    color: var(--white);
    position: sticky;
    top: 0;
    z-index: 10;
}

.admin-dashboard-title h2 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
}

.admin-dashboard-title p {
    margin: 0.25rem 0 0 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

.admin-dashboard-close {
    background: rgba(255, 255, 255, 0.25);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    font-size: 2.5rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    flex-shrink: 0;
    position: relative;
    z-index: 20;
    font-weight: 300;
    line-height: 1;
}

.admin-dashboard-floating-close {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 12050;
    background: rgba(44, 62, 80, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: var(--white);
    width: 42px;
    height: 42px;
    border-radius: 999px;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.admin-dashboard-floating-close:hover {
    background: rgba(44, 62, 80, 1);
    border-color: rgba(255, 255, 255, 0.9);
    transform: rotate(90deg);
}

.admin-dashboard-close:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.admin-dashboard-close:active {
    transform: rotate(90deg) scale(0.95);
    background: rgba(255, 255, 255, 0.5);
}

.admin-dashboard-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.admin-dashboard-sidebar {
    width: 280px;
    background: linear-gradient(180deg, var(--primary-color) 0%, #34495e 100%);
    border-right: 2px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.admin-dashboard-sidebar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(to top, rgba(44, 62, 80, 0.6), transparent);
    pointer-events: none;
    z-index: 0;
}

.admin-sidebar-header-inner {
    padding: 1.5rem;
    color: var(--white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-sidebar-header-inner h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.admin-sidebar-header-inner p {
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.9;
}

.admin-dashboard-tabs {
    flex: 1;
    padding: 0.5rem 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.1);
    min-height: 0;
    position: relative;
    z-index: 2;
}

.admin-dashboard-tabs::-webkit-scrollbar {
    width: 8px;
}

.admin-dashboard-tabs::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.admin-dashboard-tabs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.admin-dashboard-tabs::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.7);
}

.admin-tab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    position: relative;
    z-index: 3;
    flex-shrink: 0;
}

.admin-tab:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.admin-tab.active {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
    border-left-color: var(--secondary-color);
    font-weight: 600;
}

.tab-icon {
    font-size: 1.25rem;
}

.admin-dashboard-panels {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 2rem;
    padding-bottom: 4rem;
    background: var(--white);
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-400) var(--gray-100);
    -webkit-overflow-scrolling: touch;
}

.admin-dashboard-panels::-webkit-scrollbar {
    width: 10px;
}

.admin-dashboard-panels::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 5px;
}

.admin-dashboard-panels::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 5px;
    border: 2px solid var(--gray-100);
}

.admin-dashboard-panels::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

.admin-dashboard-panels > .admin-panel {
    display: none;
}

.admin-dashboard-panels > .admin-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Dashboard Panel */
.dashboard-panel {
    max-width: 1200px;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-400) var(--gray-100);
}

.dashboard-panel::-webkit-scrollbar {
    width: 10px;
}

.dashboard-panel::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 5px;
}

.dashboard-panel::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 5px;
    border: 2px solid var(--gray-100);
}

.dashboard-panel::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

.dashboard-welcome {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem;
    background: linear-gradient(135deg, var(--secondary-color) 0%, #2980b9 100%);
    color: var(--white);
    border-radius: 12px;
}

.dashboard-welcome h3 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.dashboard-welcome p {
    font-size: 1.1rem;
    opacity: 0.95;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
    max-width: 1400px;
}

@media (min-width: 1200px) {
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.dashboard-card {
    background: var(--white);
    border: var(--border-width) solid var(--gray-200);
    border-radius: var(--card-radius, 12px);
    padding: 2rem;
    transition: var(--transition);
    text-align: center;
    display: flex;
    flex-direction: column;
}

.dashboard-card:hover {
    border-color: var(--secondary-color);
    transform: translateY(calc(-1 * var(--card-hover-translate, 6px)));
    box-shadow: var(--card-shadow);
}

.dashboard-card .card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.dashboard-card h4 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.dashboard-card p {
    color: var(--gray-600);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.dashboard-card .card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--gray-200);
}

.dashboard-card .card-actions .btn {
    flex: 1;
    font-size: 0.85rem;
    padding: 0.5rem 1rem;
}

/* Sections Panel */
.sections-panel {
    max-width: 1000px;
}

.panel-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--gray-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.panel-header > div {
    flex: 1;
    min-width: 200px;
}

.panel-header-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.panel-header h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.panel-header p {
    color: var(--gray-600);
}

/* Diseño avanzado: mejorar legibilidad */
.design-panel {
    background: #1f2937;
    color: #ffffff;
    padding: 1.5rem;
    border-radius: 12px;
    max-height: 70vh;
    overflow-y: auto;
}

.design-panel .form-group label {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 0.45rem;
    display: block;
    letter-spacing: 0.2px;
    font-size: 1.05rem;
}

.design-panel .form-group input,
.design-panel .form-group select,
.design-panel .form-group textarea {
    background-color: #111827;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.design-panel .form-group input[type="color"] {
    height: 44px;
    padding: 0.25rem;
}

.design-panel .form-group input[type="number"],
.design-panel .form-group input[type="text"],
.design-panel .form-group select,
.design-panel .form-group textarea {
    font-size: 1.05rem;
}

.design-panel .admin-section h4 {
    color: #ffffff;
}

.design-panel .section-editor-grid {
    gap: 1.25rem;
}

/* Mejor legibilidad en el editor de navegación */
.navigation-section-item label {
    color: var(--gray-800);
}

.navigation-section-item input,
.navigation-section-item select {
    background: var(--white);
    color: var(--gray-900);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 0.6rem;
}

.nav-icon-gallery {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--gray-200);
}

.nav-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

.nav-icon-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.nav-icon-gallery-header h4 {
    margin: 0;
    color: var(--primary-color);
}

.nav-icon-category-select {
    min-width: 180px;
}

.nav-icon-card {
    border: 1px solid var(--gray-300);
    border-radius: 10px;
    background: var(--white);
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.nav-icon-card svg {
    width: 28px;
    height: 28px;
    color: var(--primary-color);
}

.nav-icon-card--emoji .nav-icon-emoji {
    font-size: 1.6rem;
}

.nav-icon-card span {
    font-size: 0.85rem;
    color: var(--gray-700);
}

.nav-icon-card:hover {
    border-color: var(--secondary-color);
    box-shadow: var(--card-shadow);
    transform: translateY(-2px);
}

.sections-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: var(--gray-100);
    border-radius: var(--card-radius, 8px);
    border: var(--border-width) solid var(--gray-200);
    transition: var(--transition);
}

.section-item:hover {
    border-color: var(--secondary-color);
    background: var(--white);
    box-shadow: var(--card-shadow);
    transform: translateY(calc(-1 * var(--card-hover-translate, 6px)));
}

.section-info h4 {
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.section-info p {
    color: var(--gray-600);
    font-size: 0.9rem;
}

/* Members, Events, Store, Accounting Panels */
.members-panel,
.events-panel,
.store-panel,
.accounting-panel,
.penas-panel {
  max-width: 1000px;
}

.events-panel-scroll {
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 3rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-400) var(--gray-100);
}

.events-panel-scroll::-webkit-scrollbar {
  width: 8px;
}

.events-panel-scroll::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: 4px;
}

.events-panel-scroll::-webkit-scrollbar-thumb {
  background: var(--gray-400);
  border-radius: 4px;
}

.events-panel-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--gray-500);
}

/* Peñas Panel */
.penas-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.penas-manager {
    display: flex;
    gap: 1.5rem;
}

.penas-master {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.penas-list-scroll {
    max-height: 480px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.25rem;
}

.pena-list-item {
    background: var(--gray-100);
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    text-align: left;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 600;
    color: var(--gray-700);
}

.pena-list-item:hover {
    border-color: var(--secondary-color);
    background: var(--white);
}

.pena-list-item.is-selected {
    border-color: var(--secondary-color);
    background: rgba(194, 24, 91, 0.08);
    color: #c2185b;
}

.penas-detail {
    flex: 1;
    background: var(--gray-100);
    border-radius: 12px;
    padding: 1.5rem;
    border: 2px solid var(--gray-200);
}

.pena-detail-card h4 {
    color: #c2185b;
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
    letter-spacing: 0.4px;
}

.pena-detail-card p {
    color: var(--gray-600);
    font-size: 0.95rem;
    margin: 0.4rem 0;
}

@media (max-width: 900px) {
    .penas-manager {
        flex-direction: column;
    }

    .penas-master {
        width: 100%;
    }

    .penas-list-scroll {
        max-height: 240px;
    }
}

.pena-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: var(--gray-100);
    border-radius: 8px;
    border: 2px solid var(--gray-200);
    transition: var(--transition);
}

.pena-item:hover {
    border-color: var(--secondary-color);
    background: var(--white);
}

.pena-info h4 {
    color: #c2185b;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
    letter-spacing: 0.5px;
}

.pena-info p {
    color: var(--gray-600);
    font-size: 0.9rem;
    margin: 0.25rem 0;
}

.pena-actions {
    display: flex;
    gap: 0.5rem;
}

/* Peñas Section: título siempre visible como "Multimedia"; lista se abre/cierra al pinchar */
.penas-section {
    padding: 3rem 0 4rem;
    background: var(--white);
    position: relative;
    display: block;
    visibility: visible;
}

.penas-section-title-wrap {
    text-align: center;
    margin: 0 0 3rem 0;
    padding: 1rem 0;
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--primary-color);
}

/* Botón igual de visible que el título "Multimedia" (h3) */
.penas-section-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 1rem 0;
    margin-bottom: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color, #2c3e50);
    text-align: center;
    letter-spacing: 1px;
    transition: color 0.2s ease, opacity 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}
.penas-section-toggle .penas-section-toggle-text {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: 1px;
}
.penas-section-toggle:hover,
.penas-section-toggle:focus {
    color: var(--secondary-color);
    opacity: 0.95;
    outline: 2px solid var(--secondary-color);
    outline-offset: 4px;
}
.penas-section-toggle-icon {
    transition: transform 0.25s ease;
    font-size: 1rem;
    opacity: 0.9;
}
.penas-section.is-open .penas-section-toggle-icon {
    transform: rotate(180deg);
}

.penas-grid-wrapper {
    display: none;
    overflow: hidden;
}
.penas-section.is-open .penas-grid-wrapper {
    display: block;
}

.penas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.pena-card {
    text-align: center;
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.92);
    border-radius: 20px;
    padding: 2rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 20px 45px rgba(255, 107, 157, 0.18);
    backdrop-filter: blur(6px);
    position: relative;
    overflow: hidden;
}

.pena-card::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 18px;
    border: 1px solid rgba(255, 143, 194, 0.35);
    pointer-events: none;
}

.pena-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 30px 55px rgba(255, 107, 157, 0.28);
}

.pena-logo {
    width: 140px;
    height: 140px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #ff8ec7, #ffd3eb);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-shadow: 0 10px 25px rgba(255, 142, 199, 0.35);
}

.pena-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.7);
}

.pena-logo .no-logo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: bold;
    color: var(--primary-color);
    background: var(--gray-200);
}

.pena-contact {
    color: var(--gray-600);
    font-size: 0.9rem;
    margin: 0.5rem 0;
}

.pena-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--secondary-color);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition);
}

.pena-link:hover {
    text-decoration: underline;
}

/* Modal de Peña - Asegurar que esté por encima del panel de admin */
.pena-modal {
    z-index: 10001 !important;
}

.pena-modal .modal-content {
    position: relative;
    z-index: 10002;
}

/* Multimedia Section */
.multimedia-section {
    padding: 3rem 0;
    background: var(--white);
    position: relative;
}

.multimedia-tabs-public {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    justify-content: center;
}

.media-tab-public {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: 3px solid transparent;
    border-radius: 50px;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--white);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    position: relative;
    overflow: hidden;
}

.media-tab-public::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.media-tab-public:hover::before {
    left: 100%;
}

.media-tab-public:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
    border-color: rgba(255, 255, 255, 0.5);
}

.media-tab-public.active {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 25px rgba(245, 87, 108, 0.5);
    transform: scale(1.05);
}

.multimedia-gallery-public {
    margin-top: 2rem;
}

.public-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.public-media-item {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.public-media-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.public-media-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    cursor: pointer;
}

.public-media-item video,
.public-media-item iframe {
    width: 100%;
    height: 250px;
    border: none;
}

.public-media-item p {
    padding: 1rem;
    margin: 0;
    color: var(--gray-700);
    font-weight: 500;
}

/* Multimedia Panel Admin */
.multimedia-panel {
    max-width: 1000px;
}

.multimedia-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--gray-200);
    padding-bottom: 1rem;
}

.media-tab {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
    color: var(--gray-600);
}

.media-tab:hover {
    color: var(--primary-color);
    border-bottom-color: var(--gray-300);
}

.media-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--secondary-color);
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
}

.media-item {
    position: relative;
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
}

.media-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.media-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.media-item video,
.media-item iframe {
    width: 100%;
    height: 200px;
    border: none;
}

.media-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--white);
    padding: 1rem;
    transform: translateY(100%);
    transition: var(--transition);
}

.media-item:hover .media-overlay {
    transform: translateY(0);
}

.media-overlay h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
}

.media-actions {
    display: flex;
    gap: 0.5rem;
}

/* Social Media Section */
.social-section {
    padding: 5rem 0;
    background: var(--white);
    position: relative;
    overflow: hidden;
}

.social-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #ffecd2, #fcb69f, #ff8a80);
    background-size: 200% 100%;
    animation: gradientShift 3s ease infinite;
}

.documents-section {
    padding: 3rem 0 4rem;
    background: var(--white);
    position: relative;
}

.documents-section .programa-documents-card p {
    color: var(--gray-700);
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

.social-links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.social-link-card {
    background: var(--white);
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    text-decoration: none;
    color: var(--gray-800);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.social-link-card:hover {
    border-color: var(--social-color, var(--secondary-color));
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    background: var(--social-color, var(--secondary-color));
    color: var(--white);
}

.social-link-card--pending {
    cursor: default;
    opacity: 0.85;
}

.social-link-card--pending:hover {
    transform: none;
    background: var(--white);
    color: var(--gray-800);
    border-color: var(--gray-200);
    box-shadow: none;
}

.social-link-icon {
    font-size: 3rem;
}

.social-link-card h4 {
    margin: 0;
    font-size: 1.25rem;
}

.social-link-card p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Social Panel Admin */
.social-panel {
    max-width: 800px;
}

.social-config {
    margin-top: 2rem;
}

.social-config .form-group {
    margin-bottom: 1.5rem;
}

.social-config label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.social-icon {
    font-size: 1.25rem;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--gray-300);
    border-radius: 8px;
    font-size: 1rem;
    transition: var(--transition);
}

.form-control:focus-visible {
    border-color: var(--secondary-color);
    outline: 3px solid var(--secondary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--secondary-color);
}

.form-group small {
    display: block;
    margin-top: 0.25rem;
    color: var(--gray-600);
    font-size: 0.85rem;
}

/* Checkbox para peñas en registro */
.form-group input[type="checkbox"] {
    width: auto;
    height: 1.25rem;
    width: 1.25rem;
    cursor: pointer;
    accent-color: var(--secondary-color);
}

.form-group label[style*="display: flex"] {
    display: flex !important;
}

/* User Management Styles */
.user-management {
    padding: 1rem 0;
}

.user-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.user-filters select,
.user-filters input {
    flex: 1;
    min-width: 200px;
    padding: 0.75rem;
    border: 2px solid var(--gray-300);
    border-radius: var(--border-radius);
    font-size: 1rem;
}

.users-table {
    overflow-x: auto;
    margin-top: 1.5rem;
}

.users-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--white);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.users-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--white);
}

.users-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.users-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-200);
}

.users-table tbody tr:hover {
    background: var(--gray-50);
}

.users-table tbody tr:last-child td {
    border-bottom: none;
}

.type-badge,
.status-badge,
.payment-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: capitalize;
}

.type-badge.socio {
    background: #e3f2fd;
    color: #1976d2;
}

.type-badge.colaborador {
    background: #f3e5f5;
    color: #7b1fa2;
}

.type-badge.amigo {
    background: #fff3e0;
    color: #e65100;
}

.status-badge.active {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.inactive {
    background: #ffebee;
    color: #c62828;
}

.payment-badge.paid {
    background: #e8f5e9;
    color: #2e7d32;
}

.payment-badge.pending {
    background: #fff3e0;
    color: #e65100;
}

.payment-badge.overdue {
    background: #ffebee;
    color: #c62828;
}

/* User Details Styles */
.user-details {
    padding: 1rem 0;
}

.user-details-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
    border-radius: var(--border-radius);
    margin-bottom: 2rem;
    border: 2px solid var(--gray-200);
}

.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    flex-shrink: 0;
}

.user-header-info {
    flex: 1;
}

.user-header-info h3 {
    margin: 0 0 0.5rem 0;
    color: var(--primary-color);
    font-size: 1.5rem;
}

.user-email {
    color: var(--gray-600);
    margin: 0 0 0.75rem 0;
}

.user-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.user-details-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.details-section {
    padding: 1.5rem;
    background: var(--gray-50);
    border-radius: var(--border-radius);
    border: 1px solid var(--gray-200);
}

.details-section h4 {
    margin: 0 0 1rem 0;
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 600;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gray-200);
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-item label {
    font-weight: 600;
    color: var(--gray-700);
    font-size: 0.9rem;
}

.detail-item span {
    color: var(--gray-900);
}

.user-id {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--gray-600);
    background: var(--gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    display: inline-block;
}

.user-notes {
    color: var(--gray-700);
    line-height: 1.6;
    padding: 1rem;
    background: var(--white);
    border-radius: var(--border-radius);
    border: 1px solid var(--gray-200);
    white-space: pre-wrap;
}

.user-details-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--gray-200);
    flex-wrap: wrap;
}

/* User Edit Form Styles */
.user-edit-form {
    padding: 1rem 0;
}

.form-section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--gray-50);
    border-radius: var(--border-radius);
    border: 1px solid var(--gray-200);
}

.form-section h4 {
    margin: 0 0 1.5rem 0;
    color: var(--primary-color);
    font-size: 1.1rem;
    font-weight: 600;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--gray-200);
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 2px solid var(--gray-200);
    flex-wrap: wrap;
}

.required {
    color: var(--danger-color);
}

/* Birthdate and Age Display Styles */
.birthdate-wrapper {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: end;
}

@media (max-width: 600px) {
    .birthdate-wrapper {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

.age-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--gray-100);
    border-radius: var(--border-radius);
    border: 2px solid var(--gray-300);
    min-width: 120px;
    justify-content: center;
}

.age-display-label {
    font-weight: 600;
    color: var(--primary-color);
}

.age-display-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--secondary-color);
    min-width: 2ch;
    text-align: center;
}

.age-display-unit {
    color: var(--gray-600);
}

#quinto-age-restriction {
    display: block;
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--gray-100);
    border-radius: var(--border-radius);
    border-left: 4px solid var(--warning-color);
    font-size: 0.9rem;
    line-height: 1.5;
}

#quinto-age-restriction[style*="display: none"] {
    display: none !important;
}

.type-badge.quinto {
    background: #ffe0e6;
    color: #c62828;
}

.type-badge.voluntario {
    background: #e3f2fd;
    color: #1565c0;
}

/* Modal Improvements */
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 2px solid var(--gray-200);
    margin-bottom: 1.5rem;
    flex-shrink: 0;
}

.modal-header h3 {
    margin: 0;
    color: var(--primary-color);
    font-size: 1.5rem;
}

.modal-body {
    flex: 1;
    min-height: 0;
    padding: 0 1.5rem 2rem 1.5rem;
    padding-bottom: 2.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Responsive */
@media (max-width: 768px) {
    .modal {
        align-items: flex-start;
        padding: 1rem 0.75rem;
    }

    .modal-content {
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-body {
        max-height: none;
    }

    .pena-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .pena-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .user-details-header {
        flex-direction: column;
        text-align: center;
    }

    .details-grid {
        grid-template-columns: 1fr;
    }

    .user-filters {
        flex-direction: column;
    }

    .user-filters select,
    .user-filters input {
        width: 100%;
    }

    .users-table {
        font-size: 0.85rem;
    }

    .users-table th,
    .users-table td {
        padding: 0.75rem 0.5rem;
    }

    .user-details-actions,
    .form-actions {
        flex-direction: column;
    }

    .user-details-actions .btn,
    .form-actions .btn {
        width: 100%;
    }
}
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.form-group label[style*="display: flex"]:hover {
    background: var(--gray-100);
}

/* Checkbox de aceptación de tratamiento de datos */
#register-data-treatment {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

#register-data-treatment + span {
    line-height: 1.5;
    color: var(--gray-700);
}

#register-data-treatment + span a {
    color: var(--secondary-color);
    text-decoration: underline;
    font-weight: 500;
    transition: var(--transition);
}

#register-data-treatment + span a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

/* Selector de peñas */
#pena-selection-group {
    animation: slideDown 0.3s ease;
    background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
    padding: 1rem;
    border-radius: var(--border-radius);
    border: 2px solid var(--gray-200);
    margin-top: 0.5rem;
}

/* Desplegable de peñas: en móvil no se recorta y se ve buscador y lista */
#register-pena-dropdown.pena-dropdown-box,
#register-pena-dropdown {
    flex-direction: column;
    z-index: 100;
    min-height: 120px;
    -webkit-overflow-scrolling: touch;
}

#register-pena-list.pena-options {
    -webkit-overflow-scrolling: touch;
    min-height: 80px;
}

@media (max-width: 768px) {
    #pena-selection-group {
        padding: 0.75rem;
    }
    #register-pena-trigger {
        min-height: 2.75rem;
        padding: 0.75rem 1rem;
        -webkit-tap-highlight-color: transparent;
    }
    #register-pena-dropdown {
        max-height: 260px;
        margin-top: 0.5rem;
    }
    #register-pena-list {
        max-height: 180px;
    }
    .pena-option {
        min-height: 44px;
        padding: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

#pena-selection-group label {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

#pena-selection-group select {
    background: var(--white);
    border: 2px solid var(--secondary-color);
}

#pena-selection-group select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
}

.pena-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
}

.pena-option {
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--gray-200);
    background: var(--white);
    color: var(--gray-700);
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
}

.pena-option:hover {
    border-color: var(--secondary-color);
    color: var(--secondary-color);
    box-shadow: var(--box-shadow);
}

.pena-option.is-selected {
    background: var(--secondary-color);
    color: var(--white);
    border-color: var(--secondary-color);
    box-shadow: var(--box-shadow);
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

/* Image Viewer Modal */
.image-viewer-modal {
    background: rgba(0, 0, 0, 0.9);
    z-index: 10002;
}

.image-viewer-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    background: var(--white);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

.image-viewer-content img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 8px;
}

.image-viewer-content p {
    margin-top: 1rem;
    color: var(--gray-700);
    font-weight: 500;
}

.image-viewer-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(0, 0, 0, 0.5);
    color: var(--white);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.image-viewer-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Media Modal */
.media-modal {
    z-index: 10001 !important;
}

/* Privacy Policy Modal */
#privacy-policy-modal .modal-content {
    max-width: 800px;
}

#privacy-policy-content {
    line-height: 1.8;
    color: var(--gray-700);
}

#privacy-policy-content section {
    margin-bottom: 2rem;
}

#privacy-policy-content h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 700;
}

#privacy-policy-content ul {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#privacy-policy-content li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

#privacy-policy-content strong {
    color: var(--primary-color);
    font-weight: 600;
}

#privacy-policy-content a {
    color: var(--secondary-color);
    text-decoration: underline;
}

#privacy-policy-content a:hover {
    color: var(--primary-color);
}

/* Checkbox de voluntariado */
#register-volunteer {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

#register-volunteer + span {
    line-height: 1.5;
    color: var(--gray-700);
}

#register-volunteer + span a {
    color: var(--secondary-color);
    text-decoration: underline;
    font-weight: 500;
    transition: var(--transition);
}

#register-volunteer + span a:hover {
    color: var(--primary-color);
    text-decoration: none;
}

/* Volunteer Normative Modal */
#volunteer-normative-modal .modal-content {
    max-width: 800px;
}

#volunteer-normative-content {
    line-height: 1.8;
    color: var(--gray-700);
}

#volunteer-normative-content section {
    margin-bottom: 2rem;
}

#volunteer-normative-content h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 700;
}

#volunteer-normative-content ul {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

#volunteer-normative-content li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

#volunteer-normative-content strong {
    color: var(--primary-color);
    font-weight: 600;
}

#volunteer-normative-content a {
    color: var(--secondary-color);
    text-decoration: underline;
}

#volunteer-normative-content a:hover {
    color: var(--primary-color);
}

/* Volunteers Section */
.volunteers-section {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--box-shadow);
}

.volunteers-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    padding: 1rem;
    background: var(--gray-100);
    border-radius: 8px;
}

.volunteers-filters label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--gray-700);
}

.volunteers-filters input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    accent-color: var(--secondary-color);
}

#volunteers-list {
    background: var(--white);
    border-radius: 8px;
    padding: 1.5rem;
    overflow-x: auto;
}

#volunteers-list table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

#volunteers-list thead {
    background: var(--gray-100);
    border-bottom: 2px solid var(--gray-300);
}

#volunteers-list th {
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

#volunteers-list td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--gray-200);
}

#volunteers-list tr.volunteer-row {
    background: #e8f5e9;
}

#volunteers-list tr.volunteer-row:hover {
    background: #c8e6c9;
}

#volunteers-list tr:hover:not(.volunteer-row) {
    background: var(--gray-50);
}

#volunteers-list .volunteer-checkbox {
    width: 1.1rem;
    height: 1.1rem;
    cursor: pointer;
    accent-color: var(--secondary-color);
}

#volunteers-list .volunteer-checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Settings Panel */
.settings-panel {
    max-width: 1000px;
}

.settings-panel .settings-grid {
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.setting-group {
    background: var(--gray-100);
    padding: 1.5rem;
    border-radius: 8px;
    border: 2px solid var(--gray-200);
}

.setting-group h4 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* Responsive */
@media (max-width: 768px) {
    .admin-dashboard-content {
        width: 100%;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }
    
    .admin-dashboard-body {
        flex-direction: column;
    }
    
    .admin-dashboard-sidebar {
        width: 100%;
    }
    
    .admin-dashboard-tabs {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 2px solid var(--gray-200);
        padding: 0.5rem;
    }
    
    .admin-tab {
        padding: 0.75rem 1rem;
        white-space: nowrap;
        border-left: none;
        border-bottom: 3px solid transparent;
    }
    
    .admin-tab.active {
        border-left: none;
        border-bottom-color: var(--secondary-color);
    }
    
    .penas-grid {
        grid-template-columns: 1fr;
    }
    
    .admin-dashboard-panels {
        padding: 1rem;
    }
    
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .dashboard-panel {
        max-width: 100%;
    }
    
    .panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* Scrollbar Personalizada */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: 6px;
    border: 2px solid var(--gray-100);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--gray-400) var(--gray-100);
}

/* Spinner para Loading States */
.spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--gray-200);
    border-top: 4px solid var(--secondary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.spinner-sm {
    width: 20px;
    height: 20px;
    border-width: 2px;
}

.spinner-lg {
    width: 60px;
    height: 60px;
    border-width: 6px;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, 
        var(--gray-200) 25%, 
        var(--gray-100) 50%, 
        var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
    border-radius: var(--border-radius);
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5rem;
}
.skeleton-card {
    height: 120px;
    margin-bottom: 1rem;
}
.skeleton-row {
    height: 48px;
    margin-bottom: 0.5rem;
}

/* Breakpoints adicionales para mejor responsive */
@media (min-width: 601px) and (max-width: 1024px) {
    .container {
        padding: 0 2rem;
    }
    
    .hero-section {
        padding: 3rem 0;
    }
    
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) and (max-width: 1440px) {
    .container {
        max-width: 1200px;
    }
}

@media (min-width: 1441px) {
    .container {
        max-width: 1400px;
    }
    
    .hero-section {
        padding: 5rem 0;
    }
}

/* Design refinements */
:root {
    --box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    --card-shadow: 0 10px 24px rgba(15, 23, 42, 0.12);
    --card-shadow-hover: 0 18px 40px rgba(15, 23, 42, 0.18);
    --button-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
    --button-hover-shadow: 0 10px 22px rgba(15, 23, 42, 0.2);
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.section-intro {
    line-height: 1.7;
}

.btn {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.card,
.action-card,
.tradicion-card,
.programa-day,
.main-calendar,
.programa-documents-card,
.calendar-event-item {
    border: 1px solid var(--gray-200);
}

@media (max-width: 768px) {
    .card:hover,
    .action-card:hover,
    .tradicion-card:hover,
    .tradition-item:hover {
        transform: none;
        box-shadow: var(--card-shadow);
    }
}

/* Ocultar badge y mensajes de reCAPTCHA (Privacidad - Términos, "Obtén un navegador compatible", etc.); el aviso está en el formulario */
.grecaptcha-badge {
    visibility: hidden !important;
    display: none !important;
}
/* Ocultar iframe y caja de reCAPTCHA que muestran "¿Por qué tengo que hacer esto?" / "navegador compatible" */
#register-recaptcha-group iframe,
#register-recaptcha-group .rc-anchor,
#register-recaptcha-group [role="presentation"] {
    display: none !important;
    visibility: hidden !important;
}
#register-recaptcha-group {
    overflow: hidden;
}
/* Quitar recuadro residual del captcha (contenedor vacío sin texto) */
#register-recaptcha,
#register-recaptcha *,
#register-recaptcha-group .g-recaptcha {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
}
#register-recaptcha-group {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}