/* =============================================================================
   Abrevadero - Hoja de estilos principal
   Basada en la identidad visual de la Peña L'Abrevadero (PHP original)
   Se carga DESPUÉS de Bootstrap CSS
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* ---------------------------------------------------------------------------
   1. Variables CSS Globales (Tema Abrevadero)
   --------------------------------------------------------------------------- */
:root {
    /* Paleta de colores */
    --abrevadero-primary: #3e994c;
    --abrevadero-primary-dark: #2d7038;
    --abrevadero-primary-light: #5bb868;
    --abrevadero-secondary: #070908;
    --abrevadero-accent: #ffd700;

    --abrevadero-success: #48bb78;
    --abrevadero-danger: #f56565;
    --abrevadero-warning: #ed8936;
    --abrevadero-info: #3498db;

    /* Sobrescritura de Bootstrap */
    --bs-primary: var(--abrevadero-primary);
    --bs-primary-rgb: 62, 153, 76;

    /* Tipografía */
    --abrevadero-font: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Sombras y bordes */
    --abrevadero-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
    --abrevadero-shadow: 0 .2rem .4rem rgba(0,0,0,.075);
    --abrevadero-shadow-lg: 0 .5rem 1rem rgba(0,0,0,.15);
    --abrevadero-radius: 0.375rem;
}

/* ---------------------------------------------------------------------------
   2. Estilos Base
   --------------------------------------------------------------------------- */
html, body, #app {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--abrevadero-font);
    background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
    color: #333;
}

#app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ---------------------------------------------------------------------------
   3. Barra de navegación superior
   --------------------------------------------------------------------------- */
.navbar-abrevadero {
    background-color: var(--abrevadero-primary) !important;
    backdrop-filter: blur(10px);
    box-shadow: var(--abrevadero-shadow);
}

.navbar-abrevadero .navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
    color: #fff !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.navbar-abrevadero .navbar-brand i {
    color: var(--abrevadero-accent);
}

.navbar-abrevadero .nav-link {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 500;
    transition: color 0.2s ease;
}

.navbar-abrevadero .nav-link:hover,
.navbar-abrevadero .nav-link.active {
    color: var(--abrevadero-accent) !important;
}

/* ---------------------------------------------------------------------------
   4. Contenido principal
   --------------------------------------------------------------------------- */
.main-content {
    flex: 1;
    padding: 1.5rem 0;
}

/* ---------------------------------------------------------------------------
   5. Sección Hero
   --------------------------------------------------------------------------- */
.hero {
    position: relative;
    color: #fff;
    background-size: cover;
    background-position: center center;
    background-color: var(--abrevadero-primary);
    border-radius: var(--abrevadero-radius);
    overflow: hidden;
    padding: 5rem 1.5rem;
    margin-bottom: 2rem;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-content h1 {
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* ---------------------------------------------------------------------------
   6. Tarjetas
   --------------------------------------------------------------------------- */
.card {
    border-radius: var(--abrevadero-radius);
    box-shadow: var(--abrevadero-shadow);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    border: none;
}

.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--abrevadero-shadow-lg);
}

/* ---------------------------------------------------------------------------
   7. Títulos de sección
   --------------------------------------------------------------------------- */
.section-title {
    font-weight: 600;
    position: relative;
    display: inline-block;
}

.section-title i {
    color: var(--abrevadero-primary);
    margin-right: 0.3em;
}

.section-title::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--abrevadero-accent);
    margin: 0.6rem auto 0;
}

/* ---------------------------------------------------------------------------
   8. Badges de rol
   --------------------------------------------------------------------------- */
.role-admin { background-color: var(--abrevadero-danger) !important; }
.role-editor { background-color: var(--abrevadero-warning) !important; color: #212529 !important; }
.role-user { background-color: var(--abrevadero-success) !important; }

/* ---------------------------------------------------------------------------
   9. Footer
   --------------------------------------------------------------------------- */
.footer-abrevadero {
    background-color: var(--abrevadero-secondary);
    color: rgba(255,255,255,0.7);
    padding: 1.5rem 0;
    margin-top: auto;
    font-size: 0.875rem;
}

.footer-abrevadero a {
    color: var(--abrevadero-accent);
    text-decoration: none;
}

.footer-abrevadero a:hover {
    color: #fff;
}

/* ---------------------------------------------------------------------------
   10. Utilidades de carga
   --------------------------------------------------------------------------- */
.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
}

/* ---------------------------------------------------------------------------
   11. Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .hero {
        padding: 3rem 1rem;
    }
}
/* Biblioteca de imágenes del CMS */
.image-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    gap: 1rem;
}

.image-library-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #dee2e6;
    border-radius: .65rem;
    background: #fff;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .06);
}

.image-library-card__preview,
.image-library-card > img {
    width: 100%;
    height: 165px;
    object-fit: contain;
    background: repeating-conic-gradient(#f3f3f3 0 25%, #fff 0 50%) 50% / 18px 18px;
}

.image-library-card__body {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: .55rem;
    padding: .85rem;
}

.image-library-card__body > strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.image-library-meta {
    display: grid;
    gap: .25rem;
    margin: 0;
    font-size: .78rem;
}

.image-library-meta > div { display: flex; justify-content: space-between; gap: .75rem; }
.image-library-meta dt { color: #6c757d; font-weight: 500; }
.image-library-meta dd { margin: 0; overflow-wrap: anywhere; text-align: right; }

.image-library-backdrop {
    position: fixed;
    z-index: 1040;
    inset: 0;
    background: rgba(0, 0, 0, .62);
}

.image-library-dialog,
.image-library-confirm {
    position: fixed;
    z-index: 1050;
    top: 50%;
    left: 50%;
    width: min(1100px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow: auto;
    transform: translate(-50%, -50%);
    border-radius: .8rem;
    background: #fff;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .35);
}

.image-library-confirm { width: min(560px, calc(100vw - 2rem)); padding: 1.5rem; }
.image-library-dialog__header,
.image-library-dialog__filters,
.image-library-dialog__footer { padding: 1rem 1.25rem; }
.image-library-dialog__header,
.image-library-dialog__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.image-library-dialog__header { border-bottom: 1px solid #dee2e6; }
.image-library-dialog__filters { border-bottom: 1px solid #dee2e6; }
.image-library-dialog__body { min-height: 300px; padding: 1.25rem; }
.image-library-dialog__footer { border-top: 1px solid #dee2e6; }
.image-library-grid--selector { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.image-library-card--selectable { padding: 0; color: inherit; text-align: left; cursor: pointer; }
.image-library-card--selectable:hover,
.image-library-card--selectable:focus-visible { border-color: var(--abrevadero-primary); box-shadow: 0 0 0 .2rem rgba(62, 153, 76, .2); }
.image-library-card--selectable > img { height: 125px; }