:root {
    --bg-color: #121212;
    --card-bg: #1e1e1e;

    /* Tema por defecto: Línea A (Negro + Rojo). Se actualiza dinámicamente con JS. */
    --primary: #b00020;
    --accent: #ff3b30;
    --primary-rgb: 176, 0, 32;
    --accent-rgb: 255, 59, 48;

    --text-main: #ffffff;
    --text-muted: #888888;

    --highlight-gradient: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    --border: rgba(255,255,255,0.08);
}

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    color: var(--text-main);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 450ms ease, color 450ms ease;
}

/* sutil brillo arriba (más "app") */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
        radial-gradient(900px 380px at 50% -10%, rgba(var(--accent-rgb), 0.18), transparent 60%),
        radial-gradient(700px 260px at 20% 0%, rgba(var(--primary-rgb), 0.20), transparent 55%);
    pointer-events: none;
    z-index: -1;
    transition: background 450ms ease, opacity 450ms ease, filter 450ms ease;
}


/* =============================
   TEMA CLARO/OSCURO (UI)
   - Oscuro por defecto
   - Claro: fondo blanco/gris suave, manteniendo colores de línea
   ============================= */
body[data-ui-theme="light"] {
    --bg-color: #f4f6f8;
    --card-bg: rgba(255,255,255,0.92);
    --text-main: #141518;
    --text-muted: rgba(20,21,24,0.55);
    --border: rgba(0,0,0,0.08);
}

body[data-ui-theme="light"]::before {
    background:
        radial-gradient(900px 380px at 50% -10%, rgba(var(--accent-rgb), 0.10), transparent 60%),
        radial-gradient(700px 260px at 20% 0%, rgba(var(--primary-rgb), 0.10), transparent 55%);
    opacity: 1;
    filter: saturate(0.95);
}

body[data-ui-theme="light"] .card-container {
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

body[data-ui-theme="light"] label {
    color: rgba(20,21,24,0.55);
}

body[data-ui-theme="light"] .hint {
    color: rgba(20,21,24,0.55);
}

body[data-ui-theme="light"] select {
    background-color: rgba(0,0,0,0.04);
    color: var(--text-main);
    border: 1px solid rgba(0,0,0,0.12);
}

body[data-ui-theme="light"] .select-wrapper::after {
    border-right: 2px solid rgba(0,0,0,0.35);
    border-bottom: 2px solid rgba(0,0,0,0.35);
}

body[data-ui-theme="light"] .segmented {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.08);
}

body[data-ui-theme="light"] .seg-btn {
    color: rgba(0,0,0,0.65);
}

body[data-ui-theme="light"] .btn-outline {
    color: rgba(0,0,0,0.78);
    border-color: rgba(0,0,0,0.18);
}

body[data-ui-theme="light"] .timeline-item {
    background-color: rgba(0,0,0,0.03);
}

body[data-ui-theme="light"] .timeline-item.pasado {
    background-color: transparent;
    border: 1px solid rgba(0,0,0,0.12);
}

body[data-ui-theme="light"] .mensaje-vacio {
    color: rgba(20,21,24,0.55);
}

/* =============================
   FIXES: MODO CLARO (v17)
   - Botones grandes (Mapa/Grilla) sin contraste
   - Tablas con zebra oscuro + títulos invisibles
   - Barra de herramientas del mapa muy oscura
   ============================= */

/* Botones grandes inferiores */
body[data-ui-theme="light"] .btn-secundario {
    background: rgba(0,0,0,0.04);
    color: var(--text-main);
    border-color: rgba(0,0,0,0.10);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}
body[data-ui-theme="light"] .btn-secundario:hover {
    background: rgba(0,0,0,0.06);
}

/* Header de pantallas (Tablas / Mapa) */
body[data-ui-theme="light"] .header-tablas {
    box-shadow: 0 4px 15px rgba(0,0,0,0.10);
}
body[data-ui-theme="light"] .header-tablas h2 {
    color: var(--text-main);
}

/* Tabs (Lun-Vie / Sáb / Dom-Fer) */
body[data-ui-theme="light"] .tab-btn {
    border-color: rgba(0,0,0,0.18);
    color: rgba(0,0,0,0.62);
}
body[data-ui-theme="light"] .tab-btn.active {
    color: #fff;
}

/* Tabla (zebra + bordes) */
body[data-ui-theme="light"] th,
body[data-ui-theme="light"] td {
    border-bottom-color: rgba(0,0,0,0.10);
}
body[data-ui-theme="light"] tbody tr:nth-child(even) {
    background-color: rgba(0,0,0,0.03);
}

/* Mapa: toolbar clara + inputs legibles */
body[data-ui-theme="light"] .map-toolbar {
    background: rgba(255,255,255,0.92);
}
body[data-ui-theme="light"] .chk-inline {
    color: rgba(0,0,0,0.65);
}
body[data-ui-theme="light"] .select-inline {
    background: rgba(0,0,0,0.04);
    color: var(--text-main);
    border-color: rgba(0,0,0,0.15);
}
body[data-ui-theme="light"] .search-input {
    background: rgba(0,0,0,0.04);
    color: var(--text-main);
    border-color: rgba(0,0,0,0.15);
}
body[data-ui-theme="light"] .search-input::placeholder {
    color: rgba(0,0,0,0.45);
}
body[data-ui-theme="light"] .search-results {
    background: rgba(255,255,255,0.98);
    border-color: rgba(0,0,0,0.10);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}
body[data-ui-theme="light"] .search-results button {
    color: rgba(0,0,0,0.85);
}
body[data-ui-theme="light"] .search-results .sub {
    color: rgba(0,0,0,0.55);
}

/* Planificador (Mapa): modo claro */
body[data-ui-theme="light"] .planner {
    background: rgba(0,0,0,0.03);
}
body[data-ui-theme="light"] .plan-step {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.10);
}
body[data-ui-theme="light"] .planner-sub,
body[data-ui-theme="light"] .planner-kv {
    color: rgba(0,0,0,0.62);
}


/* =============================
   TEMA CLARO / OSCURO (fondo)
   - Se controla con: body[data-ui-theme="light"|"dark"]
   ============================= */
body[data-ui-theme="light"] {
    --bg-color: #f4f6f8;
    --card-bg: rgba(255,255,255,0.92);
    --text-main: #141518;
    --text-muted: rgba(20,21,24,0.55);
    --border: rgba(0,0,0,0.08);
}

body[data-ui-theme="light"]::before {
    background:
        radial-gradient(900px 380px at 50% -10%, rgba(var(--accent-rgb), 0.10), transparent 60%),
        radial-gradient(700px 260px at 20% 0%, rgba(var(--primary-rgb), 0.10), transparent 55%);
    filter: saturate(0.95);
}

body[data-ui-theme="light"] .card-container {
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
}

body[data-ui-theme="light"] .segmented {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.08);
}

body[data-ui-theme="light"] .seg-btn {
    color: rgba(0,0,0,0.65);
}

body[data-ui-theme="light"] .btn-outline {
    color: rgba(0,0,0,0.78);
    border-color: rgba(0,0,0,0.18);
}

body[data-ui-theme="light"] .timeline-item {
    background-color: rgba(0,0,0,0.03);
}

body[data-ui-theme="light"] .timeline-item.pasado {
    border-color: rgba(0,0,0,0.12);
}

body[data-ui-theme="light"] .hint {
    color: rgba(20,21,24,0.55);
}

body[data-ui-theme="light"] label {
    color: rgba(20,21,24,0.55);
}

body[data-ui-theme="light"] select {
    background-color: rgba(0,0,0,0.04);
    color: var(--text-main);
    border: 1px solid rgba(0,0,0,0.12);
}

body[data-ui-theme="light"] .select-wrapper::after {
    border-right: 2px solid rgba(0,0,0,0.35);
    border-bottom: 2px solid rgba(0,0,0,0.35);
}


/* =============================
   UI THEME (Fondo claro/oscuro)
   ============================= */
body[data-ui-theme="light"] {
    --bg-color: #f4f6f8;
    --card-bg: rgba(255, 255, 255, 0.92);
    --text-main: #141518;
    --text-muted: rgba(20, 21, 24, 0.55);
    --border: rgba(0,0,0,0.08);
}

body[data-ui-theme="light"]::before {
    background:
        radial-gradient(900px 380px at 50% -10%, rgba(var(--accent-rgb), 0.10), transparent 60%),
        radial-gradient(700px 260px at 20% 0%, rgba(var(--primary-rgb), 0.10), transparent 55%);
    filter: saturate(0.95);
}

body[data-ui-theme="light"] .card-container {
    box-shadow: 0 10px 28px rgba(0,0,0,0.10);
}

body[data-ui-theme="light"] label {
    color: rgba(20,21,24,0.55);
}

body[data-ui-theme="light"] .hint {
    color: rgba(20,21,24,0.55);
}

body[data-ui-theme="light"] .select-wrapper::after {
    border-right: 2px solid rgba(0,0,0,0.35);
    border-bottom: 2px solid rgba(0,0,0,0.35);
}

body[data-ui-theme="light"] select {
    background-color: rgba(0,0,0,0.04);
    color: var(--text-main);
    border: 1px solid rgba(0,0,0,0.12);
}

body[data-ui-theme="light"] .segmented {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.08);
}

body[data-ui-theme="light"] .seg-btn {
    color: rgba(0,0,0,0.65);
}

body[data-ui-theme="light"] .btn-outline {
    color: rgba(0,0,0,0.78);
    border-color: rgba(0,0,0,0.18);
}

body[data-ui-theme="light"] .timeline-item {
    background-color: rgba(0,0,0,0.03);
}

body[data-ui-theme="light"] .timeline-item.pasado {
    border: 1px solid rgba(0,0,0,0.12);
}

body[data-ui-theme="light"] .mensaje-vacio {
    color: rgba(20,21,24,0.55);
}



main {
    padding: 20px;
    max-width: 450px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Transiciones de tema (al cambiar de línea) */
.card-container,
.segmented,
.seg-btn,
.btn-mini,
.btn-secundario,
.tab-btn,
.header-tablas,
.map-toolbar,
.timeline-item,
#pantalla-tablas,
#pantalla-mapa {
    transition: background-color 450ms ease, color 450ms ease, border-color 450ms ease, box-shadow 450ms ease, background 450ms ease;
}

header {
    margin-bottom: 18px;
    margin-top: 10px;
}

.header-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

.header-center {
    text-align: center;
}

.header-actions {
    justify-self: end;
}

/* Toggle de fondo (claro/oscuro) - sutil */
.theme-toggle {
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    backdrop-filter: blur(6px);
}

.theme-btn {
    width: 38px;
    height: 34px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.72);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.theme-btn:active { transform: scale(0.98); }

.theme-btn.active {
    background: rgba(255,255,255,0.12);
    color: var(--text-main);
    box-shadow: 0 10px 22px rgba(0,0,0,0.28);
}

body[data-ui-theme="light"] .theme-toggle {
    background: rgba(0,0,0,0.03);
}

body[data-ui-theme="light"] .theme-btn {
    color: rgba(0,0,0,0.60);
}

body[data-ui-theme="light"] .theme-btn.active {
    background: rgba(0,0,0,0.08);
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

h1 { font-size: 28px; margin: 0; font-weight: 800; letter-spacing: -1px; }
#fecha-hoy { color: var(--text-muted); font-size: 13px; text-transform: uppercase; margin-top: 5px; letter-spacing: 1px; }

.card-container {
    background-color: var(--card-bg);
    padding: 20px;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    border: 1px solid var(--border);
    margin-bottom: 25px;
}

label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    display: block;
    margin-bottom: 10px;
    text-align: left;
    letter-spacing: 1.2px;
}

.hint {
    margin: 6px 0 0;
    color: rgba(255,255,255,0.55);
    font-size: 12px;
    letter-spacing: 0.2px;
}

/* accesibilidad: oculto visual */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.select-wrapper {
    position: relative;
}

.select-wrapper::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255,255,255,0.55);
    border-bottom: 2px solid rgba(255,255,255,0.55);
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}

select {
    width: 100%; padding: 14px; font-size: 16px;
    background-color: #2c2c2c; color: white; border: 1px solid #444;
    border-radius: 15px; outline: none; text-align: left;
    appearance: none; -webkit-appearance: none;
    margin-bottom: 20px; font-family: 'Poppins', sans-serif;
}

/* Segmented control */
.segmented {
    display: flex;
    gap: 6px;
    padding: 6px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    margin-bottom: 18px;
}

.seg-btn {
    flex: 1;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.65);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    padding: 12px 10px;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.12s ease, background 0.2s ease, color 0.2s ease;
}

.seg-btn:active { transform: scale(0.99); }

.seg-btn.active {
    background: var(--highlight-gradient);
    color: white;
    box-shadow: 0 8px 18px rgba(var(--primary-rgb), 0.35);
}

.row-actions {
    display: flex;
    gap: 10px;
    margin-top: -6px;
    margin-bottom: 6px;
}

.btn-mini {
    flex: 1;
    border-radius: 14px;
    padding: 12px 12px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid transparent;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

.btn-mini:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-outline {
    background: transparent;
    color: rgba(255,255,255,0.85);
    border-color: rgba(255,255,255,0.18);
}

.btn-primary {
    background: rgba(var(--primary-rgb), 0.95);
    color: white;
    border-color: rgba(var(--accent-rgb), 0.25);
}

/* TIMELINE */
.timeline-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 15px; margin-bottom: 10px; border-radius: 12px;
    background-color: #252525; transition: all 0.3s;
}

.timeline-item.pasado { opacity: 0.5; background-color: transparent; border: 1px solid #333; }

.timeline-item.destacado {
    background: var(--highlight-gradient); flex-direction: column; padding: 20px;
    box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.40); transform: scale(1.02); margin: 15px 0; border: none;
}

.badge-status { font-size: 11px; font-weight: 700; letter-spacing: 2px; margin-bottom: 5px; opacity: 0.9; }
.time-main { font-size: 60px; font-weight: 800; line-height: 1; text-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.countdown { font-size: 16px; font-weight: 600; background: rgba(0,0,0,0.25); padding: 6px 18px; border-radius: 20px; margin-top: 10px; backdrop-filter: blur(5px); }

.timeline-item.futuro { border-left: 4px solid var(--accent); }
.time-col { font-size: 20px; font-weight: 700; }
.info-col { font-size: 14px; color: var(--text-muted); font-weight: 500; }
.timeline-item.destacado .info-col { color: white; }

.hidden { display: none !important; }
.mensaje-vacio { text-align: center; color: #555; font-style: italic; margin-top: 20px;}

/* BOTONES */
.btn-secundario {
    background: rgba(255,255,255,0.06);
    color: white;
    border: 1px solid var(--border);
    padding: 18px;
    border-radius: 18px;
    font-size: 15px;
    width: 100%;
    cursor: pointer;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(0,0,0,0.25);
    margin-top: auto;
    transition: transform 0.12s ease, background 0.2s ease;
}

.btn-secundario:active { transform: scale(0.99); }
.btn-secundario:hover { background: rgba(255,255,255,0.08); }

/* TABLAS */
#pantalla-tablas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--bg-color); z-index: 100; display: flex; flex-direction: column;
}
.header-tablas {
    padding: 15px 20px; background-color: var(--card-bg); display: flex;
    align-items: center; justify-content: space-between; box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.header-tablas h2 { margin: 0; font-size: 18px; color: white; }
.btn-volver { background: none; border: none; color: var(--accent); font-size: 15px; font-weight: 600; cursor: pointer; }

.tabs-container { display: flex; justify-content: center; gap: 10px; padding: 15px; background-color: var(--bg-color); }
.tab-btn {
    background: transparent; border: 1px solid #444; color: #888; padding: 8px 20px;
    border-radius: 25px; font-size: 13px; cursor: pointer; font-weight: 600;
}
.tab-btn.active { background-color: var(--primary); color: white; border-color: var(--primary); }

.tabla-scroll { flex: 1; overflow: auto; padding: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
th, td { padding: 14px 15px; text-align: center; border-bottom: 1px solid #333; }
th { color: var(--accent); position: sticky; top: 0; background-color: var(--card-bg); font-weight: 700; z-index: 10;}
tbody tr:nth-child(even) { background-color: #1a1a1a; }


/* --- Acciones inferiores (dos botones) --- */
.bottom-actions {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.bottom-actions .btn-secundario {
    margin-top: 0;
}

/* --- MAPA --- */
#pantalla-mapa {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 120;
    display: flex;
    flex-direction: column;
    /* UX: el mapa siempre visible. El scroll ocurre dentro del panel (map-toolbar), no en toda la pantalla. */
    overflow: hidden;
    overscroll-behavior: none;
    height: 100dvh;
}

/* Mantener navegación visible mientras se hace scroll */
/* En pantalla fija ya no necesitamos sticky; el panel se scrollea por dentro */
#pantalla-mapa .header-tablas { flex: 0 0 auto; z-index: 60; }
#pantalla-mapa .map-toolbar { flex: 0 0 auto; z-index: 55; }

.map-toolbar {
    padding: 12px 16px 10px;
    border-bottom: 1px solid var(--border);
    background: rgba(18,18,18,0.92);
    backdrop-filter: blur(10px);
    /* Scroll interno: si crece (buscadores/planificador/resultados) no tapa el mapa */
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.tool-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
}

.chk-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    user-select: none;
    white-space: nowrap;
}

.chk-inline input {
    width: 16px;
    height: 16px;
}

.select-inline {
    flex: 1;
    margin: 0;
    padding: 12px 12px;
    font-size: 13px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: #2c2c2c;
    color: white;
}

.map-canvas {
    width: 100%;
    /* El mapa ocupa todo el espacio restante. */
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    touch-action: none; /* mejora pan/zoom en móviles dentro de un layout flex */
}

@media (max-height: 740px) { .map-toolbar { max-height: 46vh; } }
@media (min-width: 900px) { .map-toolbar { max-height: 360px; } }

/* Resultados del planificador: no crecen infinito */
#planner-results {
    max-height: 200px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
}

/* Planificador: búsqueda destino */
.planner-search-wrap {
    min-width: 0;
}

/* --- PLANIFICADOR (Mapa) --- */
.planner {
    margin-top: 10px;
    padding: 12px 12px;
    border-radius: 18px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
}

.planner-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.planner-title {
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.2px;
}

.planner-sub {
    margin-top: 2px;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
}

.planner-body {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.planner-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.planner-kv {
    font-size: 12px;
    color: rgba(255,255,255,0.70);
}

.planner-results {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.plan-step {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.18);
}

.plan-step .t {
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.2px;
}

.plan-step .s {
    margin-top: 2px;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
}



/* --- Planificador (mejor UI + transbordos claros) --- */
.plan-options {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.plan-option-btn {
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(0,0,0,0.18);
    color: rgba(255,255,255,0.92);
    border-radius: 14px;
    padding: 10px 10px;
    cursor: pointer;
    min-width: 155px;
    text-align: left;
}

.plan-option-btn:hover {
    background: rgba(255,255,255,0.06);
}

.plan-option-btn.is-active {
    border-color: rgba(255,255,255,0.24);
    background: rgba(255,255,255,0.08);
}

.opt-title {
    font-size: 12px;
    font-weight: 800;
    display: block;
}

.opt-badges {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.opt-arrow {
    opacity: 0.75;
    font-weight: 900;
}

.line-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    color: #101012;
    background: var(--lb, rgba(255,255,255,0.85));
}

.plan-summary {
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
}

.plan-title {
    font-weight: 900;
    font-size: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.plan-meta {
    margin-top: 6px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
    color: rgba(255,255,255,0.78);
}

.plan-warn {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255,210,120,0.92);
}

.plan-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Reajuste: plan-step como “fila” con número */
.plan-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.plan-n {
    width: 26px;
    height: 26px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 12px;
    color: rgba(255,255,255,0.95);
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.14);
    flex: 0 0 auto;
    margin-top: 2px;
}

.plan-step-body {
    flex: 1 1 auto;
}

.plan-chip {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Marcadores numerados en el mapa */
.mk-step-num {
    background: transparent !important;
    border: none !important;
}

.step-pin {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px;
    color: rgba(255,255,255,0.96);
    background: rgba(0,0,0,0.75);
    border: 2px solid rgba(255,255,255,0.92);
    box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

.step-pin--origin { background: rgba(34, 170, 96, 0.92); }
.step-pin--dest   { background: rgba(70, 140, 255, 0.92); }
.step-pin--transfer { background: rgba(255, 200, 0, 0.92); color: #111; }
.step-pin--stop { background: rgba(10, 10, 12, 0.88); }
/* Icono de transbordo (más claro en el mapa) */
.mk-transfer {
    background: transparent !important;
    border: none !important;
}

.transfer-pin {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.80);
    border: 1px solid rgba(255,255,255,0.70);
    box-shadow: 0 12px 26px rgba(0,0,0,0.35);
}

.transfer-pin .ico {
    font-size: 14px;
    line-height: 1;
}

.transfer-pin .txt {
    font-weight: 900;
    font-size: 11px;
    color: rgba(255,255,255,0.96);
    letter-spacing: 0.2px;
}

/* Leaflet: tema oscuro */
.leaflet-container {
    background: #0f0f10;
    font-family: 'Poppins', sans-serif;
}

.leaflet-control-zoom a {
    background: rgba(30,30,30,0.9);
    color: white;
    border: 1px solid rgba(255,255,255,0.12);
}

.leaflet-control-attribution {
    background: rgba(18,18,18,0.75) !important;
    color: rgba(255,255,255,0.6) !important;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 4px 8px;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
    background: #1e1e1e;
    color: white;
    border: 1px solid rgba(255,255,255,0.10);
}

.leaflet-popup-content {
    margin: 10px 12px;
}

.leaflet-tooltip {
    background: rgba(30,30,30,0.9);
    color: white;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

/* --- POPUP (parada lógica + próximos horarios) --- */
.stop-popup {
    min-width: 240px;
}

.stop-popup__head {
    margin-bottom: 10px;
}

.stop-popup__title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.stop-popup__sub {
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    margin-top: 2px;
}

.stop-popup__meta {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    margin-top: 6px;
}



.stop-popup__dist {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

.stop-popup__dist span {
    font-size: 12px;
    color: rgba(255,255,255,0.72);
}

.stop-popup__dist strong {
    font-size: 12px;
    font-weight: 900;
    color: rgba(255,255,255,0.95);
}

.stop-popup__dist strong.muted {
    color: rgba(255,255,255,0.60);
    font-weight: 800;
}
.stop-popup__next {
    border-radius: 16px;
    padding: 12px 12px;
    background: var(--highlight-gradient);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 10px 22px rgba(0,0,0,0.35);
}

.stop-popup__label {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 800;
    opacity: 0.95;
}

.stop-popup__time {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
    margin-top: 6px;
}

.stop-popup__count {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.22);
    backdrop-filter: blur(6px);
}

.stop-popup__list {
    margin-top: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    overflow: hidden;
}

.stop-popup__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 10px 10px;
    background: rgba(255,255,255,0.04);
    border-top: 1px solid rgba(255,255,255,0.06);
}

.stop-popup__row:first-child { border-top: none; }

.stop-popup__row span {
    font-size: 12px;
    color: rgba(255,255,255,0.72);
}

.stop-popup__row strong {
    font-size: 14px;
    font-weight: 800;
}

.stop-popup__row em {
    font-style: normal;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
}

.stop-popup__warn {
    margin-top: 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    padding: 10px 10px;
    border: 1px dashed rgba(255,255,255,0.16);
    border-radius: 14px;
    background: rgba(0,0,0,0.18);
}

.stop-popup__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.popup-btn {
    flex: 1;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    padding: 10px 10px;
    border-radius: 14px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.popup-btn:active { transform: scale(0.99); }

.popup-btn.secondary {
    background: rgba(0,0,0,0.22);
}

.stop-popup__foot {
    margin-top: 10px;
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    text-align: right;
}




/* --- MAPA: búsqueda + marcadores --- */
.search-wrap {
    position: relative;
    flex: 1;
}

.search-input {
    width: 100%;
    padding: 12px 12px;
    font-size: 13px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: #2c2c2c;
    color: white;
    outline: none;
}

.search-input::placeholder {
    color: rgba(255,255,255,0.45);
}

.search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: rgba(22,22,22,0.96);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,0.55);
    z-index: 1000;
    max-height: 240px;
    overflow-y: auto;
}

.search-results button {
    width: 100%;
    text-align: left;
    padding: 12px 12px;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.92);
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    font-size: 13px;
}

.search-results button:hover {
    background: rgba(var(--accent-rgb), 0.10);
}

.search-results .sub {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    margin-top: 2px;
}

/* DivIcon base */
.stop-divicon {
    background: transparent;
    border: none;
}

.stop-icon {
    border-radius: 999px;
    display: block;
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), 0.18),
        0 10px 18px rgba(0,0,0,0.35);
}

/* Parada real (muchas) */
.stop-icon--real {
    width: 14px;
    height: 14px;
    background: rgba(255,255,255,0.92);
    border: 2px solid rgba(var(--accent-rgb), 0.78);
}

/* Parada lógica (las de la grilla) */
.stop-icon--logical {
    width: 24px;
    height: 24px;
    background: rgba(var(--accent-rgb), 0.95);
    border: 2px solid rgba(255,255,255,0.95);
    box-shadow:
        0 0 0 4px rgba(var(--primary-rgb), 0.22),
        0 14px 26px rgba(0,0,0,0.45);
    position: relative;
}

.stop-icon--logical::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 999px;
    background: rgba(18,18,18,0.85);
}

/* marcador usuario */
.user-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 1);
    border: 2px solid rgba(255,255,255,0.95);
    box-shadow:
        0 0 0 6px rgba(var(--accent-rgb), 0.18),
        0 18px 40px rgba(0,0,0,0.45);
}



/* =============================
   MAP ICONS v19 (Paradas + Mi ubicación)
   ============================= */

.mk-marker {
    position: relative;
    background: transparent;
    border: none;
}

/* Parada (mini): círculo con icono de colectivo */
.mk-marker--badge {
    width: 22px;
    height: 22px;
    color: rgba(var(--accent-rgb), 0.95);
}

.mk-marker--badge .mk-badge {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(var(--accent-rgb), 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 14px rgba(0,0,0,0.28);
}

body[data-ui-theme="light"] .mk-marker--badge .mk-badge {
    background: #ffffff;
    box-shadow: 0 10px 18px rgba(0,0,0,0.12);
}

/* Parada destacada: pin con icono */
.mk-marker--pin {
    width: 32px;
    height: 44px;
    color: rgba(255,255,255,0.98);
}

.mk-pin-svg {
    width: 32px;
    height: 44px;
    display: block;
    filter: drop-shadow(0 12px 18px rgba(0,0,0,0.35));
}

.mk-pin-glyph {
    position: absolute;
    top: 6px;
    left: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.mk-glyph {
    width: 18px;
    height: 18px;
    display: block;
}

.mk-marker--badge .mk-glyph {
    width: 14px;
    height: 14px;
}

/* Colores por tipo */
.mk-marker--stop.mk-marker--pin .mk-pin-shape {
    fill: rgba(var(--accent-rgb), 0.98);
    stroke: rgba(255,255,255,0.92);
    stroke-width: 1.3;
}

.mk-marker--stop.mk-marker--pin .mk-pin-inner {
    fill: rgba(18,18,18,0.30);
}

/* Mi ubicación: pin azul */
.mk-marker--user.mk-marker--pin .mk-pin-shape {
    fill: rgba(10,132,255,0.98);
    stroke: rgba(255,255,255,0.92);
    stroke-width: 1.3;
}

.mk-marker--user.mk-marker--pin .mk-pin-inner {
    fill: rgba(18,18,18,0.24);
}

/* Destino: pin verde */
.mk-marker--dest.mk-marker--pin .mk-pin-shape {
    fill: rgba(52,199,89,0.98);
    stroke: rgba(255,255,255,0.92);
    stroke-width: 1.3;
}

.mk-marker--dest.mk-marker--pin .mk-pin-inner {
    fill: rgba(18,18,18,0.24);
}

/* =============================
   MAP ROUTE (Degradé + Flechas de sentido)
   ============================= */

.route-arrow-icon {
    background: transparent;
    border: none;
}

.route-arrow {
    width: 18px;
    height: 18px;
    transform: rotate(var(--rot, 0deg));
    transform-origin: 50% 50%;
    filter: drop-shadow(0 8px 12px rgba(0,0,0,0.35));
    pointer-events: none;
}

.route-arrow svg {
    width: 18px;
    height: 18px;
    display: block;
}

.route-arrow path {
    fill: var(--col, rgba(var(--accent-rgb), 0.95));
    stroke: rgba(255,255,255,0.78);
    stroke-width: 1.1;
    stroke-linejoin: round;
}
/* =============================
   PUBLICIDAD (Banner superior)
   Fix: evita que el SVG/imagen se “desborde” del card.
   ============================= */
.ad-slot {
    position: relative;
    width: 100%;
    margin: 0 0 18px 0;
    border-radius: 18px;
    overflow: hidden; /* CLAVE: recorta el overflow */
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
}

.ad-badge {
    display: none !important;
}

.ad-link {
    display: block;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.ad-media {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Promo en formato "card" (Opción C: mixto imagen + texto) */
.ad-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 16px;
    min-height: 86px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.16);
    background: linear-gradient(90deg, rgba(0,0,0,0.30) 0%, rgba(10,132,255,0.26) 55%, rgba(10,132,255,0.36) 100%);
}

body[data-ui-theme="light"] .ad-card {
    border: 1px solid rgba(0,0,0,0.10);
    background: linear-gradient(90deg, rgba(255,255,255,0.75) 0%, rgba(10,132,255,0.14) 60%, rgba(10,132,255,0.18) 100%);
}

.ad-card__text {
    min-width: 0;
}

.ad-card__title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 4px 0;
}

.ad-card__sub {
    font-size: 13px;
    opacity: 0.9;
    margin: 0;
}

.ad-card__foot {
    margin-top: 6px;
    font-size: 11px;
    opacity: 0.75;
}

.ad-card__cta {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.16);
}

body[data-ui-theme="light"] .ad-card__cta {
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.10);
}

/* Videos: mejor encuadre */
.ad-media[type],
video.ad-media {
    width: 100%;
    max-width: 100%;
}

video.ad-media {
    height: 100%;
    object-fit: cover;
}

/* Por si algún SVG trae width/height fijos enormes */
.ad-slot img,
.ad-slot svg {
    max-width: 100% !important;
}

/* En pantallas chicas, evitamos que el banner se vuelva gigante */
@media (max-width: 420px) {
    .ad-slot {
        border-radius: 16px;
    }
}

/* =============================
   Leaflet: estilo suave en MODO CLARO (v18)
   - Controles + popups claros y con sombras suaves
   ============================= */
body[data-ui-theme="light"] .leaflet-container {
    background: #e9edf2;
}

body[data-ui-theme="light"] .leaflet-bar a,
body[data-ui-theme="light"] .leaflet-control-zoom a {
    background: rgba(255,255,255,0.94);
    color: rgba(0,0,0,0.78);
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

body[data-ui-theme="light"] .leaflet-bar a:hover {
    background: rgba(255,255,255,0.98);
}

body[data-ui-theme="light"] .leaflet-control-attribution {
    background: rgba(255,255,255,0.80) !important;
    color: rgba(0,0,0,0.55) !important;
    border: 1px solid rgba(0,0,0,0.10);
    box-shadow: 0 10px 20px rgba(0,0,0,0.10);
}

body[data-ui-theme="light"] .leaflet-popup-content-wrapper,
body[data-ui-theme="light"] .leaflet-popup-tip {
    background: rgba(255,255,255,0.98);
    color: var(--text-main);
    border: 1px solid rgba(0,0,0,0.10);
}

body[data-ui-theme="light"] .leaflet-popup-content-wrapper {
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
}

body[data-ui-theme="light"] .leaflet-popup-close-button {
    color: rgba(0,0,0,0.55) !important;
}

body[data-ui-theme="light"] .leaflet-tooltip {
    background: rgba(255,255,255,0.94);
    color: rgba(0,0,0,0.78);
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}

/* Popups de paradas (contenido custom) */
body[data-ui-theme="light"] .stop-popup__title {
    color: var(--text-main);
}
body[data-ui-theme="light"] .stop-popup__sub,
body[data-ui-theme="light"] .stop-popup__meta,
body[data-ui-theme="light"] .stop-popup__row span,
body[data-ui-theme="light"] .stop-popup__row em,
body[data-ui-theme="light"] .stop-popup__warn,
body[data-ui-theme="light"] .stop-popup__foot {
    color: rgba(0,0,0,0.58);
}

body[data-ui-theme="light"] .stop-popup__dist {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.10);
}

body[data-ui-theme="light"] .stop-popup__dist span {
    color: rgba(0,0,0,0.60);
}

body[data-ui-theme="light"] .stop-popup__dist strong {
    color: rgba(0,0,0,0.86);
}

body[data-ui-theme="light"] .stop-popup__list {
    border-color: rgba(0,0,0,0.10);
}

body[data-ui-theme="light"] .stop-popup__row {
    background: rgba(0,0,0,0.02);
    border-top-color: rgba(0,0,0,0.06);
}

body[data-ui-theme="light"] .popup-btn {
    background: rgba(0,0,0,0.04);
    color: rgba(0,0,0,0.86);
    border-color: rgba(0,0,0,0.12);
}

body[data-ui-theme="light"] .popup-btn.secondary {
    background: rgba(0,0,0,0.06);
}

/* =============================
   TAKEOVER LAYOUT (v21)
   - Hero superior con sponsor (BlackTucan)
   - Card "glass" superpuesto
   - Header con gradiente + safe-area
   - Banner azul (ad-slot) compacto (90px mobile / 110px desktop)
   ============================= */

:root {
    --ad-top-h: 110px;
}

@media (max-width: 520px) {
    :root { --ad-top-h: 90px; }
}

/* Ajuste general de layout (principal) */
main {
    padding: 0 18px calc(22px + env(safe-area-inset-bottom));
    max-width: 480px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

header {
    margin: 0 -18px 10px;
    padding: calc(10px + env(safe-area-inset-top)) 18px 16px;
    background:
        radial-gradient(900px 340px at 50% -30%, rgba(var(--accent-rgb), 0.46), transparent 62%),
        linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.58) 55%, rgba(0,0,0,0.18) 82%, rgba(0,0,0,0) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    position: sticky;
    top: 0;
    z-index: 40;
}

body[data-ui-theme="light"] header {
    background:
        radial-gradient(900px 340px at 50% -30%, rgba(var(--accent-rgb), 0.18), transparent 62%),
        linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 55%, rgba(255,255,255,0.20) 82%, rgba(255,255,255,0) 100%);
    border-bottom-color: rgba(0,0,0,0.08);
}

header h1 {
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -1px;
}

#fecha-hoy {
    font-size: 12px;
    letter-spacing: 1.2px;
    margin-top: 6px;
}

/* Hero takeover */

/* Fondo takeover (blur + overlay) */
.takeover-bg {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: var(--takeover-bg, none);
    background-size: cover;
    background-position: center;
    transform: scale(1.08);
    filter: blur(18px) brightness(0.55) saturate(1.12);
    opacity: 0;
    transition: opacity .35s ease;
}

body.takeover-on .takeover-bg {
    opacity: 1;
}

body.takeover-on::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1200px 520px at 50% -10%, rgba(var(--accent-rgb), .44) 0%, rgba(0,0,0,0) 62%),
        linear-gradient(180deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.86) 40%, rgba(0,0,0,.92) 100%);
}

body.takeover-on[data-ui-theme="light"] .takeover-bg {
    filter: blur(18px) brightness(0.95) saturate(1.08);
}

body.takeover-on[data-ui-theme="light"]::before {
    background:
        radial-gradient(1200px 520px at 50% -10%, rgba(var(--accent-rgb), .18) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.86) 40%, rgba(255,255,255,.92) 100%);
}

.takeover-hero {
    display: none;
    margin: -30px -18px 0;
    height: clamp(240px, 38vh, 340px);
    position: relative;
    overflow: hidden;
    border-bottom-left-radius: 34px;
    border-bottom-right-radius: 34px;
    box-shadow: 0 28px 70px rgba(0,0,0,0.60);
}

/* Hacemos el banner principal clickable (link) */
.takeover-hero-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.takeover-hero-link[href="#"] {
  cursor: default;
}

.takeover-hero-link:not([href="#"]) {
  cursor: pointer;
}

.takeover-hero-link:active .takeover-hero {
  transform: scale(0.995);
}

body.takeover-on .takeover-hero {
    display: block;
}

.takeover-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(900px 380px at 20% 0%, rgba(0,0,0,0.10), transparent 55%),
        linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.18) 50%, rgba(0,0,0,0.72) 100%);
    pointer-events: none;
}

.takeover-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.03);
    filter: saturate(1.04);
}

.takeover-hero picture {
    display: block;
    width: 100%;
    height: 100%;
}

.takeover-hero picture img {
    width: 100%;
    height: 100%;
}

/* Card superpuesto sobre el hero */
.card-container {
    background: rgba(20,20,20,0.62);
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    padding: 18px;
    border-radius: 28px;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 26px 60px rgba(0,0,0,0.55);
    margin: 0 0 22px;
}

body.takeover-on .card-container {
    margin-top: -92px;
}

body[data-ui-theme="light"] .card-container {
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 18px 50px rgba(0,0,0,0.14);
}

/* Banner azul (ad-slot) compacto + prolijo */
.ad-slot {
    height: var(--ad-top-h);
    margin: 0 0 16px 0;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
}

.ad-link,
.ad-media {
    width: 100%;
    height: 100%;
}

.ad-media {
    display: block;
    object-fit: cover;
}

/* Segmented: un poco más compacto para que no "rompa" el card */
.segmented {
    margin-bottom: 16px;
}

label {
    margin-bottom: 8px;
}

/* Botones inferiores: más aire y alineación */
.bottom-actions {
    margin-top: 12px;
    gap: 12px;
}

/* En pantallas chicas: card un pelín más "apretada" */
@media (max-width: 390px) {
    .card-container { padding: 16px; }
    header h1 { font-size: 28px; }
}


/* =============================
   SPONSORS (botón + pantalla)
   ============================= */

/* Botón sutil "Sponsors" en el header */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: flex-end;
}

/* Entrada principal a Promociones (botón grande bajo la promo) */
.promos-entry {
    margin: 10px 0 14px;
}

.promos-cta {
    width: 100%;
    padding: 12px 14px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.92);
    font-weight: 900;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.12s ease, background-color 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}

.promos-cta:hover { background: rgba(255,255,255,0.09); }
.promos-cta:active { transform: scale(0.99); }
.promos-cta:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

body[data-ui-theme="light"] .promos-cta {
    background: rgba(0,0,0,0.04);
    color: rgba(0,0,0,0.82);
    box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}
body[data-ui-theme="light"] .promos-cta:hover { background: rgba(0,0,0,0.06); }

.sponsors-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.86);
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2px;
    backdrop-filter: blur(8px);
    transition: transform 0.12s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.sponsors-btn:hover { background: rgba(255,255,255,0.07); }
.sponsors-btn:active { transform: scale(0.99); }

.sponsors-ic { opacity: 0.95; }
.sponsors-tx { display: none; }

/* En desktop mostramos texto */
@media (min-width: 420px) {
    .sponsors-tx { display: inline; }
}

body[data-ui-theme="light"] .sponsors-btn {
    background: rgba(0,0,0,0.03);
    color: rgba(0,0,0,0.78);
}
body[data-ui-theme="light"] .sponsors-btn:hover { background: rgba(0,0,0,0.06); }


/* Pantalla Sponsors */
#pantalla-sponsors {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 110;
    display: flex;
    flex-direction: column;
}

#pantalla-sponsors .header-tablas { flex: 0 0 auto; }

.sponsors-scroll {
    flex: 1 1 auto;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 16px 28px;
}

.sponsors-page {
    max-width: 450px;
    margin: 0 auto;
}

.sponsors-hero {
    /* Estilo más "app" (tipo el ejemplo): título grande y limpio */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 2px 2px;
}

.sponsors-hero-title {
    font-size: 30px;
    font-weight: 1000;
    letter-spacing: -0.9px;
}

.sponsors-hero-sub {
    display: none;
}

.sponsors-controls {
    margin-top: 10px;
    display: grid;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 10px 0 12px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.08));
}

body[data-ui-theme="light"] .sponsors-controls {
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.55));
}

/* Segmented (Hoy/Semana/Todo) como "pills" */
#pantalla-sponsors .segmented {
    margin-bottom: 0;
    border-radius: 999px;
    padding: 4px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    display: flex;
    gap: 6px;
}

body[data-ui-theme="light"] #pantalla-sponsors .segmented {
    background: rgba(0,0,0,0.03);
}

#pantalla-sponsors .segmented .seg-btn {
    flex: 1 1 0;
    border-radius: 999px;
    padding: 9px 12px;
    font-weight: 950;
    font-size: 12px;
    letter-spacing: 0.2px;
}

.sponsors-search .search-input {
    width: 100%;
}

.sponsors-list {
    margin-top: 14px;
    display: grid;
    gap: 14px;
}

.sponsor-block {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.25);
    overflow: hidden;
}

body[data-ui-theme="light"] .sponsor-block {
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

.sponsor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
}

.sponsor-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sponsor-logo {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    object-fit: cover;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
}

body[data-ui-theme="light"] .sponsor-logo { background: rgba(0,0,0,0.04); }

.sponsor-name {
    font-weight: 900;
    letter-spacing: -0.3px;
    font-size: 14px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sponsor-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sponsor-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.05);
    color: var(--text-main);
    text-decoration: none;
    font-weight: 800;
    font-size: 12px;
}
.sponsor-cta:hover { background: rgba(255,255,255,0.08); }
body[data-ui-theme="light"] .sponsor-cta { background: rgba(0,0,0,0.03); color: rgba(0,0,0,0.85); }

.promo-grid {
    padding: 12px 14px 16px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 520px) {
    .promo-grid { grid-template-columns: 1fr 1fr; }
}

.promo-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border);
    border-radius: 18px;
    background: rgba(255,255,255,0.03);
    overflow: hidden;
    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
    transition: transform 0.12s ease, background 0.2s ease;
}
.promo-card:hover { background: rgba(255,255,255,0.06); }
.promo-card:active { transform: scale(0.99); }

body[data-ui-theme="light"] .promo-card {
    background: rgba(0,0,0,0.02);
    box-shadow: 0 12px 20px rgba(0,0,0,0.08);
}

.promo-img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
    background: rgba(0,0,0,0.12);
}

.promo-body {
    padding: 12px 12px 14px;
}

.promo-title {
    font-weight: 900;
    font-size: 14px;
    letter-spacing: -0.2px;
}

.promo-subtitle {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.promo-foot {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
}

.promo-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.88);
    font-weight: 800;
    font-size: 11px;
}

body[data-ui-theme="light"] .promo-badge {
    background: rgba(0,0,0,0.03);
    color: rgba(0,0,0,0.78);
}

.sponsors-foot {
    margin-top: 14px;
    padding: 14px 14px;
    border-radius: 22px;
    border: 1px dashed rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.02);
}

body[data-ui-theme="light"] .sponsors-foot {
    border-color: rgba(0,0,0,0.14);
    background: rgba(0,0,0,0.02);
}

.sponsors-foot-title {
    font-weight: 900;
    letter-spacing: -0.2px;
    font-size: 13px;
}

.sponsors-foot-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

/* ================================
   PROMOS: Rubro → Comercio → Pinterest
   ================================ */

.promos-view { margin-top: 10px; }

/* HUB: Rubros */
.promo-cats-grid {
    /* Masonry simple (Pinterest vibe) */
    column-count: 2;
    column-gap: 12px;
}

@media (min-width: 520px) {
    .promo-cats-grid { column-count: 3; }
    .sponsors-page { max-width: 520px; }
}

.promo-cat-tile {
    width: 100%;
    display: inline-block;
    break-inside: avoid;
    margin: 0 0 12px;
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
    box-shadow: 0 18px 40px rgba(0,0,0,0.28);
    padding: 14px 14px;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 138px;
    transition: transform 0.12s ease, filter 0.2s ease;
}
.promo-cat-tile:hover { filter: brightness(1.06); }
.promo-cat-tile:active { transform: scale(0.99); }

body[data-ui-theme="light"] .promo-cat-tile {
    border-color: rgba(0,0,0,0.08);
    background: linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.01));
    box-shadow: 0 16px 30px rgba(0,0,0,0.10);
}

/* Variación de alturas para vibe "Pinterest" */
.promo-cats-grid .promo-cat-tile:nth-child(4n+1) { min-height: 176px; }
.promo-cats-grid .promo-cat-tile:nth-child(5n+3) { min-height: 162px; }

/* Píldora (cantidad de comercios) */
.promo-cat-pill {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.18);
    color: rgba(255,255,255,0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body[data-ui-theme="light"] .promo-cat-pill {
    border-color: rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.70);
    color: rgba(0,0,0,0.80);
}

.promo-cat-icon {
    /* Icono como “watermark” (tipo card con imagen) */
    position: absolute;
    top: 42px;
    right: 14px;
    left: auto;
    font-size: 56px;
    line-height: 1;
    opacity: 0.22;
    filter: saturate(1.1);
    text-shadow: 0 14px 30px rgba(0,0,0,0.35);
}

.promo-cat-name {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    font-weight: 1000;
    font-size: 18px;
    letter-spacing: -0.4px;
    text-shadow: 0 10px 24px rgba(0,0,0,0.40);
}

.promo-cat-meta {
    position: absolute;
    left: 14px;
    bottom: 40px;
    font-size: 11px;
    opacity: 0.92;
    color: rgba(255,255,255,0.88);
    text-shadow: 0 10px 24px rgba(0,0,0,0.35);
}

body[data-ui-theme="light"] .promo-cat-meta {
    color: rgba(0,0,0,0.70);
    text-shadow: none;
}

/* Gradientes por rubro (data-cat viene del JS) */
.promo-cat-tile[data-cat="bares"] { background: linear-gradient(135deg, rgba(255,70,70,0.88), rgba(110,0,30,0.55)); }
.promo-cat-tile[data-cat="restaurante"] { background: linear-gradient(135deg, rgba(255,140,60,0.88), rgba(120,40,0,0.55)); }
.promo-cat-tile[data-cat="farmacia"] { background: linear-gradient(135deg, rgba(70,190,255,0.88), rgba(0,60,120,0.55)); }
.promo-cat-tile[data-cat="kiosco"] { background: linear-gradient(135deg, rgba(120,255,180,0.88), rgba(0,90,60,0.55)); }
.promo-cat-tile[data-cat="gym"] { background: linear-gradient(135deg, rgba(170,120,255,0.88), rgba(55,0,120,0.55)); }
.promo-cat-tile[data-cat="moda"] { background: linear-gradient(135deg, rgba(255,120,210,0.88), rgba(120,0,80,0.55)); }
.promo-cat-tile[data-cat="verduleria"] { background: linear-gradient(135deg, rgba(90,235,120,0.88), rgba(0,110,40,0.55)); }
.promo-cat-tile[data-cat="carniceria"] { background: linear-gradient(135deg, rgba(255,90,120,0.88), rgba(120,0,30,0.55)); }
.promo-cat-tile[data-cat="taller"] { background: linear-gradient(135deg, rgba(255,210,90,0.88), rgba(120,70,0,0.55)); }

/* RUBRO: Comercios */
.promo-cat-head {
    margin-top: 6px;
    padding: 10px 2px 2px;
}

.promo-cat-title {
    font-weight: 1000;
    letter-spacing: -0.6px;
    font-size: 22px;
    text-transform: uppercase;
}

.promo-cat-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.promo-biz-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}


@media (min-width: 560px) {
    .promo-biz-grid { grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 860px) {
    .promo-biz-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
}

.biz-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 12px 16px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.02);
    box-shadow: none;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease;
}

.biz-tile:hover { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.16); }
.biz-tile:active { transform: scale(0.99); }

body[data-ui-theme="light"] .biz-tile {
    background: rgba(0,0,0,0.015);
    border-color: rgba(0,0,0,0.08);
}

.biz-logo {
    width: 88px;
    height: 88px;
    border-radius: 999px;
    object-fit: contain;
    padding: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 10px 22px rgba(0,0,0,0.22);
}


body[data-ui-theme="light"] .biz-logo { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.10); box-shadow: 0 10px 18px rgba(0,0,0,0.10); }

.biz-name {
    width: 100%;
    text-align: center;
    font-weight: 900;
    font-size: 13px;
    letter-spacing: -0.25px;
    line-height: 1.15;
}


.biz-sub {
    width: 100%;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
}

/* COMERCIO: Perfil + feed */
.sponsor-profile {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border-radius: 22px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}

body[data-ui-theme="light"] .sponsor-profile {
    background: rgba(0,0,0,0.02);
    box-shadow: 0 12px 20px rgba(0,0,0,0.08);
}

.sponsor-profile-logo {
    width: 54px;
    height: 54px;
    border-radius: 22px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.06);
}

body[data-ui-theme="light"] .sponsor-profile-logo { background: rgba(0,0,0,0.04); }

.sponsor-profile-meta { min-width: 0; flex: 1 1 auto; }

.sponsor-profile-name {
    font-weight: 1000;
    letter-spacing: -0.4px;
    font-size: 15px;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sponsor-profile-sub {
    margin-top: 3px;
    font-size: 12px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pinterest/Masonry */
.sponsor-masonry {
    margin-top: 14px;
    column-count: 2;
    column-gap: 12px;
}

@media (min-width: 760px) {
    .sponsor-masonry { column-count: 3; }
}

.masonry-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin: 0 0 12px;
    display: inline-block;
    width: 100%;
}

/* Dejar que las imágenes definan su alto (más Pinterest) */
.sponsor-masonry .promo-img {
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}


/* =========================================================
   NEOBRUTALISM: Sponsor View (último nivel)
   Solo afecta la pantalla de un comercio (/promos-view-sponsor)
========================================================= */

#promos-view-sponsor.nb-sponsor {
    padding: 8px 0 16px;
}

#promos-view-sponsor.nb-sponsor .nb-shell {
    padding: 14px 12px 18px;
    border: 3px solid #111;
    border-radius: 28px;
    background: linear-gradient(180deg, #F9F7FF 0%, #FFF2E1 100%);
    box-shadow: 7px 7px 0 #111;
}

#promos-view-sponsor.nb-sponsor .nb-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 3px solid #111;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 5px 5px 0 #111;
}

#promos-view-sponsor.nb-sponsor .nb-avatar {
    width: 64px;
    height: 64px;
    border-radius: 999px;
    border: 3px solid #111;
    background: #FFE27A;
    box-shadow: 4px 4px 0 #111;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

#promos-view-sponsor.nb-sponsor .nb-avatar-img {
    width: 78%;
    height: 78%;
    object-fit: contain;
    image-rendering: auto;
}

#promos-view-sponsor.nb-sponsor .nb-profile-meta {
    min-width: 0;
}

#promos-view-sponsor.nb-sponsor .nb-profile-name {
    font-weight: 900;
    font-size: 18px;
    letter-spacing: 0.2px;
    color: #111;
    line-height: 1.15;
    text-transform: uppercase;
}

#promos-view-sponsor.nb-sponsor .nb-profile-sub {
    color: #222;
    font-size: 12px;
    opacity: 0.85;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#promos-view-sponsor.nb-sponsor .nb-profile-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

#promos-view-sponsor.nb-sponsor .nb-icbtn {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 3px solid #111;
    background: #F3F3F3;
    box-shadow: 4px 4px 0 #111;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

#promos-view-sponsor.nb-sponsor .nb-icbtn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #111;
}

#promos-view-sponsor.nb-sponsor .nb-ic {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

#promos-view-sponsor.nb-sponsor .nb-pill {
    padding: 10px 12px;
    border-radius: 18px;
    border: 3px solid #111;
    background: #D7FF5E;
    color: #111;
    font-weight: 900;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 #111;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

#promos-view-sponsor.nb-sponsor .nb-pill:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #111;
}

#promos-view-sponsor.nb-sponsor .nb-featured {
    margin-top: 14px;
}

#promos-view-sponsor.nb-sponsor .nb-featured-card {
    display: block;
    border: 3px solid #111;
    border-radius: 26px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 6px 6px 0 #111;
    position: relative;
}

#promos-view-sponsor.nb-sponsor .nb-featured-img {
    width: 100%;
    height: auto;
    display: block;
}

#promos-view-sponsor.nb-sponsor .nb-featured-overlay {
    position: absolute;
    inset: 0;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%);
}

#promos-view-sponsor.nb-sponsor .nb-badge {
    align-self: flex-start;
    background: #FF4D79;
    color: #111;
    border: 3px solid #111;
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 #111;
}

#promos-view-sponsor.nb-sponsor .nb-featured-title {
    color: #FFFFFF;
    font-weight: 900;
    font-size: 18px;
    text-transform: uppercase;
    text-shadow: 0 2px 0 rgba(0,0,0,0.35);
    letter-spacing: 0.3px;
}

#promos-view-sponsor.nb-sponsor .nb-featured-cta {
    align-self: flex-start;
    padding: 10px 16px;
    border-radius: 999px;
    border: 3px solid #111;
    background: #FFD24D;
    color: #111;
    font-weight: 900;
    box-shadow: 4px 4px 0 #111;
    text-transform: uppercase;
}

#promos-view-sponsor.nb-sponsor .nb-feed-head {
    margin-top: 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
}

#promos-view-sponsor.nb-sponsor .nb-feed-title {
    font-weight: 900;
    color: #111;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

#promos-view-sponsor.nb-sponsor .nb-feed-hint {
    font-size: 12px;
    color: #111;
    opacity: 0.75;
}

#promos-view-sponsor.nb-sponsor .nb-masonry {
    column-gap: 14px;
}

#promos-view-sponsor.nb-sponsor .promo-card {
    position: relative;
    border: 3px solid #111;
    border-radius: 24px;
    overflow: hidden;
    background: #FFFFFF;
    box-shadow: 6px 6px 0 #111;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
}

#promos-view-sponsor.nb-sponsor .promo-card:active {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 #111;
}

#promos-view-sponsor.nb-sponsor .promo-body {
    padding: 12px;
}

#promos-view-sponsor.nb-sponsor .promo-title {
    color: #111;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

#promos-view-sponsor.nb-sponsor .promo-foot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 2px dashed rgba(0,0,0,0.18);
    font-size: 12px;
    color: #111;
}

#promos-view-sponsor.nb-sponsor .promo-foot .promo-badge {
    display: none; /* usamos la badge en overlay */
}

#promos-view-sponsor.nb-sponsor .nb-card-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

#promos-view-sponsor.nb-sponsor .nb-badge-inline {
    background: #D7FF5E;
    color: #111;
    border: 3px solid #111;
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 900;
    font-size: 12px;
    text-transform: uppercase;
    box-shadow: 4px 4px 0 #111;
    display: inline-block;
}

#promos-view-sponsor.nb-sponsor .nb-bottom {
    position: sticky;
    bottom: 10px;
    margin-top: 14px;
    z-index: 5;
}

#promos-view-sponsor.nb-sponsor .nb-bottom-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 16px;
    border-radius: 999px;
    border: 3px solid #111;
    background: #111;
    color: #FFFFFF;
    font-weight: 900;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 6px 6px 0 #111;
}

#promos-view-sponsor.nb-sponsor .nb-bottom-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 #111;
}

@media (min-width: 520px) {
    #promos-view-sponsor.nb-sponsor .nb-shell {
        margin: 0 auto;
        max-width: 520px;
    }
}