/* =======================================================
   PALETA DE COLORES OFICIAL GUÍALO & RESPONSIVE VARIABLES
   ======================================================= */
:root {
    --brand-blue-deep: #0038ff;
    --brand-blue-vibrant: #0055ff;
    --brand-yellow-gold: #ffb703;
    --brand-yellow-bright: #fdc500;
    
    --bg-gradient: linear-gradient(135deg, #f4f6fb 0%, #e5ebf8 100%);
    --glass-bg: rgba(255, 255, 255, 0.78);
    --glass-border: rgba(255, 255, 255, 0.7);
    --glass-shadow: 0 8px 32px 0 rgba(0, 56, 255, 0.06);
    --text-main: #0f172a;
    --text-muted: #64748b;
    --filter-active: var(--brand-blue-deep);
    --card-bg-subtle: rgba(255, 255, 255, 0.55);
    --status-bar-bg: rgba(255, 255, 255, 0.82);
    --badge-bg: rgba(0, 85, 255, 0.08);
}

body.dark-mode {
    --bg-gradient: linear-gradient(135deg, #060b18 0%, #02040a 100%);
    --glass-bg: rgba(15, 23, 42, 0.75);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --filter-active: #3b82f6;
    --card-bg-subtle: rgba(30, 41, 59, 0.55);
    --status-bar-bg: rgba(15, 23, 42, 0.85);
    --badge-bg: rgba(59, 130, 246, 0.12);
}

* { box-sizing: border-box; }
body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-gradient);
    color: var(--text-main);
    min-height: 100vh;
    transition: background 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
}

/* Formas Decorativas */
.bg-shapes { position: fixed; top:0; left:0; width:100vw; height:100vh; z-index:-1; pointer-events:none; }
.shape-1 { position: absolute; top:-10%; left:-10%; width:50vw; height:50vw; background: radial-gradient(circle, rgba(0, 56, 255, 0.08) 0%, rgba(255,255,255,0) 70%); border-radius: 50%; }
.shape-2 { position: absolute; bottom:-10%; right:-10%; width:60vw; height:60vw; background: radial-gradient(circle, rgba(255,183,3,0.06) 0%, rgba(255,255,255,0) 70%); border-radius: 50%; }

/* Glass Panel */
.glass-panel { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); border-radius: 16px; }
.brand-text { font-style: italic; color: var(--brand-blue-deep); font-weight: 800; }
body.dark-mode .brand-text { color: #60a5fa; }

/* Botón Publicar */
.btn-primary { background: linear-gradient(135deg, var(--brand-blue-deep) 0%, var(--brand-blue-vibrant) 100%) !important; border: none !important; box-shadow: 0 4px 12px rgba(0, 85, 255, 0.25) !important; }

/* Header & Barra de Servicios */
.top-header { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.25rem; }
.btn-theme-header { background: rgba(0, 0, 0, 0.04); border: 1px solid var(--glass-border); width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-main); cursor: pointer; transition: all 0.2s; }
.btn-theme-header:hover { background: var(--filter-active); color:#fff; }
body.dark-mode .btn-theme-header { background: rgba(255,255,255,0.06); }
.status-bar-container { background: var(--status-bar-bg); border: 1px solid var(--glass-border); border-radius: 14px; padding: 0.75rem 1rem; box-shadow: var(--glass-shadow); }
.status-chips-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.5rem; }
.status-chip { display: flex; align-items: center; gap: 0.5rem; background: var(--card-bg-subtle); padding: 0.4rem 0.6rem; border-radius: 10px; border: 1px solid var(--glass-border); }
.chip-title { font-size: 0.68rem; color: var(--text-muted); font-weight: 500; }
.chip-status { font-size: 0.75rem; font-weight: 600; }

/* Hero Section */
.hero-section { padding: 2rem 1.5rem; text-align: center; }
.hero-description { color: var(--text-muted); font-size: 0.95rem; }
.glass-input { background: var(--card-bg-subtle) !important; border: 1px solid var(--glass-border) !important; color: var(--text-main) !important; }
.open-now-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin-top: 0.75rem; }
.btn-toggle-open, .btn-toggle-cashea, .btn-toggle-emergency, .btn-toggle-favorites { border: 1px solid var(--glass-border); background: var(--card-bg-subtle); color: var(--text-main); font-size: 0.78rem; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 20px; transition: all 0.2s; display: inline-flex; align-items: center; gap: 4px; }
.btn-toggle-open.active { background: #198754; color:#fff; }
.btn-toggle-cashea.active { background: #ffc107; color:#000; }
.btn-toggle-emergency.active { background: #dc3545; color:#fff; }
.btn-toggle-favorites.active { background: #6f42c1; color:#fff; }

/* Filtros de Categorías */
.filter-container { display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.5rem 0; scrollbar-width: none; }
.filter-container::-webkit-scrollbar { display: none; }
.filter-btn { white-space: nowrap; border: 1px solid var(--glass-border); background: var(--card-bg-subtle); color: var(--text-main); font-size: 0.8rem; padding: 0.35rem 0.85rem; border-radius: 20px; transition: all 0.2s; }
.filter-btn.active { background: var(--filter-active); color: #fff; border-color: var(--filter-active); font-weight: 600; }
body.dark-mode .filter-btn.active { color: #000; }

/* =======================================================
   ESTILO DEFINITIVO: WAVE CARDS DE ALTA DENSIDAD
   ======================================================= */
.wave-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}
.wave-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(0, 56, 255, 0.08);
}
body.dark-mode .wave-card:hover {
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
}
.wave-card.featured-card {
    border: 1.5px solid rgba(0, 56, 255, 0.35) !important;
}
body.dark-mode .wave-card.featured-card {
    border-color: rgba(59, 130, 246, 0.4) !important;
}

/* Área Multimedia de la Tarjeta */
.card-media {
    position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;
}
.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.wave-card:hover .card-media img {
    transform: scale(1.05);
}

/* Onda Bézier Dinámica */
.wave-shape {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 40px;
    pointer-events: none;
    z-index: 2;
}
.wave-shape path {
    fill: var(--glass-bg);
    transition: fill 0.3s ease;
}

/* Badge Circular Flotante */
.floating-badge {
    position: absolute;
    right: 18px;
    bottom: 8px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-blue-deep), var(--brand-blue-vibrant));
    border: 3px solid var(--glass-bg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.05rem;
    z-index: 3;
    transition: transform 0.3s ease;
}
.wave-card:hover .floating-badge {
    transform: scale(1.08);
}

/* Botón Favorito Wave */
.btn-fav-wave {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    border: none;
    color: rgba(255,255,255,0.8);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    z-index: 4;
}
.btn-fav-wave.active { color: var(--brand-yellow-gold); }

/* Cuerpo Informativo Wave */
.card-info {
    padding: 0.5rem 1.1rem 1.1rem 1.1rem;
    position: relative;
    z-index: 2;
}
.card-title-text {
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: -0.3px;
}
.card-location-text {
    font-size: 0.74rem;
    color: var(--text-muted);
}
.card-divider-line {
    width: 100%;
    height: 1px;
    background: var(--glass-border);
    margin-bottom: 8px;
}
.card-desc-text {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Botón de Acción Wave */
.btn-wave-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    background: #22c55e;
    color: #ffffff;
    border: none;
    padding: 0.45rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.15);
    transition: all 0.2s;
}
.btn-wave-action:hover { background: #16a34a; color:#fff; transform: translateY(-1px); }
.btn-wave-action.btn-wave-web { background: var(--brand-blue-deep); box-shadow: 0 4px 10px rgba(0, 56, 255, 0.15); }
.btn-wave-action.btn-wave-web:hover { background: var(--brand-blue-vibrant); }

/* =======================================================
   MODO LISTA COMPACTA
   ======================================================= */
.list-card { border-radius: 12px; transition: transform 0.2s; }
.list-card:hover { transform: translateY(-2px); }
.badge-cashea { background: rgba(255, 183, 3, 0.2); color: #b45309; font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.45rem; border-radius: 6px; }
body.dark-mode .badge-cashea { color: var(--brand-yellow-bright); }
.verified-badge { color: var(--brand-blue-vibrant); }

/* Footer & Modals */
.footer-custom { border-radius: 18px; }
.hover-link:hover { color: var(--filter-active) !important; text-decoration: underline !important; }
.modal-content.glass-panel { border-radius: 18px; }

@media (max-width: 576px) {
    .status-chips-grid { grid-template-columns: repeat(2, 1fr); }
}

/* =======================================================
   HERO SPLIT (DOS COLUMNAS: GUÍA + BUSCADOR)
   ======================================================= */
.hero-split-title {
    font-size: 1.45rem;
    letter-spacing: -0.5px;
    line-height: 1.25;
    color: var(--text-main);
}

.hero-steps-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem 0.9rem;
}

.step-item {
    background: var(--card-bg-subtle);
    padding: 0.45rem 0.65rem;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
}

.step-number {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--brand-blue-deep), var(--brand-blue-vibrant));
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.step-desc {
    font-size: 0.70rem;
    line-height: 1.2;
    display: block;
}

.search-panel-box {
    background: var(--card-bg-subtle);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@media (max-width: 576px) {
    .hero-split-title {
        font-size: 1.25rem;
    }
    .hero-steps-grid {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }
}