/* ============================================================
   Encuentra Tu Descuento — Estilos globales
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
    --brand:        #4F46E5;
    --brand-dark:   #4338CA;
    --acento:       #22C55E;
    --alerta:       #F59E0B;
    --success:      #22C55E;
    --surface:      #F8FAFC;
    --border:       #e2e8f0;
    --text-muted:   #64748b;
    --radius:       0.6rem;

    /* Sobreescribe la paleta "primary" de Bootstrap 5.3 (variables CSS) */
    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4F46E5;
    --bs-link-color-rgb: 79, 70, 229;
    --bs-link-hover-color: #4338CA;
    --bs-link-hover-color-rgb: 67, 56, 202;
}

body {
    background: var(--surface);
    font-family: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.85rem;
    color: #0F172A;
}

/* Encabezados más discretos en todo el sitio — nada de letras gigantes */
h1, h2, h3 { font-size: 1.4rem; }
h4 { font-size: 1.15rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }
.display-5 { font-size: 1.6rem !important; }
.lead      { font-size: 0.95rem !important; }

.btn-primary {
    --bs-btn-bg: #4F46E5;
    --bs-btn-border-color: #4F46E5;
    --bs-btn-hover-bg: #4338CA;
    --bs-btn-hover-border-color: #4338CA;
    --bs-btn-active-bg: #4338CA;
    --bs-btn-active-border-color: #4338CA;
}
.btn-outline-primary {
    --bs-btn-color: #4F46E5;
    --bs-btn-border-color: #4F46E5;
    --bs-btn-hover-bg: #4F46E5;
    --bs-btn-hover-border-color: #4F46E5;
}
.text-primary { color: #4F46E5 !important; }
.bg-primary   { background-color: #4F46E5 !important; }

/* ── Navbar ─────────────────────────────────────────────────── */
.navbar-brand {
    font-weight: 800;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.brand-icon { flex-shrink: 0; }
.btn-publica-comercio { color: #FDE68A !important; font-weight: 600; }
.btn-publica-comercio:hover { color: #fff !important; }

/* ── Hero compacto (index.php) — sin bloque de color pesado ────── */
.hero-compacto {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 1.1rem 0;
}
.hero-eyebrow {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand);
}
.hero-titulo {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.01em;
}
.hero-subtitulo {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.publica-hero {
    background: linear-gradient(135deg, #4338CA 0%, #22C55E 140%);
    padding: 1.75rem 0;
}

/* ── Banner "Publica tu descuento" ──────────────────────────── */
.banner-comercios {
    background: linear-gradient(135deg, #15803d 0%, #22C55E 100%);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
}
.banner-comercios-sidebar {
    padding: 1rem 1.1rem;
}

/* ── Stats ─────────────────────────────────────────────────── */
.stat-icon { font-size: 1.4rem; margin-bottom: 0.2rem; }
.stat-num  { font-size: 1.2rem; font-weight: 700; color: var(--brand); }
.stat-lbl  { font-size: 0.7rem; color: var(--text-muted); }

/* ── Cards (global) ─────────────────────────────────────────── */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    transition: transform .18s, box-shadow .18s;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* ── Beneficio card ─────────────────────────────────────────── */
.beneficio-card { border: 1px solid var(--border); position: relative; overflow: hidden; }
.beneficio-card:hover { border-color: var(--brand); }
.beneficio-card .card-body { padding: 1.6rem 0.85rem 0.85rem; }

.comercio-nombre {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.25;
    padding-right: 1.4rem; /* deja espacio al corazón de favorito */
}

/* Ribbon de descuento — esquina superior izquierda de la card */
.descuento-ribbon {
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(135deg, var(--acento), #15803d);
    color: #fff;
    font-weight: 800;
    font-size: 0.75rem;
    padding: 0.25rem 0.6rem 0.25rem 0.5rem;
    line-height: 1.2;
    border-bottom-right-radius: 0.6rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.15);
    z-index: 2;
}

/* Badge de descuento inline (fuera de la card, ej. detalle/admin) */
.descuento-badge {
    background: linear-gradient(135deg, var(--acento), #15803d);
    color: #fff;
    font-weight: 800;
    font-size: 0.9rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    white-space: nowrap;
    min-width: 2.5rem;
    text-align: center;
    line-height: 1.2;
}

/* Botón de favorito (corazón) — esquina superior derecha */
.btn-favorito {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 2;
    background: none;
    border: none;
    font-size: 0.95rem;
    line-height: 1;
    padding: 0.2rem 0.25rem;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity .15s, transform .15s;
}
.btn-favorito:hover  { opacity: 1; transform: scale(1.15); }
.btn-favorito.activo { opacity: 1; }

/* Botón "Ver condiciones" desplegable (en vez de navegar a otra página) */
.btn-desplegar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: none;
    border: none;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.4rem 0 0;
    margin-top: 0.4rem;
    width: 100%;
}
.btn-desplegar:hover { color: var(--brand); }
.flecha-desplegar { transition: transform .15s; display: inline-block; }
.btn-desplegar[aria-expanded="true"] .flecha-desplegar { transform: rotate(180deg); }

.detalle-expandido {
    padding-top: 0.6rem;
    margin-top: 0.6rem;
    border-top: 1px dashed var(--border);
}

/* Chips de día compactas estilo "LMXJVSD" (en la card) */
.chip-dia-letra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    font-size: 0.58rem;
    font-weight: 700;
    background: #f1f5f9;
    color: #cbd5e1;
    margin-right: 0.15rem;
}
.chip-dia-letra.activo { background: #eef2ff; color: #4338CA; }
.chip-dia-letra.activo.es-hoy { background: var(--acento); color: #fff; }

/* Badge grande para detalle */
.descuento-badge-lg {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    font-weight: 800;
    font-size: 1.4rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    white-space: nowrap;
    text-align: center;
    min-width: 4rem;
}

/* ── Chips ──────────────────────────────────────────────────── */
.chip {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 1rem;
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.5;
    white-space: nowrap;
}

/* Institución — azul */
.chip-inst {
    background: #dbeafe;
    color: #1e40af;
}

/* Institución activa (sidebar filtros) */
.chip-inst-active {
    background: #2563eb;
    color: #fff;
    font-size: 0.72rem;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    display: inline-block;
    margin: 0.1rem;
}

/* Categoría — gris-azul */
.chip-cat {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

/* Distancia (cerca de mí) — celeste */
.chip-distancia {
    background: #e0f2fe;
    color: #075985;
    font-weight: 600;
}

/* Día */
.chip-dia {
    background: #f1f5f9;
    color: #475569;
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 1rem;
    margin: 0.1rem 0.1rem 0 0;
}

/* Día de hoy — verde */
.chip-dia-hoy {
    background: #dcfce7;
    color: #166534;
    font-weight: 700;
    border: 1px solid #bbf7d0;
}

.dias-chips { display: flex; flex-wrap: wrap; }

/* ── Filtro de días (pills en cabecera beneficios) ──────────── */
.dias-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.dia-pill {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 1rem;
    font-size: 0.78rem;
    font-weight: 500;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    transition: all .15s;
}
.dia-pill:hover   { background: #e2e8f0; color: #1e293b; text-decoration: none; }
.dia-pill.active  { background: var(--brand); color: #fff; border-color: var(--brand); }
.dia-pill-hoy     { border-color: #16a34a; color: #15803d; }
.dia-pill-hoy.active { background: #16a34a; border-color: #16a34a; color: #fff; }
/* Resaltar el día actual aunque no esté activo */
.dia-es-hoy:not(.active) { font-weight: 600; }

/* ── Filtros sidebar (legado, aún usado por detalle/admin) ───── */
.filtros-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    position: sticky;
    top: 1rem;
}

/* ── Tabs de vista (Lista / Mapa) ──────────────────────────────── */
.vista-tabs-wrap {
    background: #fff;
    border-bottom: 1px solid var(--border);
}
.vista-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.6rem 0;
}
.vista-tab {
    padding: 0.3rem 0.85rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-decoration: none;
    transition: all .15s;
}
.vista-tab:hover  { background: #f1f5f9; color: #1e293b; }
.vista-tab.active { background: var(--brand); color: #fff; }

/* ── Encabezado de página (beneficios.php) ──────────────────────── */
.pagina-titulo {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.15rem;
    letter-spacing: -0.01em;
}
.pagina-subtitulo {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 0;
}

/* ── Filtros tipo "pill" (fila de chips clicables) ──────────────── */
.filtro-fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}
.filtro-grupo { }
.filtro-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.pill-filtro {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #fff;
    border: 1px solid var(--border);
    color: #334155;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: 2rem;
    text-decoration: none;
    white-space: nowrap;
    transition: all .15s;
    cursor: pointer;
}
.pill-filtro:hover  { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.pill-filtro.activo {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.pill-filtro.dropdown-toggle::after { margin-left: 0.35rem; }

.pill-icono { padding: 0.4rem 0.6rem; }

.pill-input {
    flex: 1 1 auto;
    min-width: 10rem;
    border: 1px solid var(--border);
    border-radius: 2rem;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    background: #fff;
}
.pill-input:focus { outline: none; border-color: var(--brand); }

/* Días — círculos compactos, filtro clicable (distinto de los chips informativos de la card) */
.dias-circulos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.dia-circulo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    color: #334155;
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    transition: all .15s;
}
.dia-circulo:hover  { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.dia-circulo.activo { background: var(--brand); border-color: var(--brand); color: #fff; }
.dia-circulo.es-hoy:not(.activo) { border-color: var(--acento); color: #15803d; }

/* ── Barra de filtros horizontal (beneficios.php / mapa.php) ──── */
.filtros-bar {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.65rem 0.85rem;
}
.filtros-bar .form-label { font-size: 0.72rem; margin-bottom: 0.2rem !important; }
.filtros-bar .form-select,
.filtros-bar .form-check-label { font-size: 0.78rem; }
.filtros-bar-mistarjetas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}
.filtro-campo { min-width: 9rem; }
.filtro-campo-check { min-width: auto; padding-bottom: 0.4rem; }
.filtro-campo-limpiar { padding-bottom: 0.1rem; }

/* Banner de comercios en versión angosta (una línea, sobre la barra de filtros) */
.banner-comercios-slim {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem 0.9rem;
    font-size: 0.78rem;
}

/* ── Selector de tarjetas (mis_tarjetas.php) ────────────────── */
.inst-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    border-radius: 0.75rem;
    padding: 1rem 0.75rem;
    cursor: pointer;
    transition: all .18s;
    background: #fff;
    user-select: none;
    min-height: 7rem;
    text-align: center;
}
.inst-card:hover   { border-color: var(--brand); background: #eff6ff; }
.inst-card.selected {
    border-color: var(--brand);
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(37,99,235,.18);
}

.inst-icon   { font-size: 1.8rem; margin-bottom: 0.3rem; display: block; }
.inst-nombre {
    font-size: 0.8rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.25;
    margin-bottom: 0.3rem;
}

.inst-check {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: #e2e8f0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: transparent;
    transition: all .15s;
    margin-bottom: 0.35rem;
}
.inst-card.selected .inst-check {
    background: var(--brand);
    color: #fff;
}

.inst-tipo-badge {
    font-size: 0.65rem;
    color: var(--text-muted);
    background: #f1f5f9;
    padding: 0.1rem 0.45rem;
    border-radius: 1rem;
    text-transform: capitalize;
}

/* Footer barra de acción de mis_tarjetas */
.inst-footer-bar {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 0.85rem 1rem;
    margin-top: 1.5rem;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 -2px 8px rgba(0,0,0,.07);
}

/* ── Mapa interactivo ───────────────────────────────────────── */
.mapa-container {
    height: 70vh;
    min-height: 400px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.popup-beneficio {
    min-width: 200px;
}
.popup-beneficio .comercio-nombre {
    font-size: 0.95rem;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 576px) {
    .dias-filter-row { gap: 0.2rem; }
    .dia-pill        { font-size: 0.72rem; padding: 0.2rem 0.5rem; }
    .hero-personalizado,
    .hero-generico   { padding: 2rem 0; }
}