/* =====================================================================
   TEMA DEL PORTAL — PERSONALIZAR VARIABLES AQUÍ
   =====================================================================
   Para cambiar los colores del portal, edita los valores en :root.
   El resto del archivo NO necesita modificarse.

   Paleta corporativa:
     Amarillo Focus  #F5C400  → acento / botón principal
     Negro profundo  #111111  → base / headers / texto
     Blanco          #FFFFFF  → fondo de formulario
   ===================================================================== */
:root {
    --color-primary:    #111111;   /* negro profundo (fondo de headers/botón secundario) */
    --color-accent:     #F5C400;   /* amarillo Focus (botón principal / bordes activos) */
    --color-secondary:  var(--color-accent); /* alias histórico de --color-accent */
    --color-text:       #111111;   /* color de fuente general (títulos, labels, texto) */
    --color-bg:         #111111;   /* fondo de la página */
    --color-white:      #ffffff;
    --color-card-bg:    var(--color-white); /* fondo de las cards (form-container) */
    --color-input-bg:      #f8f9fa; /* fondo de los inputs */
    --color-input-border:  #e0e0e0; /* borde de los inputs */
    --font-main:        'Barlow', sans-serif;
    --border-radius-card: 20px;
    --border-radius-btn:  25px;
    --card-border-width: 1px; /* borde de las cards (form-container, sede, disertantes, cronograma, line-up, sponsors) — el panel de temas lo pone en 0 para sacarlo */

    /* Fondo de los botones principal/secundario — degradé por default para
       mantener el look de fábrica. El panel de temas de SuperAdmin puede
       pisar esto con un color sólido si el usuario elige "sólido" en vez
       de "degradé"; por eso las reglas de abajo (.btn-primary, .btn-portal,
       .offcanvas-header) usan estas variables en vez de un gradiente fijo. */
    --btn-accent-bg:        linear-gradient(135deg, var(--color-accent) 0%, #c9a000 100%);
    --btn-accent-bg-hover:  linear-gradient(135deg, #c9a000 0%, var(--color-accent) 100%);
    --btn-primary-bg:       linear-gradient(135deg, #333333 0%, var(--color-primary) 100%);
    --btn-primary-bg-hover: linear-gradient(135deg, var(--color-primary) 0%, #333333 100%);
}

/* Estas 8 variables (--font-main, --color-bg, --color-card-bg,
   --color-input-bg, --color-input-border, --color-text, --color-accent,
   --color-primary) son las que administra el panel de temas de SuperAdmin
   (assets/theme-override.css, cargado después de este archivo — ver
   layouts/header.php), junto con --btn-accent-bg/--btn-primary-bg (y sus
   variantes -hover) cuando el usuario elige sólido en vez de degradé. No
   hace falta tocarlas acá. */

/* ── Body ─────────────────────────────────────────────────────────── */
body {
    background-color: var(--color-bg);
    background-image: var(--bg-image, none);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    font-family: var(--font-main);
    min-height: 100vh;
    padding: 20px 0;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        radial-gradient(circle at 20% 50%, rgba(245, 196, 0, 0.07) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(245, 196, 0, 0.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.container { position: relative; z-index: 1; }

/* ── Tarjeta formulario ───────────────────────────────────────────── */
.form-container {
    background: var(--color-card-bg);
    border-radius: var(--border-radius-card);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    padding: 30px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-width: var(--card-border-width);
    border-style: solid;
    border-color: rgba(245, 196, 0, 0.12);
}

.form-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 50px rgba(245, 196, 0, 0.22);
}

/* ── Logo header ──────────────────────────────────────────────────── */
#logosHeader {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-bg) 100%);
    border-radius: var(--border-radius-card);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.10);
    margin-bottom: 20px;
    border-width: calc(var(--card-border-width) * 2);
    border-style: solid;
    border-color: rgba(245, 196, 0, 0.20);
}

#imgLogo {
    max-width: var(--header-logo-size, 46%);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
    transition: transform 0.3s ease;
}
#imgLogo:hover { transform: scale(1.04); }

/* ── Inputs ───────────────────────────────────────────────────────── */
.form-control {
    border: 2px solid var(--color-input-border);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.3s ease;
    background-color: var(--color-input-bg);
}

.form-control:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 0.2rem rgba(245, 196, 0, 0.28);
    background-color: var(--color-white);
    transform: translateY(-1px);
}

.form-control.is-invalid,
.was-validated .form-control:invalid { margin-bottom: 0 !important; }

select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23111111' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 16px 12px;
    cursor: pointer;
}
select.form-control:hover { border-color: var(--color-secondary); }

input.form-control::placeholder,
select.form-control option:first-child { color: #adb5bd; font-style: italic; }

/* ── Botones ──────────────────────────────────────────────────────── */
.btn-primary {
    background: var(--btn-primary-bg);
    border: none;
    border-radius: var(--border-radius-btn);
    padding: 12px 30px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.30);
    color: var(--color-white);
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
    background: var(--btn-primary-bg-hover);
    color: var(--color-white);
}

/* Botón principal de acción — amarillo con texto negro */
.btn-portal {
    background: var(--btn-accent-bg);
    border: none;
    border-radius: 30px;
    padding: 14px 40px;
    font-weight: 700;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    box-shadow: 0 5px 20px rgba(245, 196, 0, 0.40);
    color: var(--color-text);   /* negro sobre amarillo = máximo contraste */
    text-transform: uppercase;
}
.btn-portal:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 25px rgba(245, 196, 0, 0.58);
    background: var(--btn-accent-bg-hover);
    color: var(--color-text);
}

.btn-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    border-radius: var(--border-radius-btn);
    padding: 12px 30px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.30);
}
.btn-success:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.50);
}

.btn-danger {
    background: linear-gradient(135deg, #dc3545 0%, #b02838 100%);
    border: none;
    border-radius: var(--border-radius-btn);
    padding: 12px 30px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.35);
}
.btn-danger:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.55);
}

.btn-lg {
    position: relative;
    overflow: hidden;
}
.btn-lg::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
    transition: left 0.5s;
}
.btn-lg:hover::before { left: 100%; }

/* ── Títulos ──────────────────────────────────────────────────────── */
h3 {
    background: linear-gradient(135deg, var(--color-text) 0%, #444444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ── Separador ────────────────────────────────────────────────────── */
hr {
    border: 0;
    height: 2px;
    background: linear-gradient(to right, transparent, var(--color-secondary), transparent);
    margin: 28px 0;
}

/* ── Alert info ───────────────────────────────────────────────────── */
/* Colores y borde configurables desde SuperAdmin → Tema → "Fondo y
   detalles" (fondo/texto/borde del aviso) — antes esta regla ignoraba
   esas variables (fondo en degradé fijo, borde siempre --color-secondary,
   texto siempre --color-text), así que cambiarlas en el panel no tenía
   ningún efecto visible. */
.alert-info {
    background: var(--color-alert-bg, #fffbe6);
    border: var(--alert-border, 2px solid var(--color-secondary));
    border-radius: 15px;
    color: var(--color-alert-text, var(--color-text));
    font-weight: 500;
}

/* ── Offcanvas (carrito / pago) ───────────────────────────────────── */
.offcanvas {
    background: linear-gradient(135deg, var(--color-bg) 0%, #f0efe7 100%);
}
.offcanvas-header {
    background: var(--btn-primary-bg-hover);
    color: var(--color-white);
}
.offcanvas-title { font-weight: 700; letter-spacing: 0.5px; }
.btn-close { filter: brightness(0) invert(1); }
.offcanvas-body { padding: 20px; }
.offcanvas-body .btn { font-weight: 600; letter-spacing: 0.5px; }

/* ── List group (carrito) ─────────────────────────────────────────── */
.list-group-item {
    background-color: var(--color-white);
    border-radius: 10px;
    margin-bottom: 8px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}
.list-group-item:hover {
    border-color: var(--color-secondary);
    transform: translateX(5px);
    box-shadow: 0 4px 12px rgba(245, 196, 0, 0.25);
}
.list-group-item strong { color: var(--color-text); }

/* ── Cart item ────────────────────────────────────────────────────── */
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cart-item button {
    background-color: transparent;
    border: none;
    color: #dc3545;
    cursor: pointer;
}

/* ── Labels de campos ─────────────────────────────────────────────── */
.field-label-text {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
}
/* Asterisco requerido — ámbar oscuro para contraste sobre blanco */
.req-star { color: #b8860b; margin-left: 2px; }

/* ── Input tipo archivo ────────────────────────────────────────────── */
input[type="file"].form-control {
    padding: 9px 12px;
    cursor: pointer;
    font-size: 14px;
    background-color: #fffbe6;
    border: 2px dashed var(--color-secondary);
    color: var(--color-text);
}
input[type="file"].form-control:hover { background-color: #fff5b2; transform: none; }

/* ── Radio / Checkboxgroup ─────────────────────────────────────────── */
.field-group {
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0;
    background: #f8f9fa;
    width: 100%;
}
.field-group legend {
    float: none;
    width: auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 6px;
    margin-bottom: 8px;
    opacity: 0.85;
}
.field-group .form-check { margin-bottom: 2px; }
.field-group .form-check-input:checked {
    background-color: var(--color-secondary);
    border-color: #c9a000;
}
.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(245, 196, 0, 0.30);
}

/* ── Animación campos condicionales (depends_on) ─────────────────── */
@keyframes fieldFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.field-appearing { animation: fieldFadeIn 0.22s ease forwards; }

/* ── Cards de productos ───────────────────────────────────────────── */
/* Antes .producto-card usaba var(--color-white) (siempre blanco, esa
   variable nunca la pisa un tema) para el fondo, mientras que .pc-name ya
   seguía var(--color-text) — con el preset "Oscuro con acento de marca"
   (--color-text pasa a blanco) el texto quedaba invisible sobre una card
   que nunca dejaba de ser blanca. Ahora todo el bloque sigue las variables
   del tema (--color-card-bg / --color-text / --color-input-border), como
   el resto de las cards del portal. */
.producto-card {
    display: block;
    cursor: pointer;
    border: 2px solid var(--color-input-border, #e0e0e0);
    border-radius: 16px;
    padding: 18px 20px;
    background: var(--color-card-bg);
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, background 0.22s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    margin: 0;
    user-select: none;
    height: 100%;
}
.prod-input { position: absolute; opacity: 0; pointer-events: none; }
.pc-inner   { display: flex; align-items: center; gap: 14px; }
.pc-icon    { font-size: 24px; flex-shrink: 0; line-height: 1; color: color-mix(in srgb, var(--color-text) 35%, transparent); transition: color 0.2s ease; }
.pc-on      { display: none; color: var(--color-secondary); }
.pc-off     { display: block; }
.pc-body    { flex: 1; min-width: 0; }
.pc-name    { display: block; font-weight: 700; font-size: 15px; color: var(--color-text); line-height: 1.3; }
.pc-desc    { display: block; font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent); margin-top: 4px; line-height: 1.4; }
/* El acento (--color-accent) suele ser un color vivo pensado para fondos/
   bordes (por default, un amarillo fuerte) — usarlo tal cual como color de
   texto tiene mal contraste sobre casi cualquier fondo, claro u oscuro.
   Mezclado con --color-text (que el tema ya resuelve correctamente en
   cada caso) queda con el matiz del acento pero la luminosidad que
   corresponde al tema. */
.pc-price   { font-size: 21px; font-weight: 800; color: color-mix(in srgb, var(--color-accent) 55%, var(--color-text) 45%); white-space: nowrap; flex-shrink: 0; text-align: right; }
.pc-price small { display: block; font-size: 11px; font-weight: 500; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.pc-badge   { margin-top: 6px; }
.pc-badge .badge {
    font-size: 11px; font-weight: 600;
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: color-mix(in srgb, var(--color-accent) 55%, var(--color-text) 45%);
    border-radius: 6px; padding: 3px 8px;
}

.producto-card:hover {
    border-color: var(--color-secondary);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 196, 0, 0.22);
}
.producto-card.selected {
    border-color: var(--color-secondary);
    background: linear-gradient(135deg, rgba(245, 196, 0, 0.08) 0%, rgba(245, 196, 0, 0.02) 100%);
    box-shadow: 0 4px 18px rgba(245, 196, 0, 0.28);
}
.producto-card.selected .pc-on  { display: block; }
.producto-card.selected .pc-off { display: none; }
.producto-card.selected .pc-icon { color: var(--color-secondary); }

/* ── Layout: Sede / Disertantes / Cronograma / Line-up ───────────────
   Congreso y Show-Feria (ver SuperAdmin → Layout). Colores por variables
   de tema (no hardcodeados) para que se vean bien con cualquier paleta,
   clara u oscura. */
.venue-section-header {
    display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.venue-section-icon { font-size: 1.7rem; color: var(--color-secondary); }
.venue-section-title { color: var(--color-white, #fff); font-size: 1.6rem; font-weight: 800; margin-bottom: 0; letter-spacing: 0.5px; }

.venue-card {
    background: var(--color-card-bg);
    border-radius: var(--border-radius-card, 20px);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
    border-width: var(--card-border-width);
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.venue-slide {
    width: 100%; height: 420px;
    background-color: #12121e; background-size: cover; background-position: center; background-repeat: no-repeat;
}
#venueCarousel .carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50%; border: none; opacity: 0.5; }
#venueCarousel .carousel-indicators .active { background-color: var(--color-secondary); opacity: 1; }
.venue-info-col { display: flex; flex-direction: column; border-left: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent); }
.venue-map-iframe { width: 100%; flex: 1; min-height: 280px; border: 0; display: block; }
.venue-address-block {
    padding: 20px 26px 22px;
    background: var(--color-card-bg);
    border-top: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);
}
.venue-address-row { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 14px; }
.venue-address-row:last-of-type { margin-bottom: 18px; }
.venue-address-icon {
    width: 34px; height: 34px; min-width: 34px;
    background: color-mix(in srgb, var(--color-accent) 15%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
    border-radius: 8px; display: flex; align-items: center; justify-content: center;
    color: color-mix(in srgb, var(--color-accent) 55%, var(--color-text) 45%);
    font-size: 15px;
}
.venue-address-label { display: block; font-size: 10px; font-weight: 700; color: color-mix(in srgb, var(--color-text) 55%, transparent); text-transform: uppercase; letter-spacing: 0.6px; }
.venue-address-value { display: block; font-size: 14.5px; font-weight: 600; color: var(--color-text); line-height: 1.35; }
.venue-maps-btn {
    display: inline-flex; align-items: center;
    background: var(--color-primary); color: var(--color-white, #fff) !important;
    text-decoration: none; padding: 10px 20px; border-radius: 8px;
    font-size: 13.5px; font-weight: 600; transition: opacity 0.2s, transform 0.2s;
}
.venue-maps-btn:hover { opacity: 0.85; transform: translateY(-1px); }
@media (max-width: 991px) {
    .venue-slide { height: 260px; }
    .venue-info-col { border-left: none; border-top: 1px solid color-mix(in srgb, var(--color-accent) 15%, transparent); }
    .venue-map-iframe { min-height: 240px; }
}

/* Disertantes */
.speaker-card {
    background: var(--color-card-bg);
    border-radius: var(--border-radius-card, 20px);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
    border-width: var(--card-border-width);
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.speaker-photo { width: 100%; height: 100%; min-height: 220px; object-fit: cover; object-position: top center; display: block; }
.speaker-photo-placeholder {
    width: 100%; min-height: 220px;
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
    display: flex; align-items: center; justify-content: center;
    color: color-mix(in srgb, var(--color-accent) 50%, transparent);
    font-size: 60px;
}
.speaker-body { padding: 22px 24px; }
.speaker-name { color: var(--color-text); font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; }
.speaker-role { color: color-mix(in srgb, var(--color-accent) 55%, var(--color-text) 45%); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.speaker-text { color: color-mix(in srgb, var(--color-text) 78%, transparent); line-height: 1.7; margin-bottom: 0; font-size: 14.5px; }

/* Cronograma */
.schedule-card {
    background: var(--color-card-bg);
    border-radius: var(--border-radius-card, 20px);
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.35);
    border-width: var(--card-border-width);
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
    padding: 30px 34px 26px;
}
.schedule-intro { color: color-mix(in srgb, var(--color-text) 75%, transparent); line-height: 1.65; margin-bottom: 24px; max-width: 640px; }
.schedule-day {
    border-width: var(--card-border-width);
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-text) 12%, transparent);
    border-radius: 14px; overflow: hidden;
    background: var(--color-card-bg);
    height: 100%; display: flex; flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.schedule-day:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); box-shadow: 0 10px 26px rgba(0,0,0,0.14); transform: translateY(-3px); }
.schedule-day-head {
    display: flex; align-items: center; gap: 10px; padding: 13px 16px;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.schedule-day-num {
    width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
    background: var(--color-secondary); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px;
}
.schedule-day-label { display: block; font-size: 10px; font-weight: 700; color: color-mix(in srgb, var(--color-accent) 60%, var(--color-text) 40%); text-transform: uppercase; letter-spacing: 0.7px; line-height: 1.2; }
.schedule-day-date { display: block; font-size: 14.5px; font-weight: 700; color: var(--color-text); line-height: 1.3; }
.schedule-thumb { position: relative; display: block; background: color-mix(in srgb, var(--color-text) 6%, transparent); cursor: zoom-in; overflow: hidden; }
.schedule-thumb img { width: 100%; display: block; aspect-ratio: 1 / 1.16; object-fit: cover; object-position: top center; transition: transform 0.4s ease; }
.schedule-thumb:hover img { transform: scale(1.025); }
.schedule-thumb-zoom {
    position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--color-primary); color: #fff;
    font-size: 12.5px; font-weight: 600; padding: 7px 15px; border-radius: 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.28);
    opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease;
}
.schedule-day:hover .schedule-thumb-zoom { opacity: 1; transform: translateX(-50%) translateY(-3px); }
.schedule-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent); }
.btn-schedule-outline {
    display: inline-flex; align-items: center; background: transparent;
    color: var(--color-primary) !important;
    border: 1.5px solid color-mix(in srgb, var(--color-text) 20%, transparent);
    text-decoration: none; padding: 9px 19px; border-radius: 8px; font-size: 13.5px; font-weight: 600;
    transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.btn-schedule-outline:hover { border-color: var(--color-secondary); background: color-mix(in srgb, var(--color-accent) 10%, transparent); transform: translateY(-1px); }
.schedule-modal .modal-content { background: transparent; border: none; }
.schedule-modal .modal-body { padding: 0; display: flex; justify-content: center; }
.schedule-viewer { position: relative; display: inline-block; max-width: 100%; }
.schedule-modal img { display: block; max-width: 100%; max-height: 88vh; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
.schedule-modal .btn-close {
    position: absolute; top: 12px; right: 12px; z-index: 3; padding: 9px;
    filter: none; background-color: rgba(255,255,255,0.95); border-radius: 50%; opacity: 1;
    box-shadow: 0 2px 12px rgba(0,0,0,0.45);
    transition: background-color 0.2s, transform 0.2s;
}
.schedule-modal .btn-close:hover { background-color: #fff; transform: scale(1.06); }
@media (max-width: 767px) {
    .schedule-card { padding: 24px 18px 20px; }
    .schedule-thumb-zoom { opacity: 1; }
    .schedule-actions { justify-content: center; }
}

/* Line-up / expositores (Show-Feria) */
.lineup-card {
    background: var(--color-card-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0,0,0,0.22);
    border-width: var(--card-border-width);
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
    display: flex; flex-direction: column;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.lineup-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.3); }
.lineup-photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.lineup-photo-placeholder {
    width: 100%; aspect-ratio: 1 / 1;
    background: color-mix(in srgb, var(--color-text) 10%, transparent);
    display: flex; align-items: center; justify-content: center;
    color: color-mix(in srgb, var(--color-accent) 50%, transparent);
    font-size: 42px;
}
.lineup-body { padding: 12px 14px 16px; }
.lineup-name { color: var(--color-text); font-size: 15px; font-weight: 800; margin-bottom: 2px; }
.lineup-category { color: color-mix(in srgb, var(--color-accent) 55%, var(--color-text) 45%); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.lineup-horario { color: color-mix(in srgb, var(--color-text) 70%, transparent); font-size: 12.5px; margin-bottom: 0; }

/* ── Cards genéricas ──────────────────────────────────────────────── */
.card {
    border: 1px solid #0000001c !important;
    margin-bottom: 0 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.card-header { background-color: #f8f9fa; font-weight: bold; }

/* ── Loading spinner ──────────────────────────────────────────────── */
#loadingIndicator {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050;
}

/* ── Footer logos ─────────────────────────────────────────────────── */
.footer-logos {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 20px;
}

/* ── Links ────────────────────────────────────────────────────────── */
a {
    text-decoration: none;
    color: var(--color-text);
    font-weight: 600;
    transition: all 0.3s ease;
}
a:hover { color: #c9a000; text-decoration: underline; }

/* ── Agenda (tabla responsive) ───────────────────────────────────── */
@media (max-width: 767.98px) {
    #agendaTable thead { display: none; }
    #agendaTable, #agendaTable tbody, #agendaTable tr, #agendaTable td {
        display: block; width: 100%;
    }
    #agendaTable tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        border-radius: .25rem;
        padding: .5rem;
    }
    #agendaTable td {
        text-align: left;
        padding-left: 0;
        position: relative;
        border: none;
        border-bottom: 1px solid #dee2e6;
        padding-top: 2.2em;
    }
    #agendaTable td::before {
        position: absolute;
        left: .75rem;
        top: .3em;
        font-weight: bold;
        content: attr(data-label);
        font-size: 1em;
        color: var(--color-text);
        padding-bottom: .5em;
        display: block;
    }
}

.agenda-thead th {
    background-color: var(--color-primary) !important;
    color: var(--color-secondary) !important;
    font-weight: bold;
    border-bottom: 2px solid var(--color-secondary) !important;
}

/* ── Secciones del formulario ─────────────────────────────────────── */
.form-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.form-section-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-text);
    white-space: nowrap;
}
.form-section-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, rgba(245, 196, 0, 0.65), transparent);
    border-radius: 2px;
}

/* ── Detalle decorativo: franja de acento arriba de la card principal ── */
.form-container {
    position: relative;
    overflow: hidden;
}
.form-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    /* Misma escala que el borde (ver --card-border-width) — este filete es
       visualmente "el borde de arriba" para quien lo mira, así que el
       switch de "Borde en las cards" lo tiene que apagar también. */
    height: calc(var(--card-border-width) * 4);
    background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
}

/* ── Sponsors ─────────────────────────────────────────────────────── */
.sponsors-section {
    text-align: center;
    margin: 8px 0 24px;
}
.sponsors-title {
    color: var(--color-white, #fff);
    opacity: .85;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px;
}

/* Layout: grid (columnas configurables desde SuperAdmin) */
.sponsors-grid {
    display: grid;
    grid-template-columns: repeat(var(--sponsors-cols, 4), 1fr);
    gap: 14px;
    align-items: stretch;
}

/* Layout: carrusel (scroll horizontal con snap + flechas) */
.sponsors-carousel-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
}
.sponsors-carousel {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 4px 2px 10px;
    flex: 1;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
}
.sponsors-carousel::-webkit-scrollbar { height: 6px; }
.sponsors-carousel::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .25); border-radius: 6px; }
.sponsors-carousel .sponsor-card,
.sponsors-carousel-track .sponsor-card {
    flex: 0 0 160px; /* carril de ancho fijo — el carrusel no reparte
                         columnas como el grid, así que el % del logo se
                         calcula sobre este ancho de referencia. */
}
.sponsors-carousel .sponsor-card { scroll-snap-align: start; }
.sponsors-carousel-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .3);
    background: rgba(255, 255, 255, .08);
    color: var(--color-white, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s;
    font-size: 14px;
}
.sponsors-carousel-btn:hover { background: rgba(255, 255, 255, .2); }

/* Card en sí — el ANCHO lo da el contenedor (columna del grid, o un carril
   fijo en carrusel — ver .sponsors-carousel/.sponsors-carousel-track más
   abajo), nunca al revés. El tamaño del logo es un % de ese ancho (no un
   alto fijo en píxeles): con un alto fijo, un logo ancho en una columna
   angosta de mobile terminaba letterboxeado por max-width, viéndose chico
   aunque el slider dijera "115px" — con % el logo escala junto con su
   columna y se ve igual de "lleno" en mobile que en desktop. */
.sponsor-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    min-width: 0; /* clave en grid: sin esto la card no se achica por debajo
                     del ancho de su contenido y empuja columnas al renglón
                     siguiente en vez de dejar que la imagen se achique. */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.sponsor-card img {
    width: var(--sponsors-logo-size, 70%);
    height: auto;
    max-width: 100%;
    max-height: 100%; /* tope por si el alto de fila quedó corto (logo muy
                          vertical) — igual nunca desborda la card. */
    object-fit: contain;
}

/* Estilo "con fondo — separado": cada logo en su propia tarjeta blanca */
.sponsor-card.style-card {
    background: var(--color-white, #fff);
    border-radius: 14px;
    border-width: var(--card-border-width);
    border-style: solid;
    border-color: color-mix(in srgb, var(--color-accent) 18%, transparent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}
.sponsor-card.style-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 26px color-mix(in srgb, var(--color-accent) 28%, transparent);
}

/* Estilo "sin fondo": solo el logo, sin tarjeta */
.sponsor-card.style-plain {
    padding: 6px 14px;
}
.sponsor-card.style-plain:hover {
    transform: translateY(-3px);
}

/* Estilo "con fondo — unificado": un solo fondo para todos los sponsors
   juntos (en vez de una tarjeta separada por logo). */
.sponsors-section.style-unified .sponsors-grid,
.sponsors-section.style-unified .sponsors-carousel-wrap,
.sponsors-section.style-unified .sponsors-carousel-viewport {
    background: var(--color-white, #fff);
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    padding: 18px 20px;
}

/* Carrusel de sponsors CON desplazamiento automático — mismo mecanismo
   que el carrusel del footer de logos (loop infinito duplicando la
   lista). El carrusel manual (con flechas) sigue igual que siempre. */
.sponsors-carousel-viewport { overflow: hidden; }
.sponsors-carousel-track {
    display: flex; align-items: center; gap: 20px; width: max-content;
}
.sponsors-carousel-track.animated {
    animation: sponsorsCarouselScroll var(--sponsors-duration, 16s) linear infinite;
    animation-direction: var(--sponsors-direction, normal);
}
.sponsors-carousel-track.animated:hover { animation-play-state: paused; }
@keyframes sponsorsCarouselScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Crédito "Desarrollado por AMAUTTA" sin card (configurable desde SuperAdmin
   → Logos → Footer) — mismo tratamiento sutil que .sponsors-title, salvo
   que el usuario elija un color de letra propio (ver inline style). */
.logos-footer-credit-plain {
    color: var(--color-white, #fff);
    opacity: .7;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .form-container { padding: 20px 15px; }
    h3 { font-size: 1.4rem; }
    #imgLogo { max-width: 100%; }
    .btn-portal { padding: 12px 28px; font-size: 14px; }
    .sponsor-card { padding: 8px 10px; }
    .sponsor-card.style-card { padding: 8px 10px; }
    /* La cantidad de columnas elegida en SuperAdmin se respeta tal cual en
       mobile: antes acá se forzaba un máximo de 3 (y 2 por debajo de 480px)
       aunque el usuario hubiera elegido más — ahora que la imagen se achica
       para entrar en su columna (no al revés), ese tope ya no hace falta. */
}