/* ============================================================
   FOSCAL · Modernización global (verde esmeralda + responsive)
   Sobrescribe solo lo público sin tocar el dashboard admin.
   Cargar DESPUÉS de app.css y style.css.
   ============================================================ */
:root {
    --fos-900: #022c16;
    --fos-800: #064e2b;
    --fos-700: #0a7a2a;
    --fos-600: #059669;
    --fos-500: #10b981;
    --fos-300: #6ee7b7;
    --fos-100: #d9f2e4;
    --fos-50: #eef9f2;
    --fos-orange: #ff7a00;
    --fos-ink: #0f2e1f;
}

/* Base */
body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img { max-width: 100%; }
img[src=""] { visibility: hidden; }

/* Títulos del sitio: del azul al esmeralda */
.title-content { color: var(--fos-800) !important; letter-spacing: -0.01em; }
.subtitulo-content { color: var(--fos-700) !important; }
.title-card { color: var(--fos-700) !important; }

/* Botones principales en esmeralda */
.btn-primary {
    background: linear-gradient(120deg, var(--fos-700), var(--fos-500)) !important;
    border-color: var(--fos-700) !important;
    border-radius: 12px !important;
    font-weight: 700;
    box-shadow: 0 12px 24px -12px rgba(5, 150, 105, .55) !important;
    transition: transform .18s ease, filter .18s ease;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn-outline-primary {
    color: var(--fos-700) !important;
    border-color: var(--fos-500) !important;
    border-radius: 12px !important;
    font-weight: 700;
}
.btn-outline-primary:hover { background: var(--fos-50) !important; }
.btn-pill { border-radius: 999px !important; }

/* Píldoras blancas (banner) en esmeralda */
.white-span {
    color: var(--fos-800) !important;
    background-color: #fff !important;
    border: 1.5px solid var(--fos-500) !important;
    border-radius: 999px !important;
    font-weight: 700;
    box-shadow: 0 10px 22px -14px rgba(5, 150, 105, .6) !important;
}
.white-span:hover {
    color: #fff !important;
    background: linear-gradient(120deg, var(--fos-700), var(--fos-500)) !important;
    border-color: var(--fos-700) !important;
    transform: scale(1.05);
}
.white-span.active, .active.white-span {
    color: #fff !important;
    background: linear-gradient(120deg, var(--fos-700), var(--fos-500)) !important;
    border-color: var(--fos-700) !important;
}

/* Tarjetas del banner con relieve moderno */
.card-banner {
    border: 1px solid var(--fos-100) !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 18px 40px -28px rgba(6, 78, 43, .4);
    transition: transform .2s ease, box-shadow .2s ease;
    background: #fff;
}
.card-banner:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -26px rgba(6, 78, 43, .45); }
.card-banner .card-body { border-top: 3px solid var(--fos-500) !important; }
.texto-card-img {
    background: rgba(2, 44, 22, .72);
    color: #fff !important;
    padding: .25rem 1rem;
    border-radius: 999px;
    font-weight: 800;
    font-size: 1rem !important;
    backdrop-filter: blur(4px);
}

/* Columnas de contenido */
.left-column-content {
    border-radius: 18px;
    border: 1px solid var(--fos-100);
}

/* Formularios públicos: foco esmeralda */
.form-control:focus {
    border-color: var(--fos-600) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .15) !important;
}

/* Paginación esmeralda (pisa el .active global sin contraste) */
.pagination .page-item.active { background: transparent !important; border-color: transparent !important; }
.pagination .page-item .page-link {
    color: var(--fos-700) !important;
    border: 1px solid var(--fos-100) !important;
    border-radius: 10px !important;
    font-weight: 700;
    margin: 0 2px;
}
.pagination .page-item .page-link:hover { background: var(--fos-50) !important; }
.pagination .page-item.active .page-link,
.pagination .page-item.active .page-link:hover {
    background: linear-gradient(120deg, var(--fos-700), var(--fos-500)) !important;
    border-color: var(--fos-700) !important;
    color: #fff !important;
}

/* Mapas y banners con bordes suaves */
iframe { border-radius: 16px; }
.container-costos img, .container-cartel img { border-radius: 16px; }

/* Tablas largas: desplazamiento horizontal en móvil */
.tableFixHead { border-radius: 14px; border: 1px solid var(--fos-100); }

/* Banner superior de página */
.container-header-banner { border-radius: 0 0 22px 22px; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .container-content, .container-content-inscripciones { width: 100% !important; }
    .title-content { font-size: 1.7rem !important; padding: 1.2rem !important; }
    .text-content { font-size: 1rem !important; padding: 1.2rem !important; }
    .container-costos { width: 94% !important; }
    .div-bordered { padding: 24px !important; }
    .banner-buttons { flex-wrap: wrap; gap: .6rem; }
}
@media (max-width: 576px) {
    .title-content { font-size: 1.4rem !important; }
    .organizadores img { height: 84px !important; }
    .logo-footer { height: 84px !important; }
}

/* Rendimiento: las tarjetas fuera de pantalla pueden diferir su render */
.container-cards-banner .card-banner { content-visibility: auto; contain-intrinsic-size: 320px; }

/* Accesibilidad: respetar "reducir movimiento" */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}