:root {
    /* ── Typography — Plus Jakarta Sans (fuente corporativa pazy.es) ── */
    --font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* ── Brand primary — Verde Pazy ── */
    /* Verde 500 (#00C6CC), Verde 600 (#33B0B4), Verde 700 (#0B8698) */
    --color-primary: #00C6CC;
    --color-primary-dark: #33B0B4;
    --color-primary-a10: rgba(0, 198, 204, 0.1);
    --color-primary-a15: rgba(0, 198, 204, 0.15);
    --color-primary-a20: rgba(0, 198, 204, 0.2);
    --color-primary-a30: rgba(0, 198, 204, 0.3);

    /* ── Info / acción — reasignado del azul genérico al Verde Pazy ── */
    /* (el azul del pin "tu ubicación" del mapa es semántico y va hardcodeado aparte) */
    --color-info: #00C6CC;
    --color-info-dark: #0B8698;
    --color-info-a30: rgba(0, 198, 204, 0.3);
    --color-info-a40: rgba(0, 198, 204, 0.4);

    /* ── Success (green — semántico, se mantiene) ── */
    --color-success: #27ae60;
    --color-success-bright: #2ecc71;
    --color-success-strong: #229954;
    --color-success-a30: rgba(39, 174, 96, 0.3);
    --color-success-a40: rgba(39, 174, 96, 0.4);

    /* ── Danger (red — semántico, se mantiene) ── */
    --color-danger: #e74c3c;
    --color-danger-dark: #c0392b;
    --color-danger-a30: rgba(231, 76, 60, 0.3);

    /* ── Warning (yellow — semántico, se mantiene) ── */
    --color-warning: #ffc107;
    --color-warning-bg: #fff3cd;
    --color-warning-text: #856404;
    --color-warning-a30: rgba(255, 193, 7, 0.3);
    --color-warning-a40: rgba(255, 193, 7, 0.4);
    --color-warning-a60: rgba(255, 193, 7, 0.6);

    /* ── Naranja / Amber — Secundario Pazy ── */
    /* Naranja 500 (#F35C2B), Naranja 600 (#D14619), Naranja 400 (#FF845C) */
    --color-amber: #F35C2B;
    --color-amber-bright: #FF845C;
    --color-amber-dark: #DA400E;
    --color-amber-bg: #FFEFEA;
    --color-amber-a10: rgba(243, 92, 43, 0.1);
    --color-amber-a30: rgba(243, 92, 43, 0.3);
    --color-amber-alt-a20: rgba(243, 92, 43, 0.2);
    --color-orange: #F35C2B;
    --color-orange-light: #FF845C;
    --color-orange-dark: #DA400E;
    --color-orange-bright: #FF845C;

    /* ── Botones copiar — Verde Pazy ── */
    /* Reasignados desde purple genérico al verde de marca */
    --color-purple: #00C6CC;
    --color-purple-dark: #0B8698;
    --color-purple-a30: rgba(0, 198, 204, 0.3);
    --color-purple-a40: rgba(0, 198, 204, 0.4);

    /* ── Teal secondary ── */
    --color-teal: #0B8698;
    --color-teal-a15: rgba(11, 134, 152, 0.15);

    /* ── Violet (se mantiene para elementos puntuales) ── */
    --color-violet: #9b59b6;
    --color-violet-dark: #8e44ad;

    /* ── Text — Gris Pazy ── */
    /* Gris 800 (#1E293B), Gris 700 (#374F65), Gris 500 (#5F7283), Gris 400 (#8195AF), Gris 300 (#94A3B8) */
    --color-text-dark: #374F65;
    --color-text-base: #1E293B;
    --color-text-medium: #5F7283;
    --color-text-muted: #5F7283;
    --color-text-light: #8195AF;
    --color-text-faint: #94A3B8;
    --color-text-lighter: #94A3B8;
    --color-text-subtitle: #8195AF;

    /* ── Backgrounds & surfaces — Gris/Verde Pazy ── */
    /* Gris 50 (#F8FAFC), Gris 950 (#0F172A) */
    --color-white: #ffffff;
    --color-bg-light: #F8FAFC;
    --color-bg-dark: #0F172A;

    /* ── Borders — Gris Pazy ── */
    /* Gris 200 (#CBD5E1), Gris 100 (#F1F5F9) */
    --color-border: #CBD5E1;
    --color-border-light: #F1F5F9;
    --color-border-muted: #CBD5E1;

    /* ── Black with alpha ── */
    --color-black-a10: rgba(0, 0, 0, 0.1);
    --color-black-a15: rgba(0, 0, 0, 0.15);
    --color-black-a20: rgba(0, 0, 0, 0.2);
    --color-black-a30: rgba(0, 0, 0, 0.3);

    /* ── White with alpha ── */
    --color-white-a03: rgba(255, 255, 255, 0.03);
    --color-white-a04: rgba(255, 255, 255, 0.04);
    --color-white-a05: rgba(255, 255, 255, 0.05);
    --color-white-a06: rgba(255, 255, 255, 0.06);
    --color-white-a10: rgba(255, 255, 255, 0.1);
    --color-white-a20: rgba(255, 255, 255, 0.2);
    --color-white-a90: rgba(255, 255, 255, 0.9);
    --color-white-a95: rgba(255, 255, 255, 0.95);
}

/* Reset y configuración base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background: #000000;
    min-height: 100vh;
    color: white;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
header {
    text-align: center;
    margin-bottom: 0; /* sin hueco: el gradiente del body se colaba como una franja bajo el título */
    color: white;
    position: relative;
    z-index: 1000;
    overflow: visible !important;
}

/* Asegurar que los contenedores de filtros permitan overflow */
.filters-panel {
    overflow: visible !important;
}

/* Barra de búsqueda */
.search-container {
    margin: 20px 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.search-box {
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--color-white-a10);
    padding: 15px;
    border-radius: 25px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-white-a20);
    box-shadow: 0 8px 32px var(--color-black-a10);
}

.search-input {
    flex: 1;
    padding: 12px 20px;
    border: none;
    border-radius: 20px;
    font-size: 1rem;
    background: var(--color-white-a90);
    color: var(--color-text-base);
    outline: none;
    transition: all 0.3s ease;
}

.search-input:focus {
    background: white;
    box-shadow: 0 0 0 3px var(--color-info-a30);
    transform: scale(1.02);
}

.search-input::placeholder {
    color: var(--color-text-light);
}

.search-btn {
    background: linear-gradient(45deg, var(--color-info), var(--color-info-dark));
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-info-a30);
    white-space: nowrap;
}

.search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-info-a40);
    background: linear-gradient(45deg, var(--color-info-dark), var(--color-info));
}

.search-btn:active {
    transform: translateY(0);
}

.clear-search-btn {
    background: linear-gradient(45deg, var(--color-danger), var(--color-danger-dark));
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-danger-a30);
    white-space: nowrap;
}

.clear-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
    background: linear-gradient(45deg, var(--color-danger-dark), var(--color-danger));
}

.clear-search-btn:active {
    transform: translateY(0);
}

/* Filtros adicionales */
.filters-container {
    margin-top: 15px;
    background: var(--color-white-a10);
    padding: 15px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-white-a20);
    box-shadow: 0 4px 15px var(--color-black-a10);
    position: relative;
    z-index: 100;
}

.filter-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
    overflow: visible !important;
}

.filter-group {
    flex: 1;
    min-width: 200px;
    position: relative;
    z-index: 1;
}

.filter-label {
    display: block;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 5px;
    text-shadow: 1px 1px 2px var(--color-black-a30);
}

.filter-hint {
    display: block;
    margin-top: 4px;
    color: var(--color-border);
    opacity: 0.85;
    font-size: 0.8rem;
}

.filter-input {
    width: 100%;
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    font-size: 0.95rem;
    background: var(--color-white-a90);
    color: var(--color-text-base);
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px var(--color-black-a10);
}

.filter-input:focus {
    background: white;
    box-shadow: 0 0 0 3px var(--color-info-a30);
    transform: scale(1.02);
}

.filter-input::placeholder {
    color: var(--color-text-light);
    font-style: italic;
}

.filter-select {
    width: 100%;
    padding: 10px 15px;
    border: none;
    border-radius: 20px;
    font-size: 0.95rem;
    background: var(--color-white-a90);
    color: var(--color-text-base);
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px var(--color-black-a10);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

/* Estilos específicos para los campos de edad (input number) */
#edad1-filter {
    background-image: none !important;
    padding-right: 15px !important;
    cursor: text;
}

#edad1-filter:invalid {
    border: 2px solid var(--color-danger);
    background-color: rgba(231, 76, 60, 0.1);
}

#edad1-filter:valid {
    border: 2px solid #e1e5e9;
    background-color: var(--color-white);
}

.filter-select:focus {
    background: white;
    box-shadow: 0 0 0 3px var(--color-info-a30);
    transform: scale(1.02);
}

.filter-select:hover {
    background: white;
    box-shadow: 0 4px 12px var(--color-black-a15);
}

.filter-select option {
    padding: 8px 12px;
    background: white;
    color: var(--color-text-base);
    font-size: 0.95rem;
}

.filter-select option:first-child {
    color: var(--color-text-light);
    font-style: italic;
}

/* Estilos para el botón de reestablecer filtros */
.reset-filters-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    padding: 0 15px;
}

.inmediata-checkbox-container {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-white-a10);
    padding: 10px 16px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-white-a20);
    box-shadow: 0 4px 15px var(--color-black-a10);
}

.inmediata-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.inmediata-label {
    color: var(--color-text-base);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    user-select: none;
}

.reset-filters-btn {
    background: linear-gradient(135deg, #95a5a6, var(--color-text-subtitle));
    color: white;
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(149, 165, 166, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 180px;
    justify-content: center;
}

.reset-filters-btn:hover {
    background: linear-gradient(135deg, var(--color-text-subtitle), #6c7b7d);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(149, 165, 166, 0.4);
}

.reset-filters-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(149, 165, 166, 0.3);
}

.reset-filters-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(149, 165, 166, 0.3);
}

.filter-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}


/* Resultados de búsqueda */
.search-results {
    margin-top: 20px;
    background: var(--color-white-a95);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 8px 32px var(--color-black-a10);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-white-a20);
}

.search-results.hidden {
    display: none;
}

.search-results h3 {
    color: var(--color-text-dark);
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
}

.nearby-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto 1fr;
    gap: 10px;
    padding: 12px 15px;
    margin-bottom: 8px;
    background: white;
    border-radius: 10px;
    border-left: 4px solid var(--color-info);
    box-shadow: 0 2px 8px var(--color-black-a10);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    align-items: center;
    justify-items: center;
}

.nearby-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px var(--color-black-a15);
    border-left-color: var(--color-info-dark);
}

/* Estilos para tarjetas clickables */
.clickable-card {
    position: relative;
    overflow: hidden;
}

.clickable-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.clickable-card:hover::before {
    left: 100%;
}

.nearby-price {
    background: linear-gradient(135deg, var(--color-success), var(--color-success-bright));
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 8px 0;
    display: inline-block;
    box-shadow: 0 2px 8px var(--color-success-a30);
}

/* Estilos para la visualización de cuotas mensuales - Diseño Profesional */
.cuota-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 16px;
    margin: 12px 0;
    padding: 24px;
    background: linear-gradient(135deg, var(--color-white), var(--color-bg-light));
    border-radius: 16px;
    border: 2px solid var(--color-border);
    box-shadow: 0 4px 12px var(--color-black-a10);
    min-height: 200px;
    position: relative;
    overflow: hidden;
    min-width: 400px;
    width: 100%;
    max-width: 500px;
}

.cuota-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--color-success), var(--color-success-bright), var(--color-info));
}

/* Aviso para tanatorios Mémora que no admiten extras */
.cuota-aviso-extras {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--color-warning-bg), #ffeeba);
    color: var(--color-warning-text);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--color-warning);
    margin-bottom: 8px;
}

.precio-experto-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e3f4f6;
    color: #0f7c86;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid #a7dfe4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.precio-experto-badge.compacto {
    padding: 2px 8px;
    font-size: 0.75rem;
}
.cuota-aviso-extras-compact {
    grid-column: 1 / -1;
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    border: 1px solid var(--color-warning);
    margin-bottom: 6px;
}

.extras-aviso {
    cursor: help;
    margin-right: 4px;
}

/* Aviso en opciones de pago */
.opciones-pago-aviso-extras {
    background: linear-gradient(135deg, var(--color-warning-bg), #ffeeba);
    color: var(--color-warning-text);
    padding: 12px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    border: 1px solid var(--color-warning);
}

.opciones-pago-aviso-extras .aviso-icon {
    font-size: 1.2rem;
}

.opciones-pago-aviso-extras .aviso-texto {
    font-size: 0.9rem;
    font-weight: 500;
}

.cuota-principal {
    grid-column: 1 / -1;
    grid-row: 1;
    background: linear-gradient(135deg, var(--color-success), var(--color-success-bright));
    color: white;
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px var(--color-success-a30);
    text-align: center;
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 2px var(--color-black-a20);
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.cuota-principal:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px var(--color-success-a40);
}

.cuota-principal::before {
    content: "💰";
    margin-right: 8px;
    font-size: 1.1rem;
}

.cuota-secundaria {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    margin-top: 0;
}

.precio-final-info {
    grid-column: 1;
    grid-row: 1;
    color: var(--color-text-dark);
    font-weight: 700;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.12), rgba(41, 128, 185, 0.08));
    padding: 16px;
    border-radius: 12px;
    margin: 0;
    position: relative;
    border: 2px solid rgba(52, 152, 219, 0.2);
    box-shadow: 0 3px 8px rgba(52, 152, 219, 0.1);
    font-size: 1.1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 80px;
}

.precio-final-info::before {
    content: "🎯";
    font-size: 1.2rem;
    margin-right: 8px;
}

.presupuesto-info {
    grid-column: 2;
    grid-row: 1;
    color: var(--color-text-muted);
    font-style: italic;
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.1), rgba(73, 80, 87, 0.06));
    padding: 16px;
    border-radius: 12px;
    margin: 0;
    position: relative;
    border: 2px solid rgba(108, 117, 125, 0.15);
    box-shadow: 0 3px 8px rgba(108, 117, 125, 0.08);
    font-size: 1.1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 80px;
}

.presupuesto-info::before {
    content: "📋";
    font-size: 1.2rem;
    margin-right: 8px;
}

.ipc-info {
    grid-column: 1 / -1;
    grid-row: 2;
    color: var(--color-teal);
    font-weight: 600;
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.1), rgba(13, 110, 253, 0.06));
    padding: 12px 20px;
    border-radius: 12px;
    margin: 0;
    font-size: 1.2rem;
    position: relative;
    border: 2px solid var(--color-teal-a15);
    box-shadow: 0 3px 8px rgba(23, 162, 184, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60px;
}

.ipc-info::before {
    content: "📈";
    font-size: 1.1rem;
    margin-right: 8px;
}

/* Estilos del chip de ceremonia removidos - ya no se usan */

.cuota-error {
    color: var(--color-danger);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    padding: 8px 12px;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 10px;
    border: 1px solid var(--color-danger-a30);
    margin: 4px 0;
}

/* Estilos para las tarjetas de la sección */
.section-card .cuota-container {
    margin: 2px 0;
    padding: 16px;
    gap: 12px;
    min-height: 120px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    min-width: 350px;
    width: 100%;
    max-width: 450px;
}

.section-card .cuota-principal {
    font-size: 0.8rem;
    padding: 8px 12px;
    min-width: auto;
    white-space: nowrap;
}

.section-card .cuota-principal::before {
    font-size: 0.8rem;
    margin-right: 4px;
}

.section-card .cuota-secundaria {
    gap: 8px;
    margin-top: 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}

.section-card .precio-final-info,
.section-card .presupuesto-info {
    padding: 6px;
    font-size: 0.7rem;
    white-space: nowrap;
    min-height: 35px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.section-card .ipc-info {
    padding: 4px 8px;
    font-size: 0.8rem;
    white-space: nowrap;
    min-height: 30px;
}

/* Estilos del chip de ceremonia para section-card removidos - ya no se usan */

.section-card .cuota-error {
    font-size: 0.65rem;
    padding: 4px 8px;
}

/* 🔄 SINCRONIZACIÓN: Estilo de section-card seleccionada */
.section-card.selected {
    background: var(--color-primary-a15) !important;
    border: 2px solid var(--color-primary) !important;
    box-shadow: 0 0 15px var(--color-primary-a30);
    position: relative;
}

.section-card.selected::after {
    content: '✓';
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--color-primary);
    color: var(--color-bg-dark);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

/* Icono de warning del Recuerdo al lado del nombre */
.warning-recuerdo-icono {
    cursor: help;
    font-size: 0.85em;
    margin-left: 4px;
}

/* Estilos para la información global del IPC */
.ipc-global-info {
    margin-bottom: 8px;
    padding: 8px 12px;
    background: linear-gradient(135deg, var(--color-bg-light), var(--color-border));
    border: 2px solid var(--color-border-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ipc-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text-medium);
}

.ipc-years {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-medium);
}

.ipc-percentage {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.ipc-separator {
    font-size: 0.85rem;
    color: #adb5bd;
    margin: 0 6px;
}

.ipc-input-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-medium);
    margin-left: 6px;
}

.ipc-years-input {
    width: 60px;
    padding: 4px 8px;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-medium);
    text-align: center;
    transition: all 0.2s ease;
    background: white;
}

.ipc-years-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-a10);
}

.ipc-years-input::placeholder {
    color: #adb5bd;
    font-weight: 500;
}

.ipc-reset-btn {
    padding: 4px 8px;
    background: var(--color-text-muted);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
}

.ipc-reset-btn:hover {
    background: var(--color-text-medium);
    transform: scale(1.05);
}

.ipc-reset-btn:active {
    transform: scale(0.95);
}

/* Estilos para checkbox IPC más bajo */
.ipc-bajo-checkbox-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ipc-bajo-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-orange);
    cursor: pointer;
}

.ipc-bajo-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-orange);
    cursor: pointer;
    white-space: nowrap;
}

/* Warning de IPC bajo */
.warning-ipc-bajo {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--color-warning-bg), #ffeeba);
    border: 1px solid var(--color-warning);
    border-radius: 8px;
    font-size: 0.8rem;
    color: var(--color-warning-text);
    animation: pulseWarning 2s ease-in-out infinite;
}

.warning-ipc-bajo.hidden {
    display: none;
}

.warning-ipc-bajo .warning-icon {
    font-size: 0.9rem;
}

.warning-ipc-bajo .warning-text {
    font-weight: 500;
}

@keyframes pulseWarning {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Estilos para el aviso comercial */
.aviso-comercial {
    margin-top: 1rem;
    padding: 15px;
    background: linear-gradient(135deg, var(--color-warning-bg), var(--color-amber-bg));
    border: 1px solid var(--color-orange-light);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.2);
}

.aviso-comercial.hidden {
    display: none;
}

/* Estilos para el aviso de incongruencia */
.aviso-incongruencia {
    margin-top: 1rem;
    padding: 15px;
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    border: 1px solid #dc3545;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2);
}

.aviso-incongruencia.hidden {
    display: none;
}

.aviso-content h4 {
    color: var(--color-warning-text);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.aviso-incongruencia .aviso-content h4 {
    color: #721c24;
}

.aviso-content p {
    color: var(--color-warning-text);
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

.aviso-incongruencia .aviso-content p {
    color: #721c24;
}

/* Estilos para el aviso de Inmediata */
.aviso-inmediata {
    margin-top: 0.75rem;
    padding: 10px 14px;
    background: linear-gradient(135deg, #d1ecf1, #bee5eb);
    border: 1px solid var(--color-teal);
    border-radius: 8px;
    box-shadow: 0 2px 6px var(--color-teal-a15);
}

.aviso-inmediata.hidden {
    display: none;
}

.aviso-inmediata .aviso-content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aviso-inmediata .aviso-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.aviso-inmediata .aviso-content p {
    color: #0c5460;
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
}

/* Estilos para el aviso de cambios pendientes */
.aviso-cambios-pendientes {
    margin-top: 1rem;
    padding: 15px;
    background: linear-gradient(135deg, var(--color-warning-bg), var(--color-amber-bg));
    border: 2px solid var(--color-warning);
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--color-warning-a30);
    animation: slideInDown 0.5s ease-out;
}

.aviso-cambios-pendientes.hidden {
    display: none;
}

.aviso-cambios-pendientes .aviso-content h4 {
    color: var(--color-warning-text);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.aviso-cambios-pendientes .aviso-content p {
    color: var(--color-warning-text);
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
}

/* Estilos para el botón con cambios pendientes */
.btn-cambios-pendientes {
    background: linear-gradient(135deg, var(--color-warning), var(--color-orange-bright)) !important;
    border: 2px solid var(--color-orange-bright) !important;
    color: var(--color-white) !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px var(--color-warning-a40) !important;
    transform: translateY(-2px) !important;
}

.btn-cambios-pendientes:hover {
    background: linear-gradient(135deg, var(--color-orange-bright), #ff6b00) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px var(--color-warning-a60) !important;
}

/* Animaciones */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 15px var(--color-warning-a40);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 6px 20px var(--color-warning-a60);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 15px var(--color-warning-a40);
    }
}

@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.card-click-hint {
    font-size: 0.8rem;
    color: var(--color-text-light);
    font-style: italic;
    margin-top: 8px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    text-align: center;
}

.clickable-card:hover .card-click-hint {
    opacity: 1;
    color: var(--color-info);
}

/* Estilos para carrusel de fotos de Google My Business */
.photo-carousel-container {
    position: relative;
    margin: 15px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px var(--color-black-a15);
    background: var(--color-bg-light);
}

.photo-carousel {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-slide.active {
    opacity: 1;
}

.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    pointer-events: none;
}

.carousel-btn {
    background: var(--color-white-a90);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    color: var(--color-text-base);
    box-shadow: 0 2px 8px var(--color-black-a20);
    transition: all 0.3s ease;
    pointer-events: auto;
}

.carousel-btn:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px var(--color-black-a30);
}

.carousel-indicators {
    display: flex;
    gap: 8px;
    pointer-events: auto;
}

.carousel-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;
}

.carousel-indicator.active {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.2);
}

.carousel-indicator:hover {
    background: rgba(255, 255, 255, 0.8);
}

.carousel-counter {
    position: absolute;
    bottom: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.photo-source {
    text-align: center;
    margin-top: 10px;
    padding: 8px;
    background: rgba(52, 152, 219, 0.1);
    border-radius: 6px;
    color: var(--color-text-light);
}

.photo-source small {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.place-info {
    text-align: center;
}

.place-rating {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}

.rating-stars {
    font-size: 1rem;
}

.rating-value {
    font-weight: 600;
    color: var(--color-orange-light);
    font-size: 0.9rem;
}

.rating-count {
    font-size: 0.8rem;
    color: var(--color-text-light);
}

.placeholder-notice {
    margin-top: 8px;
    padding: 6px 12px;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid var(--color-warning-a30);
    border-radius: 6px;
    color: var(--color-warning-text);
}

.placeholder-notice small {
    font-size: 0.75rem;
    font-style: italic;
}

/* Responsive para carrusel de fotos */
@media (max-width: 768px) {
    .photo-carousel {
        height: 250px;
    }
    
    .carousel-btn {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    
    .carousel-indicator {
        width: 10px;
        height: 10px;
    }
    
    .carousel-counter {
        bottom: 10px;
        right: 10px;
        padding: 4px 8px;
        font-size: 0.8rem;
    }
    
    .carousel-controls {
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .photo-carousel {
        height: 200px;
    }
    
    .carousel-btn {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }
    
    .carousel-indicator {
        width: 8px;
        height: 8px;
    }
}

.nearby-item:last-child {
    margin-bottom: 0;
}

.nearby-info {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.nearby-name {
    font-weight: 600;
    color: var(--color-text-dark);
    font-size: 1rem;
    margin-bottom: 4px;
    text-align: center;
}

.nearby-address {
    color: var(--color-text-light);
    font-size: 0.9rem;
    margin-bottom: 2px;
    text-align: center;
}

.nearby-distance {
    color: var(--color-info);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
}

.nearby-distance-value {
    background: linear-gradient(45deg, var(--color-info), var(--color-info-dark));
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    justify-self: end;
}

.nearby-price-container {
    grid-column: 3;
    grid-row: 2;
    text-align: right;
    align-self: end;
    justify-self: end;
}

.matching-combinations {
    color: var(--color-success);
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 4px;
    background: rgba(39, 174, 96, 0.1);
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

header p {
    font-size: 1.1rem;
    opacity: 0.9;
}

.refresh-btn {
    background: linear-gradient(45deg, var(--color-info), var(--color-info-dark));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-info-a30);
}

.refresh-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-info-a40);
    background: linear-gradient(45deg, var(--color-info-dark), var(--color-info));
}

.refresh-btn:active {
    transform: translateY(0);
}

.debug-btn {
    background: linear-gradient(45deg, var(--color-danger), var(--color-danger-dark));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-danger-a30);
}

.debug-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
    background: linear-gradient(45deg, var(--color-danger-dark), var(--color-danger));
}

.debug-btn:active {
    transform: translateY(0);
}

.test-btn {
    background: linear-gradient(45deg, var(--color-orange-light), var(--color-orange));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(243, 156, 18, 0.3);
}

.test-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(243, 156, 18, 0.4);
    background: linear-gradient(45deg, var(--color-orange), var(--color-orange-light));
}

.test-btn:active {
    transform: translateY(0);
}

.extract-provinces-btn {
    background: linear-gradient(45deg, var(--color-success), var(--color-success-strong));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-success-a30);
}

.extract-provinces-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-success-a40);
    background: linear-gradient(45deg, var(--color-success-strong), var(--color-success));
}

.extract-provinces-btn:active {
    transform: translateY(0);
}

.test-province-geocoding-btn {
    background: linear-gradient(45deg, var(--color-orange), var(--color-orange-dark));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
}

.test-province-geocoding-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 126, 34, 0.4);
    background: linear-gradient(45deg, var(--color-orange-dark), var(--color-orange));
}

.test-province-geocoding-btn:active {
    transform: translateY(0);
}

.test-pantin-btn {
    background: linear-gradient(45deg, var(--color-info), var(--color-info-dark));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-info-a30);
}

.test-pantin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-info-a40);
    background: linear-gradient(45deg, var(--color-info-dark), var(--color-info));
}

.test-pantin-btn:active {
    transform: translateY(0);
}

.test-asturias-btn {
    background: linear-gradient(45deg, var(--color-violet-dark), var(--color-violet));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(142, 68, 173, 0.3);
}

.test-asturias-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(142, 68, 173, 0.4);
    background: linear-gradient(45deg, var(--color-violet), var(--color-violet-dark));
}

.test-asturias-btn:active {
    transform: translateY(0);
}

.public-btn {
    background: linear-gradient(45deg, var(--color-violet), var(--color-violet-dark));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(155, 89, 182, 0.3);
}

.public-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(155, 89, 182, 0.4);
    background: linear-gradient(45deg, var(--color-violet-dark), var(--color-violet));
}

.public-btn:active {
    transform: translateY(0);
}

.list-btn {
    background: linear-gradient(45deg, var(--color-success), var(--color-success-strong));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-success-a30);
}

.list-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-success-a40);
    background: linear-gradient(45deg, var(--color-success-strong), var(--color-success));
}

.list-btn:active {
    transform: translateY(0);
}

.markers-btn {
    background: linear-gradient(45deg, var(--color-orange), var(--color-orange-dark));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
}

.markers-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 126, 34, 0.4);
    background: linear-gradient(45deg, var(--color-orange-dark), var(--color-orange));
}

.markers-btn:active {
    transform: translateY(0);
}

.failed-btn {
    background: linear-gradient(45deg, var(--color-danger), var(--color-danger-dark));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 15px;
    margin-left: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-danger-a30);
}

.failed-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);
    background: linear-gradient(45deg, var(--color-danger-dark), var(--color-danger));
}

.failed-btn:active {
    transform: translateY(0);
}

.photos-btn {
    background: linear-gradient(45deg, var(--color-teal), #20c997);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
}

.photos-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
    background: linear-gradient(45deg, #138496, #1aa179);
}

.photos-btn:active {
    transform: translateY(0);
}

/* Carrusel de imágenes */
.image-carousel {
    margin: 15px 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.carousel-container {
    position: relative;
    background: white;
}

.carousel-images {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.carousel-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.carousel-image.active {
    opacity: 1;
}

.carousel-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.carousel-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(135deg, var(--color-bg-light), var(--color-border));
    border-top: 1px solid var(--color-border-light);
}

.carousel-btn {
    background: linear-gradient(45deg, #007bff, #0056b3);
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,123,255,0.3);
}

.carousel-btn:hover {
    background: linear-gradient(45deg, #0056b3, #004085);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,123,255,0.4);
}

.carousel-btn:active {
    transform: scale(0.95);
}

.carousel-counter {
    background: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-medium);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid var(--color-border-light);
}

.debug-photos-btn {
    background: linear-gradient(45deg, #6f42c1, #e83e8c);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
}

.debug-photos-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(111, 66, 193, 0.4);
    background: linear-gradient(45deg, #5a32a3, #d63384);
}

.debug-photos-btn:active {
    transform: translateY(0);
}

.test-single-photo-btn {
    background: linear-gradient(45deg, #fd7e14, var(--color-warning));
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(253, 126, 20, 0.3);
}

.test-single-photo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(253, 126, 20, 0.4);
    background: linear-gradient(45deg, #e8590c, #ffb300);
}

.test-single-photo-btn:active {
    transform: translateY(0);
}

.test-place-id-btn {
    background: linear-gradient(45deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.test-place-id-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    background: linear-gradient(45deg, #218838, #1aa179);
}

.test-place-id-btn:active {
    transform: translateY(0);
}

.test-name-search-btn {
    background: linear-gradient(45deg, #6f42c1, #e83e8c);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
}

.test-name-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(111, 66, 193, 0.4);
    background: linear-gradient(45deg, #5a32a3, #d63384);
}

.test-specific-btn {
    background: linear-gradient(45deg, #28a745, #20c997);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.test-specific-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    background: linear-gradient(45deg, #218838, #1aa179);
}

.test-specific-btn:active {
    transform: translateY(0);
}

.show-names-btn {
    background: linear-gradient(45deg, var(--color-teal), var(--color-text-muted));
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(23, 162, 184, 0.3);
}

.show-names-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
    background: linear-gradient(45deg, #138496, #5a6268);
}

.show-names-btn:active {
    transform: translateY(0);
}

.test-photos-simple-btn {
    background: linear-gradient(45deg, #6f42c1, #e83e8c);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(111, 66, 193, 0.3);
}

.test-photos-simple-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(111, 66, 193, 0.4);
    background: linear-gradient(45deg, #5a32a3, #d63384);
}

.test-photos-simple-btn:active {
    transform: translateY(0);
}

.check-maps-btn {
    background: linear-gradient(45deg, #dc3545, #fd7e14);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
}

.check-maps-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
    background: linear-gradient(45deg, #c82333, #e8590c);
}

.check-maps-btn:active {
    transform: translateY(0);
}

.optimization-stats-btn {
    background: linear-gradient(45deg, #4facfe, #00f2fe);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(79, 172, 254, 0.3);
}

.optimization-stats-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(79, 172, 254, 0.4);
    background: linear-gradient(45deg, #3d8bfe, #00d4fe);
}

.optimization-stats-btn:active {
    transform: translateY(0);
}

.test-photos-btn {
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.test-photos-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    background: linear-gradient(45deg, #ff5252, #d63031);
}

.test-photos-btn:active {
    transform: translateY(0);
}

.debug-photos-btn {
    background: linear-gradient(45deg, #a8edea, #fed6e3);
    color: var(--color-text-base);
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(168, 237, 234, 0.3);
}

.debug-photos-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(168, 237, 234, 0.4);
    background: linear-gradient(45deg, #96e6e1, #fdcb6e);
}

.debug-photos-btn:active {
    transform: translateY(0);
}

.api-stats-btn {
    background: linear-gradient(45deg, var(--color-purple), var(--color-purple-dark));
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-purple-a30);
}

.api-stats-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-purple-a40);
    background: linear-gradient(45deg, #5a6fd8, #6a4190);
}

.api-stats-btn:active {
    transform: translateY(0);
}

.reset-api-btn {
    background: linear-gradient(45deg, #ff9a9e, #fecfef);
    color: var(--color-text-base);
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 154, 158, 0.3);
}

.reset-api-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 154, 158, 0.4);
    background: linear-gradient(45deg, #ff8a8e, #fecfef);
}

.reset-api-btn:active {
    transform: translateY(0);
}

.analyze-vizcaya-btn {
    background: linear-gradient(45deg, #ffecd2, #fcb69f);
    color: var(--color-text-base);
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 236, 210, 0.3);
}

.analyze-vizcaya-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 236, 210, 0.4);
    background: linear-gradient(45deg, var(--color-amber-bg), #fab1a0);
}

.analyze-vizcaya-btn:active {
    transform: translateY(0);
}

.diagnose-map-btn {
    background: linear-gradient(45deg, #ff6b6b, #ee5a24);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.diagnose-map-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    background: linear-gradient(45deg, #ff5252, #d63031);
}

.diagnose-map-btn:active {
    transform: translateY(0);
}

.verify-initmap-btn {
    background: linear-gradient(45deg, var(--color-purple), var(--color-purple-dark));
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px var(--color-purple-a30);
}

.verify-initmap-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-purple-a40);
    background: linear-gradient(45deg, #5a6fd8, #6a4190);
}

.verify-initmap-btn:active {
    transform: translateY(0);
}


/* Contenedor del mapa */
.map-container {
    position: relative;
    width: 100%;
}

/* Mapa */
#map {
    height: 70vh;
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border: 3px solid white;
    position: relative;
    overflow: hidden;
}

/* 🎨 Leyenda de colores de markers */
.markers-legend {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--color-white-a95);
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 20px var(--color-black-a15);
    z-index: 100;
    font-family: var(--font-family);
    backdrop-filter: blur(10px);
    border: 1px solid var(--color-primary-a30);
    max-width: 200px;
    transition: all 0.3s ease;
}

.markers-legend:hover {
    box-shadow: 0 6px 25px var(--color-black-a20);
    transform: translateY(-2px);
}

.legend-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--color-primary-a30);
}

.legend-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.legend-item.preferido {
    padding-left: 4px;
}

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 1px 3px var(--color-black-a20);
    flex-shrink: 0;
}

.legend-item.preferido .legend-color {
    width: 16px;
    height: 16px;
}

.legend-text {
    font-size: 0.7rem;
    color: var(--color-text-medium);
    line-height: 1.2;
}

.legend-item.preferido .legend-text {
    font-weight: 500;
    color: var(--color-text-dark);
}

/* Responsive para la leyenda */
@media (max-width: 768px) {
    .markers-legend {
        bottom: 10px;
        left: 10px;
        padding: 8px 12px;
        max-width: 160px;
    }
    
    .legend-title {
        font-size: 0.65rem;
    }
    
    .legend-color {
        width: 12px;
        height: 12px;
    }
    
    .legend-text {
        font-size: 0.6rem;
    }
}

@media (max-width: 480px) {
    .markers-legend {
        bottom: 5px;
        left: 5px;
        padding: 6px 10px;
        max-width: 140px;
    }
    
    .legend-items {
        gap: 4px;
    }
}

/* Panel de información */
.info-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    z-index: 1000;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideIn 0.3s ease-out;
    border: 2px solid var(--color-border-muted);
}

.info-panel.hidden {
    display: none;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.info-content {
    position: relative;
    padding: 30px;
    background: white;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-text-light);
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 1001;
}

.close-btn:hover {
    color: var(--color-danger);
}

/* Contenido de la ubicación */
.location-header {
    margin-bottom: 20px;
    text-align: center;
}

.location-header h2 {
    font-size: 1.8rem;
    color: var(--color-text-base);
    margin-bottom: 8px;
    font-weight: 600;
}

.location-empresa {
    font-size: 1rem;
    color: var(--color-text-light);
    margin: 0 0 10px 0;
    font-weight: 500;
}

.category {
    background: linear-gradient(45deg, var(--color-info), var(--color-info-dark));
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.location-image {
    margin-bottom: 20px;
    text-align: center;
}

.location-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}

.location-image img:hover {
    transform: scale(1.02);
}

.location-description {
    margin-bottom: 15px;
    line-height: 1.6;
    color: white;
}

.location-description p {
    font-size: 1rem;
    text-align: justify;
}

.info-section {
    margin-bottom: 20px;
    padding: 15px;
    background: white;
    border-radius: 10px;
    border-left: 4px solid var(--color-info);
    border: 1px solid var(--color-border-muted);
    box-shadow: 0 2px 4px var(--color-black-a10);
}

.info-section h3 {
    color: var(--color-text-dark);
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.info-section p {
    margin: 5px 0;
    color: var(--color-text-base);
    font-size: 0.95rem;
}

.info-section strong {
    color: var(--color-info);
    font-weight: 600;
}

/* Estilos para la lista de servicios */
.servicios-lista {
    margin-top: 10px;
    background: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px var(--color-black-a10);
}

.servicio-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
    padding: 5px 0;
    border-bottom: 1px solid var(--color-border-muted);
}

.servicio-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.servicio-icon {
    color: var(--color-info);
    font-weight: bold;
    margin-right: 10px;
    margin-top: 2px;
    flex-shrink: 0;
}

.servicio-texto {
    color: var(--color-text-base);
    font-size: 0.95rem;
    line-height: 1.4;
    flex: 1;
}

/* Estilo especial para cuando no hay servicios */
.servicios-vacio {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
}

.servicios-vacio .servicio-texto {
    color: var(--color-text-muted);
    font-style: italic;
}

/* Estilos para combinaciones de destino y pack */
.combinaciones-lista {
    margin-top: 10px;
    background: white;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 2px 8px var(--color-black-a10);
}

.combinacion-item {
    background: linear-gradient(135deg, var(--color-bg-light), var(--color-border));
    border: 1px solid var(--color-border-light);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-left: 4px solid var(--color-info);
    position: relative;
}

.combinacion-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px var(--color-black-a15);
    border-left-color: var(--color-info-dark);
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
}

.combinacion-item:last-child {
    margin-bottom: 0;
}

.combinacion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.combinacion-destino {
    font-weight: 600;
    color: var(--color-text-dark);
    font-size: 1rem;
}

.combinacion-pack {
    background: linear-gradient(45deg, var(--color-info), var(--color-info-dark));
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.85rem;
    font-weight: 500;
}

.combinacion-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.combinacion-coste,
.combinacion-precio {
    background: #e8f5e8;
    color: #2e7d32;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.combinacion-servicios-btn {
    background: linear-gradient(45deg, var(--color-teal), #138496);
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.combinacion-servicios-btn:hover {
    background: linear-gradient(45deg, #138496, #0f6674);
    transform: scale(1.05);
}

/* Estilos para la cuota en combinaciones */
.combinacion-cuota {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: linear-gradient(135deg, var(--color-success), var(--color-success-bright));
    color: white;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 2px 8px var(--color-success-a30);
    z-index: 10;
    transition: all 0.3s ease;
}

.combinacion-cuota:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--color-success-a40);
}

/* Estilos para la cuota en el modal de servicios */
.combinacion-cuota-modal {
    margin-top: 15px;
    padding: 12px;
    background: linear-gradient(135deg, #e8f5e8, #f0f8f0);
    border-radius: 10px;
    border: 2px solid var(--color-success);
    text-align: center;
}

.combinacion-cuota-modal .combinacion-cuota {
    position: static;
    display: inline-block;
    margin: 0;
    font-size: 1rem;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--color-success), var(--color-success-bright));
    color: white;
    border-radius: 20px;
    font-weight: 700;
    box-shadow: 0 3px 10px var(--color-success-a30);
}

/* Estilo especial para cuando no hay combinaciones */
.combinaciones-vacio {
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
}

.combinaciones-vacio .combinacion-item {
    background: var(--color-bg-light);
    border-left-color: var(--color-text-muted);
    cursor: default;
}

.combinaciones-vacio .combinacion-item:hover {
    transform: none;
    box-shadow: none;
    background: var(--color-bg-light);
}

/* Modal para servicios de combinaciones */
.servicios-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(5px);
}

.servicios-modal-content {
    background: white;
    border-radius: 15px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px var(--color-black-a30);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-50px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.servicios-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid var(--color-border-muted);
    background: linear-gradient(135deg, var(--color-bg-light), var(--color-border));
    border-radius: 15px 15px 0 0;
}

.servicios-modal-header h2 {
    color: var(--color-text-dark);
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0;
}

.servicios-modal-close {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--color-text-light);
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.servicios-modal-close:hover {
    background: var(--color-danger);
    color: white;
    transform: scale(1.1);
}

.servicios-modal-body {
    padding: 25px;
}

.combinacion-info {
    background: var(--color-bg-light);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--color-border);
}

.combinacion-info-item {
    margin-bottom: 8px;
    color: var(--color-text-base);
    font-size: 0.95rem;
}

.combinacion-info-item:last-child {
    margin-bottom: 0;
}

.combinacion-info-item strong {
    color: var(--color-info);
    font-weight: 600;
}

.servicios-detalle h3 {
    color: var(--color-text-dark);
    font-size: 1.1rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.servicios-lista-detalle {
    background: white;
    border-radius: 8px;
    padding: 15px;
    border: 1px solid var(--color-border-muted);
}

.servicio-item-detalle {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
}

.servicio-item-detalle:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.servicio-icon-detalle {
    color: var(--color-info);
    font-weight: bold;
    margin-right: 12px;
    margin-top: 3px;
    flex-shrink: 0;
    font-size: 1.1rem;
}

.servicio-texto-detalle {
    color: var(--color-text-base);
    font-size: 0.95rem;
    line-height: 1.5;
    flex: 1;
}

.sin-servicios {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    padding: 20px;
    background: var(--color-bg-light);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.location-coords {
    text-align: center;
    padding-top: 15px;
    border-top: 1px solid #eee;
    background: white;
}

.location-coords small {
    color: var(--color-text-light);
    font-size: 0.85rem;
}

/* Overlay para el fondo */
.info-panel::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5);
    z-index: -1;
}

/* Responsive */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    header h1 {
        font-size: 2rem;
    }
    
    #map {
        height: 60vh;
    }
    
    .info-panel {
        width: 95%;
        max-height: 85vh;
    }
    
    .info-content {
        padding: 20px;
    }
    
    .location-header h2 {
        font-size: 1.5rem;
    }
    
    .location-image img {
        height: 200px;
    }
    
    /* Estilos responsivos para la búsqueda */
    .search-box {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }
    
    .search-input {
        width: 100%;
        margin-bottom: 5px;
    }
    
    .search-btn, .clear-search-btn {
        width: 100%;
        margin: 2px 0;
    }
    
    /* Estilos responsivos para filtros */
    .filters-container {
        padding: 12px;
        margin-top: 12px;
    }
    
    .filter-row {
        flex-direction: column;
        gap: 10px;
    }
    
    .filter-group {
        min-width: auto;
    }
    
    .filter-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    
    .filter-select {
        font-size: 0.9rem;
        padding: 8px 12px;
        padding-right: 35px;
    }
    
    .reset-filters-container {
        margin: 15px 0;
        padding: 0 10px;
        flex-direction: column;
        gap: 12px;
    }
    
    .inmediata-checkbox-container {
        padding: 8px 14px;
    }
    
    .inmediata-label {
        font-size: 0.9rem;
    }
    
    .reset-filters-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
        min-width: 160px;
    }
    
    .nearby-item {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 8px;
        align-items: center;
        justify-items: center;
    }
    
    .nearby-distance-value {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
    }
    
    .nearby-info {
        grid-column: 1;
        grid-row: 2;
        text-align: center;
    }
    
    .nearby-price-container {
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
    }
    
    /* Estilos responsivos para combinaciones */
    .combinacion-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .combinacion-details {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .combinacion-servicios-btn {
        align-self: flex-end;
    }
    
    /* Estilos responsivos para modal */
    .servicios-modal {
        padding: 10px;
    }
    
    .servicios-modal-content {
        max-height: 90vh;
    }
    
    .servicios-modal-header {
        padding: 15px 20px;
    }
    
    .servicios-modal-header h2 {
        font-size: 1.1rem;
    }
    
    .servicios-modal-body {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    header h1 {
        font-size: 1.8rem;
    }
    
    header p {
        font-size: 1rem;
    }
    
    #map {
        height: 50vh;
    }
    
    .info-content {
        padding: 15px;
    }
    
    .location-image img {
        height: 180px;
    }
    
    /* Estilos adicionales para pantallas muy pequeñas */
    .search-container {
        margin: 15px 0;
    }
    
    .search-box {
        padding: 12px;
    }
    
    .search-input {
        font-size: 0.9rem;
        padding: 10px 15px;
    }
    
    .search-btn, .clear-search-btn {
        font-size: 0.9rem;
        padding: 10px 15px;
    }
    
    .search-results {
        padding: 15px;
        margin-top: 15px;
    }
    
    .nearby-item {
        padding: 10px 12px;
    }
    
    .nearby-name {
        font-size: 0.9rem;
    }
    
    .nearby-address {
        font-size: 0.8rem;
    }
    
    .nearby-distance {
        font-size: 0.8rem;
    }
    
    /* Estilos adicionales para pantallas muy pequeñas - combinaciones */
    .combinacion-item {
        padding: 12px;
    }
    
    .combinacion-destino {
        font-size: 0.9rem;
    }
    
    .combinacion-pack {
        font-size: 0.8rem;
        padding: 3px 8px;
    }
    
    .combinacion-coste,
    .combinacion-precio {
        font-size: 0.75rem;
        padding: 2px 6px;
    }
    
    .combinacion-servicios-btn {
        font-size: 0.75rem;
        padding: 4px 8px;
    }
    
    /* Estilos adicionales para modal en pantallas muy pequeñas */
    .servicios-modal {
        padding: 5px;
    }
    
    .servicios-modal-content {
        max-height: 95vh;
    }
    
    .servicios-modal-header {
        padding: 12px 15px;
    }
    
    .servicios-modal-header h2 {
        font-size: 1rem;
    }
    
    .servicios-modal-body {
        padding: 15px;
    }
    
    .combinacion-info {
        padding: 15px;
    }
    
    .combinacion-info-item {
        font-size: 0.9rem;
    }
    
    .servicios-lista-detalle {
        padding: 12px;
    }
    
    .servicio-item-detalle {
        margin-bottom: 8px;
        padding: 6px 0;
    }
    
    .servicio-texto-detalle {
        font-size: 0.9rem;
    }
}

/* Animaciones adicionales */
.info-panel {
    backdrop-filter: blur(10px);
}

/* Estilos para los marcadores personalizados */
.gm-style-iw {
    border-radius: 10px !important;
}

.gm-style-iw-c {
    border-radius: 10px !important;
}

/* Mejoras de accesibilidad */
.close-btn:focus {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}

/* Scrollbar personalizado */
.info-panel::-webkit-scrollbar {
    width: 8px;
}

.info-panel::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.info-panel::-webkit-scrollbar-thumb {
    background: var(--color-info);
    border-radius: 10px;
}

.info-panel::-webkit-scrollbar-thumb:hover {
    background: var(--color-info-dark);
}

/* Estilos para el resumen del tanatorio */
.tanatorio-resumen {
    background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-border) 100%);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--color-border-light);
}

.resumen-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.stat-label {
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin-bottom: 5px;
    font-weight: 500;
}

.stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text-dark);
}

/* Responsive para el resumen */
@media (max-width: 768px) {
    .resumen-stats {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .stat-item {
        padding: 12px;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
    
    .stat-value {
        font-size: 1rem;
    }
}

/* Estilos para botones de diagnóstico */
.check-map-status-btn {
    background: #16a085;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin: 2px;
    transition: background-color 0.3s;
}

.check-map-status-btn:hover {
    background: #138d75;
}

.test-photos-carousel-btn {
    background: var(--color-orange);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin: 2px;
    transition: background-color 0.3s;
}

.test-photos-carousel-btn:hover {
    background: var(--color-orange-dark);
}

.test-text-search-btn {
    background: var(--color-violet);
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    margin: 2px;
    transition: background-color 0.3s;
}

.test-text-search-btn:hover {
    background: var(--color-violet-dark);
}

/* ===== CARRUSEL DE FOTOS MODERNO ===== */
.photos-carousel {
    position: relative;
    background: #12151a;
    border-radius: 18px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    margin: 20px 0;
    overflow: hidden;
}

.photos-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    border-radius: 18px;
    scrollbar-width: none;
}

.photos-track::-webkit-scrollbar {
    display: none;
}

.photos-slide {
    position: relative;
    scroll-snap-align: start;
    height: 60vh;
    min-height: 280px;
    max-height: 640px;
}

.photos-slide > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 18px;
}

.photos-attribution {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(0,0,0,0.55);
    color: var(--color-white);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15) inset;
}

.photos-attribution a {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.photos-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    border: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(255,255,255,0.1);
    color: var(--color-white);
    display: grid;
    place-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

.photos-nav:hover {
    background: rgba(255,255,255,0.18);
}

.photos-nav:active {
    transform: translateY(-50%) scale(0.98);
}

.photos-nav:focus-visible {
    outline: 3px solid rgba(255,255,255,0.15);
}

.photos-prev {
    left: 10px;
}

.photos-next {
    right: 10px;
}

.photos-nav.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.photos-error {
    color: #ffadb0;
    padding: 16px;
    text-align: center;
}

.photos-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: var(--color-text-lighter);
    font-size: 14px;
}

.photos-loading::before {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-text-lighter);
    border-top: 2px solid transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive para el carrusel */
@media (max-width: 768px) {
    .photos-slide {
        height: 40vh;
        min-height: 200px;
        max-height: 400px;
    }
    
    .photos-nav {
        width: 36px;
        height: 36px;
    }
    
    .photos-prev {
        left: 5px;
    }
    
    .photos-next {
        right: 5px;
    }
}

/* ========================================
   💰 OPCIONES DE PAGO - UX MEJORADA
   ======================================== */

.opciones-pago-container {
    background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-border) 100%);
    border-radius: 16px;
    padding: 24px;
    margin: 20px 0;
    border: 2px solid var(--color-border-light);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.opciones-pago-header {
    text-align: center;
    margin-bottom: 24px;
}

.opciones-pago-resumen {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 6px 0;
    align-items: flex-start;
}

.precio-base-note {
    color: #4b5563;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 4px;
}

.opciones-pago-header h3 {
    color: var(--color-text-dark);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.opciones-pago-subtitle {
    color: var(--color-text-muted);
    font-size: 1rem;
    margin: 0;
    font-weight: 500;
}

.opciones-pago-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.opcion-pago-card {
    background: white;
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    border: 2px solid #e1e5e9;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.opcion-pago-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--color-primary);
}

.opcion-pago-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.opcion-pago-card:hover::before {
    opacity: 1;
}

.opcion-destacada {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, var(--color-white) 0%, #f0f9fa 100%);
    box-shadow: 0 4px 16px var(--color-primary-a15);
}

.opcion-destacada::before {
    opacity: 1;
}

.opcion-destacada:hover {
    box-shadow: 0 8px 28px rgba(118, 197, 202, 0.25);
}

.opcion-pago-unico {
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    border-color: var(--color-warning);
}

.opcion-pago-unico::before {
    background: linear-gradient(90deg, var(--color-warning), var(--color-orange-bright));
}

.opcion-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px var(--color-primary-a30);
}

.descuento-badge {
    background: linear-gradient(135deg, var(--color-warning), var(--color-orange-bright));
    box-shadow: 0 2px 8px var(--color-warning-a30);
}

.opcion-plazo {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-medium);
    margin-bottom: 12px;
    margin-top: 8px;
}

.opcion-cuota {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: 8px;
    line-height: 1.2;
}

.opcion-destacada .opcion-cuota {
    color: var(--color-primary);
}

.opcion-pago-unico .opcion-cuota {
    color: var(--color-orange-light);
}

.opcion-total {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.opcion-ahorro {
    font-size: 0.85rem;
    color: var(--color-success);
    font-weight: 600;
    margin-top: 4px;
}

.opciones-pago-footer {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.opciones-pago-nota {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.nota-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Responsive para opciones de pago */
@media (max-width: 768px) {
    .opciones-pago-container {
        padding: 20px 16px;
    }
    
    .opciones-pago-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
    }
    
    .opcion-pago-card {
        padding: 16px 12px;
    }
    
    .opcion-cuota {
        font-size: 1.2rem;
    }
    
    .opcion-plazo {
        font-size: 0.9rem;
    }
    
    .opciones-pago-header h3 {
        font-size: 1.3rem;
    }
    
    .opciones-pago-subtitle {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .opciones-pago-grid {
        grid-template-columns: 1fr;
    }
    
    .opcion-pago-card {
        padding: 20px 16px;
    }
    
    .opcion-cuota {
        font-size: 1.3rem;
    }
}

/* Estilos para el carrusel optimizado */
.optimization-badge {
    margin-top: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.badge-text {
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px var(--color-purple-a30);
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 8px var(--color-purple-a30);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 16px var(--color-purple-a40);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px var(--color-purple-a30);
    }
}

/* Mejoras para el photo-source */
.photo-source .place-info {
    text-align: center;
    padding: 12px;
}

.photo-source .place-info strong {
    color: var(--color-text-dark);
    font-size: 1rem;
    display: block;
    margin-bottom: 4px;
}

.photo-source .place-info small {
    color: var(--color-text-subtitle);
    font-size: 0.85rem;
    display: block;
    margin-bottom: 8px;
}

/* Mejoras adicionales para el carrusel optimizado */
.photo-carousel-container {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px var(--color-black-a10);
    background: white;
    transition: all 0.3s ease;
}

.photo-carousel-container:hover {
    box-shadow: 0 12px 40px var(--color-black-a15);
    transform: translateY(-2px);
}

/* Loading spinner mejorado */
.photos-loading {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 12px;
    margin: 10px 0;
    position: relative;
    overflow: hidden;
}

.photos-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* Mensaje de no fotos mejorado */
.no-photos-message {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
    color: white;
    border-radius: 12px;
    margin: 10px 0;
    font-size: 1rem;
    line-height: 1.6;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
}

.no-photos-message::before {
    content: '📷';
    font-size: 3rem;
    display: block;
    margin-bottom: 16px;
    opacity: 0.8;
}

/* ========================================
   🚀 NUEVO CARRUSEL SIMPLE
   ======================================== */

.photos-container-simple {
    width: 100%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px var(--color-black-a10);
    overflow: hidden;
    margin: 15px 0;
}

.photos-loading-simple {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    color: var(--color-text-light);
    font-size: 1rem;
    gap: 10px;
}

.photos-loading-simple span {
    font-weight: 500;
}

.no-photos-simple {
    padding: 40px 20px;
    text-align: center;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
    color: white;
}

.no-photos-simple span {
    font-size: 1.1rem;
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.no-photos-simple small {
    opacity: 0.9;
    font-size: 0.9rem;
}

.simple-carousel-container {
    position: relative;
    width: 100%;
    background: white;
}

.simple-carousel-photos {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.simple-photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.5s ease-in-out;
}

.simple-photo.active {
    opacity: 1;
    transform: translateX(0);
}

.simple-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

/* 🚀 OPTIMIZACIONES DE CARGA DE IMÁGENES */
.photo-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: #bdc3c7;
    z-index: 1;
    animation: placeholder-pulse 1.5s ease-in-out infinite;
}

@keyframes placeholder-pulse {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

.optimized-image {
    position: relative;
    z-index: 2;
    transition: opacity 0.4s ease-in-out;
    opacity: 0;
}

.optimized-image.loaded {
    opacity: 1;
}

.optimized-image.priority-load {
    opacity: 0;
    animation: fade-in-fast 0.3s ease-out forwards;
}

.optimized-image.preloaded,
.optimized-image.nav-loaded,
.optimized-image.adjacent-loaded,
.optimized-image.lazy-loaded {
    animation: fade-in-smooth 0.4s ease-out forwards;
}

@keyframes fade-in-fast {
    from {
        opacity: 0;
        transform: scale(1.02);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fade-in-smooth {
    from {
        opacity: 0;
        transform: scale(1.05);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
}

.simple-carousel-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.05);
    border-top: 1px solid var(--color-black-a10);
}

.simple-prev, .simple-next {
    background: var(--color-info);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px var(--color-info-a30);
}

.simple-prev:hover, .simple-next:hover {
    background: var(--color-info-dark);
    transform: scale(1.1);
    box-shadow: 0 4px 12px var(--color-info-a40);
}

.simple-counter {
    font-weight: 600;
    color: var(--color-text-dark);
    font-size: 1rem;
    letter-spacing: 0.5px;
}

.simple-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 15px 20px;
    background: rgba(0, 0, 0, 0.02);
}

.simple-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: var(--color-black-a30);
    cursor: pointer;
    transition: all 0.3s ease;
}

.simple-dot.active {
    background: var(--color-info);
    transform: scale(1.2);
}

.simple-dot:hover {
    background: var(--color-info-dark);
    transform: scale(1.1);
}

.photo-info {
    padding: 20px;
    background: white;
    border-top: 1px solid var(--color-black-a10);
    text-align: center;
}

.photo-info strong {
    color: var(--color-text-dark);
    font-size: 1.1rem;
    display: block;
    margin-bottom: 5px;
}

.photo-info small {
    color: var(--color-text-subtitle);
    font-size: 0.9rem;
}

/* ========================================
   🏆 SIDEBAR DE TANATORIOS PREFERIDOS
   ======================================== */

.tanatorios-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    height: 100vh;
    background: linear-gradient(180deg, var(--color-bg-dark) 0%, #0f1320 100%);
    box-shadow: -8px 0 40px rgba(0, 0, 0, 0.4);
    z-index: 1500;
    display: flex;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-family);
}

.tanatorios-sidebar.open {
    transform: translateX(0);
}

.sidebar-toggle {
    position: absolute;
    left: -48px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--color-primary) 0%, #4A9BA0 100%);
    color: white;
    padding: 16px 12px;
    border-radius: 12px 0 0 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: -4px 4px 20px var(--color-primary-a30);
    transition: all 0.3s ease;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.sidebar-toggle:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, #3A8B90 100%);
    left: -52px;
    box-shadow: -6px 6px 25px rgba(118, 197, 202, 0.4);
}

.toggle-icon {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.tanatorios-sidebar.open .toggle-icon {
    transform: rotate(180deg);
}

.toggle-text {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.sidebar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 24px;
}

.sidebar-header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--color-primary-a20);
    margin-bottom: 20px;
}

.sidebar-header h2 {
    color: var(--color-white);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-white) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sidebar-subtitle {
    color: var(--color-text-faint);
    font-size: 0.9rem;
    margin: 0;
}

/* Formulario de búsqueda */
.sidebar-search-form {
    background: var(--color-white-a03);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid var(--color-primary-a15);
    overflow: visible;
    flex-shrink: 0;
}

.form-group {
    margin-bottom: 16px;
    overflow: visible;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
    overflow: visible;
}

.form-row .form-group {
    margin-bottom: 0;
    overflow: visible;
}

.form-group label {
    display: block;
    color: var(--color-text-lighter);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    background: var(--color-white-a06);
    border: 1px solid var(--color-primary-a20);
    border-radius: 10px;
    color: var(--color-white);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-primary-a10);
    box-shadow: 0 0 0 3px var(--color-primary-a15);
}

.form-group input::placeholder {
    color: #5a6270;
}

.form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2376C5CA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.form-group select option {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.sidebar-buscar-btn {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #4A9BA0 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(118, 197, 202, 0.25);
    margin-top: 8px;
}

.sidebar-buscar-btn:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, #3A8B90 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(118, 197, 202, 0.35);
}

/* ========================================
   🛎️ DROPDOWN DE SERVICIOS/EXTRAS DEL SIDEBAR
   ======================================== */

/* ========================================
   🛎️ EXTRAS TIPIFICADOS DEL SIDEBAR (Checkboxes visibles)
   ======================================== */

.sidebar-extras-tipificados-group {
    margin-bottom: 12px;
}

.sidebar-extras-tipificados-label {
    display: block;
    color: var(--color-text-lighter);
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-extras-tipificados-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: var(--color-white-a03);
    border: 1px solid var(--color-primary-a15);
    border-radius: 10px;
    padding: 10px;
}

.sidebar-extra-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    background: var(--color-white-a04);
    border: 1px solid var(--color-primary-a10);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
}

.sidebar-extra-item:hover {
    background: var(--color-primary-a10);
    border-color: var(--color-primary-a30);
}

.sidebar-extra-item:has(input:checked) {
    background: var(--color-primary-a15);
    border-color: var(--color-primary);
}

.sidebar-extra-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-extra-nombre {
    flex: 1;
    color: var(--color-border-muted);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-extra-item:has(input:checked) .sidebar-extra-nombre {
    color: var(--color-primary);
    font-weight: 600;
}

.sidebar-extra-precio {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.7rem;
    flex-shrink: 0;
}

/* Checkbox Inmediata del Sidebar */
.sidebar-inmediata-container {
    margin-top: 12px;
    margin-bottom: 4px;
}

.sidebar-inmediata-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(255, 191, 36, 0.08);
    border: 1px solid var(--color-amber-alt-a20);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sidebar-inmediata-item:hover {
    background: rgba(255, 191, 36, 0.15);
    border-color: rgba(255, 191, 36, 0.4);
}

.sidebar-inmediata-item:has(input:checked) {
    background: var(--color-amber-alt-a20);
    border-color: var(--color-amber-bright);
    box-shadow: 0 0 10px var(--color-amber-alt-a20);
}

.sidebar-inmediata-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-amber-bright);
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-inmediata-nombre {
    color: var(--color-amber-bright);
    font-size: 0.85rem;
    font-weight: 600;
}

.sidebar-inmediata-item:has(input:checked) .sidebar-inmediata-nombre {
    color: var(--color-amber-bright);
    text-shadow: 0 0 8px rgba(255, 191, 36, 0.3);
}

/* Estilos antiguos del dropdown (mantenidos por compatibilidad) */
.sidebar-servicios-group {
    position: relative;
    overflow: visible;
    z-index: 100;
}

.sidebar-servicios-label {
    display: block;
    color: var(--color-text-lighter);
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-servicios-dropdown-container {
    position: relative;
    width: 100%;
    min-height: 44px;
    overflow: visible;
    z-index: 100;
}

.sidebar-servicios-dropdown-btn {
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    background: var(--color-white-a06) !important;
    border: 1px solid var(--color-primary-a20) !important;
    border-radius: 10px;
    color: var(--color-white);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    box-sizing: border-box;
}

.sidebar-servicios-dropdown-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-a10);
}

.sidebar-servicios-dropdown-btn:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-a15);
}

.sidebar-servicios-dropdown-btn.active {
    border-color: var(--color-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#sidebar-servicios-dropdown-text {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-lighter);
}

.sidebar-servicios-dropdown-btn.has-selection #sidebar-servicios-dropdown-text {
    color: var(--color-primary);
    font-weight: 600;
}

.sidebar-dropdown-arrow {
    color: var(--color-primary);
    font-size: 0.7rem;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.sidebar-servicios-dropdown-btn.active .sidebar-dropdown-arrow {
    transform: rotate(180deg);
}

.sidebar-servicios-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #252b3d;
    border: 1px solid var(--color-primary-a30);
    border-top: none;
    border-radius: 0 0 10px 10px;
    z-index: 10001;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    max-height: 240px;
    overflow-y: auto;
}

.sidebar-servicios-dropdown-menu.hidden {
    display: none;
}

/* Estilo del scrollbar del dropdown del sidebar */
.sidebar-servicios-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.sidebar-servicios-dropdown-menu::-webkit-scrollbar-track {
    background: var(--color-white-a05);
    border-radius: 0 0 6px 0;
}

.sidebar-servicios-dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 3px;
}

.sidebar-servicios-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

.sidebar-servicio-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-primary-a10);
    transition: background 0.2s ease;
    font-size: 0.85rem;
    color: var(--color-border-muted);
}

.sidebar-servicio-dropdown-item:last-child {
    border-bottom: none;
}

.sidebar-servicio-dropdown-item:hover {
    background: var(--color-primary-a15);
}

.sidebar-servicio-dropdown-item:has(input:checked) {
    background: var(--color-primary-a20);
}

.sidebar-servicio-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.sidebar-servicio-nombre {
    flex: 1;
    color: var(--color-border-muted);
}

.sidebar-servicio-dropdown-item:has(input:checked) .sidebar-servicio-nombre {
    color: var(--color-primary);
    font-weight: 600;
}

.sidebar-servicio-precio {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Campos de km y extras (€) del sidebar */
.sidebar-km-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.sidebar-km-input-container input {
    width: 100%;
    padding: 12px 40px 12px 14px;
    background: var(--color-white-a06);
    border: 1px solid var(--color-primary-a20);
    border-radius: 10px;
    color: var(--color-white);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

.sidebar-km-input-container input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(118, 197, 202, 0.08);
    box-shadow: 0 0 0 3px var(--color-primary-a15);
}

.sidebar-km-suffix {
    position: absolute;
    right: 12px;
    color: var(--color-text-lighter);
    font-size: 0.85rem;
    font-weight: 500;
    pointer-events: none;
}

#sidebar-extras-euros {
    width: 100%;
    padding: 12px 14px;
    background: var(--color-white-a06);
    border: 1px solid var(--color-primary-a20);
    border-radius: 10px;
    color: var(--color-white);
    font-size: 0.95rem;
    transition: all 0.3s ease;
}

#sidebar-extras-euros:focus {
    outline: none;
    border-color: var(--color-primary);
    background: rgba(118, 197, 202, 0.08);
    box-shadow: 0 0 0 3px var(--color-primary-a15);
}

#sidebar-extras-euros::placeholder,
.sidebar-km-input-container input::placeholder {
    color: var(--color-text-muted);
}

/* Resumen de extras seleccionados en el sidebar */
.sidebar-extras-resumen {
    margin-top: 8px;
    padding: 8px 12px;
    background: var(--color-primary-a10);
    border-radius: 8px;
    border-left: 3px solid var(--color-primary);
    display: none;
}

.sidebar-extras-resumen.visible {
    display: block;
}

.sidebar-extras-resumen-texto {
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
}

.sidebar-buscar-btn:active {
    transform: translateY(0);
}

/* Resultados - sin scroll separado, forma parte del scroll global del sidebar */
.sidebar-results {
    flex-shrink: 0;
    min-height: 200px;
    padding-right: 8px;
}

.sidebar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #5a6270;
    text-align: center;
    padding: 40px 20px;
}

.sidebar-empty .empty-icon {
    font-size: 4rem;
    opacity: 0.4;
    margin-bottom: 16px;
}

.sidebar-empty p {
    font-size: 0.95rem;
    line-height: 1.5;
    max-width: 250px;
}

/* Loading */
.sidebar-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.sidebar-loading.hidden {
    display: none;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-primary-a20);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spinner 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spinner {
    to {
        transform: rotate(360deg);
    }
}

.sidebar-loading p {
    color: var(--color-text-faint);
    font-size: 0.95rem;
}

/* Tarjeta de tanatorio */
.tanatorio-card {
    background: var(--color-white-a04);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid var(--color-primary-a15);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tanatorio-card:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--color-primary-a30);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px var(--color-black-a30);
}

/* 🔄 SINCRONIZACIÓN: Estilo de tarjeta seleccionada */
.tanatorio-card.selected {
    background: var(--color-primary-a15);
    border-color: var(--color-primary);
    box-shadow: 0 0 20px var(--color-primary-a30), 0 8px 32px var(--color-black-a30);
}

.tanatorio-card.selected::after {
    content: '✓ Seleccionado';
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-primary);
    color: var(--color-bg-dark);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Indicador de cursor clickeable */
.tanatorio-card {
    cursor: pointer;
}

.tanatorio-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--color-primary) 0%, #4A9BA0 100%);
}

/* Aviso de Mémora en sidebar */
.sidebar-aviso-tanatorio {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.08));
    border: 1px solid var(--color-warning-a40);
    color: var(--color-warning);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin: 12px 0;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.4;
}

.sidebar-aviso-tanatorio .aviso-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.sidebar-aviso-tanatorio .aviso-texto {
    color: var(--color-white-a90);
    font-weight: 500;
}

/* 🚐 Aviso de traslado incluido en el precio Pazy */
.aviso-traslado-incluido {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.2), rgba(23, 162, 184, 0.1));
    border: 1px solid rgba(23, 162, 184, 0.5);
    color: var(--color-teal);
    padding: 8px 12px;
    border-radius: 8px;
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    line-height: 1.3;
}

.aviso-traslado-incluido .aviso-traslado-icono {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.aviso-traslado-incluido .aviso-traslado-texto {
    color: var(--color-teal);
    font-weight: 600;
}

/* 🚐 Badge fosforito de traslado en esquina de tarjeta */
.badge-traslado {
    position: absolute;
    top: 38px;
    right: 6px;
    font-size: 1rem;
    cursor: help;
    z-index: 5;
    background: rgba(0, 255, 128, 0.35);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(0, 255, 128, 0.8);
    transition: all 0.2s ease;
    box-shadow: 0 0 8px rgba(0, 255, 128, 0.4);
}

.badge-traslado:hover {
    background: rgba(0, 255, 128, 0.5);
    transform: scale(1.1);
    box-shadow: 0 0 12px rgba(0, 255, 128, 0.6);
}

/* ⚠️ Badge de Mémora (extras no incluidos) en esquina de tarjeta */
.badge-memora {
    position: absolute;
    top: 38px;
    right: 40px; /* Posicionado a la izquierda del badge de traslado */
    font-size: 1rem;
    cursor: help;
    z-index: 5;
    background: rgba(255, 193, 7, 0.35);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 0 8px var(--color-warning-a40);
}

.badge-memora:hover {
    background: rgba(255, 193, 7, 0.5);
    transform: scale(1.1);
    box-shadow: 0 0 12px var(--color-warning-a60);
}

/* Ajuste cuando hay ambos badges (traslado y memora) */
.badge-traslado + .badge-memora,
.badge-memora:only-child {
    right: 6px; /* Si solo hay badge de memora o está después del traslado */
}

/* Si hay badge de traslado, mover el de memora a la izquierda */
.section-card .badge-memora,
.nearby-item .badge-memora {
    right: 40px;
}

/* Si NO hay badge de traslado, posicionar memora a la derecha */
.section-card .badge-memora:first-child:last-child,
.nearby-item .badge-memora:first-child:last-child {
    right: 6px;
}

/* Ocultar número de combinaciones en tarjetas */
.section-card-combinations {
    display: none !important;
}

/* Versión para tarjetas con fondo oscuro (mantener por compatibilidad) */
.section-card .aviso-traslado-incluido {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.25), var(--color-teal-a15));
    border-color: rgba(23, 162, 184, 0.6);
}

.section-card .aviso-traslado-incluido .aviso-traslado-texto {
    color: #5dccdb;
}

/* Versión para sidebar */
.tanatorio-card .aviso-traslado-incluido {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.3), var(--color-teal-a15));
    border-color: rgba(23, 162, 184, 0.5);
}

.tanatorio-card .aviso-traslado-incluido .aviso-traslado-texto {
    color: var(--color-white-a95);
}

/* 🚐 Aviso de traslado para combinaciones específicas (más compacto) */
.aviso-traslado-combinacion {
    background: linear-gradient(135deg, var(--color-teal-a15), rgba(23, 162, 184, 0.08));
    border: 1px solid rgba(23, 162, 184, 0.4);
    color: var(--color-teal);
    padding: 4px 8px;
    border-radius: 6px;
    margin: 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    line-height: 1.2;
}

.aviso-traslado-combinacion .aviso-traslado-icono {
    font-size: 0.9rem;
    flex-shrink: 0;
}

.aviso-traslado-combinacion .aviso-traslado-texto {
    color: var(--color-teal);
    font-weight: 600;
}

/* Versión para combinaciones en fondo oscuro */
.combinacion-item .aviso-traslado-combinacion {
    background: linear-gradient(135deg, rgba(23, 162, 184, 0.2), rgba(23, 162, 184, 0.1));
    border-color: rgba(23, 162, 184, 0.5);
}

.combinacion-item .aviso-traslado-combinacion .aviso-traslado-texto {
    color: #5dccdb;
}

.tanatorio-etiqueta {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.etiqueta-barato {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-bright) 100%);
    color: white;
    box-shadow: 0 2px 12px var(--color-success-a30);
}

.etiqueta-cercano {
    background: linear-gradient(135deg, var(--color-info) 0%, #5dade2 100%);
    color: white;
    box-shadow: 0 2px 12px var(--color-info-a30);
}

.etiqueta-default {
    background: var(--color-primary-a20);
    color: var(--color-primary);
}

.tanatorio-nombre {
    color: var(--color-white);
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.tanatorio-direccion {
    color: var(--color-text-faint);
    font-size: 0.85rem;
    margin: 0 0 4px 0;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.tanatorio-direccion::before {
    content: '📍';
    font-size: 0.9rem;
}

.tanatorio-ciudad {
    color: #6a7380;
    font-size: 0.8rem;
    margin: 0 0 16px 0;
}

.tanatorio-distancia {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(52, 152, 219, 0.15);
    border-radius: 20px;
    color: #5dade2;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 16px;
}

.tanatorio-precios {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.precio-item {
    background: var(--color-white-a04);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.precio-label {
    display: block;
    color: #6a7380;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.precio-valor {
    display: block;
    color: var(--color-white);
    font-size: 1.2rem;
    font-weight: 700;
}

.precio-contado {
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.15) 0%, rgba(46, 204, 113, 0.1) 100%);
    border: 1px solid rgba(39, 174, 96, 0.2);
}

.precio-contado .precio-valor {
    color: var(--color-success-bright);
}

/* Cuotas mensuales */
.tanatorio-cuotas {
    margin-top: 16px;
}

.cuotas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 12px;
    background: var(--color-white-a04);
    border-radius: 10px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.cuotas-header:hover {
    background: rgba(255, 255, 255, 0.08);
}

.cuotas-title {
    color: var(--color-text-lighter);
    font-size: 0.85rem;
    font-weight: 600;
}

.cuotas-toggle {
    color: var(--color-primary);
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.cuotas-expanded .cuotas-toggle {
    transform: rotate(180deg);
}

.cuotas-grid {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 12px;
    background: var(--color-black-a20);
    border-radius: 10px;
    animation: fadeIn 0.3s ease;
}

.cuotas-expanded .cuotas-grid {
    display: grid;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.cuota-item {
    background: var(--color-white-a04);
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    transition: all 0.2s ease;
}

.cuota-item:hover {
    background: var(--color-primary-a10);
}

.cuota-plazo {
    display: block;
    color: #6a7380;
    font-size: 0.7rem;
    margin-bottom: 2px;
}

.cuota-valor {
    display: block;
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 700;
}

/* Servicios */
.tanatorio-servicios {
    margin-top: 16px;
}

.servicios-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 12px;
    background: var(--color-primary-a10);
    border: 1px solid var(--color-primary-a20);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.servicios-toggle:hover {
    background: var(--color-primary-a15);
}

.servicios-toggle-text {
    color: var(--color-primary);
    font-size: 0.85rem;
    font-weight: 600;
}

.servicios-toggle-icon {
    color: var(--color-primary);
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.servicios-expanded .servicios-toggle-icon {
    transform: rotate(180deg);
}

.servicios-lista-sidebar {
    display: none;
    padding: 16px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 10px;
    margin-top: 8px;
    animation: fadeIn 0.3s ease;
}

.servicios-expanded .servicios-lista-sidebar {
    display: block;
}

.servicio-item-sidebar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-white-a05);
}

.servicio-item-sidebar:last-child {
    border-bottom: none;
}

.servicio-item-sidebar::before {
    content: '✓';
    color: var(--color-primary);
    font-weight: 700;
    flex-shrink: 0;
}

.servicio-item-sidebar span {
    color: var(--color-text-lighter);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Contador de resultados */
.sidebar-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-primary-a10);
    border-radius: 12px;
    margin-bottom: 16px;
}

.results-count {
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 600;
}

.results-info {
    color: var(--color-text-faint);
    font-size: 0.8rem;
}

/* ========================================
   💡 SIDEBAR DE PRECIO EXPERTO (IZQUIERDA)
   ======================================== */

.precio-experto-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 420px;
    height: 100vh;
    background: linear-gradient(180deg, #1e3a5f 0%, #0d1b2a 100%);
    box-shadow: 8px 0 40px rgba(0, 0, 0, 0.4);
    z-index: 1500;
    display: flex;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--font-family);
}

.precio-experto-sidebar.open {
    transform: translateX(0);
}

.sidebar-toggle-left {
    position: absolute;
    right: -48px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, var(--color-amber) 0%, var(--color-amber-dark) 100%);
    color: white;
    padding: 16px 12px;
    border-radius: 0 12px 12px 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 4px 4px 20px var(--color-amber-a30);
    transition: all 0.3s ease;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.sidebar-toggle-left:hover {
    background: linear-gradient(135deg, var(--color-amber-dark) 0%, #b45309 100%);
    right: -52px;
    box-shadow: 6px 6px 25px rgba(245, 158, 11, 0.4);
}

.precio-experto-sidebar .sidebar-header h2 {
    background: linear-gradient(135deg, var(--color-amber) 0%, var(--color-amber-bright) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.precio-experto-sidebar .sidebar-search-form {
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.precio-experto-sidebar .form-group input:focus,
.precio-experto-sidebar .form-group select:focus {
    border-color: var(--color-amber);
    background: var(--color-amber-a10);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.precio-experto-sidebar .form-group select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
}

.experto-hint {
    display: block;
    color: var(--color-text-faint);
    font-size: 0.75rem;
    margin-top: 6px;
    font-style: italic;
}

/* ========================================
   📈 ESTILOS IPC EN SIDEBAR EXPERTO
   ======================================== */

.experto-ipc-group {
    margin-top: 12px;
    border-top: 1px solid var(--color-white-a10);
    padding-top: 12px;
}

.experto-ipc-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.experto-ipc-input {
    width: 70px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--color-white);
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    transition: all 0.2s ease;
}

.experto-ipc-input:focus {
    outline: none;
    border-color: var(--color-amber);
    background: var(--color-amber-a10);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15);
}

.experto-ipc-input::placeholder {
    color: #6b7280;
    font-weight: 500;
}

.experto-ipc-reset-btn {
    padding: 6px 10px;
    background: rgba(107, 114, 128, 0.4);
    color: white;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
}

.experto-ipc-reset-btn:hover {
    background: rgba(107, 114, 128, 0.6);
    transform: scale(1.05);
}

.experto-ipc-reset-btn:active {
    transform: scale(0.95);
}

.experto-ipc-bajo-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

.experto-ipc-bajo-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--color-amber);
    cursor: pointer;
}

.experto-ipc-bajo-label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-amber);
    cursor: pointer;
    white-space: nowrap;
}

.warning-experto-ipc-bajo {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.2));
    border: 1px solid var(--color-amber);
    border-radius: 8px;
    font-size: 0.8rem;
    color: #fcd34d;
    margin-top: 8px;
    animation: pulseWarning 2s ease-in-out infinite;
}

.warning-experto-ipc-bajo.hidden {
    display: none;
}

.warning-experto-ipc-bajo .warning-icon {
    font-size: 0.9rem;
}

.warning-experto-ipc-bajo .warning-text {
    font-weight: 500;
}

.experto-ipc-hint {
    display: block;
    color: var(--color-text-faint);
    font-size: 0.75rem;
    margin-top: 6px;
    font-style: italic;
}

.experto-calcular-btn {
    background: linear-gradient(135deg, var(--color-amber) 0%, var(--color-amber-dark) 100%) !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.25) !important;
}

.experto-calcular-btn:hover {
    background: linear-gradient(135deg, var(--color-amber-dark) 0%, #b45309 100%) !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35) !important;
}

/* Resultados del Precio Experto */
.experto-results {
    padding-top: 16px;
}

.experto-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-faint);
}

.experto-empty .empty-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 16px;
    opacity: 0.6;
}

.experto-empty p {
    font-size: 0.95rem;
    line-height: 1.5;
}

.experto-loading {
    text-align: center;
    padding: 40px 20px;
    color: var(--color-text-faint);
}

/* Tarjeta de resultado del Precio Experto */
.experto-resultado-card {
    background: linear-gradient(135deg, var(--color-amber-a10) 0%, rgba(217, 119, 6, 0.05) 100%);
    border: 1px solid var(--color-amber-a30);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 16px;
}

.experto-resultado-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

.experto-resultado-titulo {
    color: var(--color-amber);
    font-size: 1.1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}

.experto-resultado-badge {
    background: linear-gradient(135deg, var(--color-amber) 0%, var(--color-amber-dark) 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.experto-precio-final {
    text-align: center;
    padding: 20px;
    background: var(--color-amber-a10);
    border-radius: 12px;
    margin-bottom: 16px;
}

.experto-precio-final-label {
    color: var(--color-text-faint);
    font-size: 0.85rem;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.experto-precio-final-valor {
    color: var(--color-amber);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.experto-cuota-principal {
    text-align: center;
    padding: 16px;
    background: var(--color-white-a05);
    border-radius: 12px;
    margin-bottom: 16px;
}

.experto-cuota-label {
    color: var(--color-text-faint);
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.experto-cuota-valor {
    color: var(--color-white);
    font-size: 1.8rem;
    font-weight: 700;
}

.experto-cuota-plazo {
    color: var(--color-text-faint);
    font-size: 0.85rem;
    margin-top: 4px;
}

/* Grid de cuotas alternativas */
.experto-cuotas-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.experto-cuota-item {
    background: var(--color-white-a03);
    border: 1px solid var(--color-white-a10);
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    transition: all 0.2s ease;
}

.experto-cuota-item:hover {
    background: var(--color-amber-a10);
    border-color: var(--color-amber-a30);
}

.experto-cuota-item-plazo {
    color: var(--color-text-faint);
    font-size: 0.7rem;
    margin-bottom: 4px;
}

.experto-cuota-item-valor {
    color: var(--color-white);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Desglose del cálculo */
.experto-desglose {
    background: var(--color-white-a03);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.experto-desglose-titulo {
    color: var(--color-text-faint);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.experto-desglose-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-white-a05);
}

.experto-desglose-item:last-child {
    border-bottom: none;
}

.experto-desglose-label {
    color: var(--color-text-faint);
    font-size: 0.85rem;
}

.experto-desglose-valor {
    color: var(--color-white);
    font-size: 0.85rem;
    font-weight: 600;
}

.experto-desglose-item.destacado .experto-desglose-label,
.experto-desglose-item.destacado .experto-desglose-valor {
    color: var(--color-amber);
    font-weight: 700;
}

.experto-desglose-item.ipc-personalizado .experto-desglose-label {
    color: #fcd34d;
}

.experto-desglose-item.ipc-personalizado .experto-desglose-valor {
    color: #fcd34d;
}

/* Pago al contado */
.experto-contado {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.05) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
    text-align: center;
}

.experto-contado-badge {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 8px;
}

.experto-contado-valor {
    color: #22c55e;
    font-size: 1.5rem;
    font-weight: 700;
}

.experto-contado-ahorro {
    color: var(--color-text-faint);
    font-size: 0.8rem;
    margin-top: 4px;
}

/* Botón copiar */
.experto-copiar-btn {
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(59, 130, 246, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.experto-copiar-btn:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

/* Responsive para el sidebar izquierdo */
@media (max-width: 768px) {
    .precio-experto-sidebar {
        width: 100%;
        max-width: 100%;
    }
    
    .sidebar-toggle-left {
        right: -40px;
        padding: 12px 10px;
    }
    
    .experto-cuotas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .sidebar-toggle-left {
        right: -36px;
        padding: 10px 8px;
    }
}

/* Responsive para el sidebar */
@media (max-width: 768px) {
    .tanatorios-sidebar {
        width: 100%;
        max-width: 100%;
    }
    
    .sidebar-toggle {
        left: -40px;
        padding: 12px 10px;
    }
    
    .toggle-text {
        font-size: 0.75rem;
    }
    
    .sidebar-content {
        padding: 16px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .tanatorio-precios {
        grid-template-columns: 1fr;
    }
    
    .cuotas-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .sidebar-toggle {
        left: -36px;
        padding: 10px 8px;
    }
    
    .toggle-icon {
        font-size: 0.9rem;
    }
    
    .toggle-text {
        font-size: 0.7rem;
    }
    
    .tanatorio-card {
        padding: 16px;
    }
    
    .tanatorio-nombre {
        font-size: 1rem;
    }
}

/* ========================================
   🛎️ SERVICIOS ADICIONALES Y KILOMETRAJE
   ======================================== */

/* Grupo de servicios adicionales - ahora en la misma fila que los demás filtros */
.filter-group-servicios {
    min-width: 130px !important;
    max-width: 160px;
    flex: 0 1 auto !important;
    position: relative;
    z-index: 100;
}

/* El menú puede expandirse más allá del contenedor padre */
.filter-group-servicios .servicios-dropdown-menu {
    min-width: 180px;
    width: max-content;
    max-width: 220px;
}

/* Asegurar que el dropdown se muestre por encima de todos los elementos cuando está activo */
.filter-group-servicios:has(.servicios-dropdown-btn.active) {
    z-index: 10000;
}

/* Cuando el dropdown está abierto, asegurar que el menú esté por encima de todo */
.servicios-dropdown-menu:not(.hidden) {
    z-index: 10001;
    position: absolute;
}

/* Dar z-index bajo a elementos que podrían tapar el dropdown */
.aviso-ceremonia-recuerdo,
.extras-resumen,
.reset-filters-container,
.aviso-inmediata,
.aviso-comercial,
.aviso-incongruencia {
    position: relative;
    z-index: 1;
}

/* El IPC también debe tener z-index bajo */
.ipc-global-info {
    position: relative;
    z-index: 1;
}

/* Asegurar que la sección de tarjetas y el main-layout tengan z-index bajo */
.main-layout {
    position: relative;
    z-index: 1;
}

.cards-section {
    position: relative;
    z-index: 1;
}

.cards-section-header {
    position: relative;
    z-index: 1;
}

.cards-section-scroll {
    position: relative;
    z-index: 1;
}

/* Las tarjetas de tanatorios también deben tener z-index bajo */
.tanatorio-card {
    z-index: 1;
}

/* El mapa también debe estar por debajo del dropdown */
.map-container {
    position: relative;
    z-index: 1;
}

/* Dropdown de servicios */
.servicios-dropdown-container {
    position: relative;
    width: 100%;
}

.servicios-dropdown-btn {
    width: 100%;
    padding: 0.5rem 0.6rem;
    background: var(--color-white);
    border: 1px solid #e1e5e9;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    color: var(--color-text-base);
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    height: auto;
}

.servicios-dropdown-btn:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px var(--color-primary-a15);
}

.servicios-dropdown-btn:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-a15);
}

.servicios-dropdown-btn.active {
    border-color: var(--color-primary);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#servicios-dropdown-text {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.8rem;
    line-height: 1.2;
}

.dropdown-arrow {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
    margin-left: 4px;
    flex-shrink: 0;
}

.servicios-dropdown-btn.active .dropdown-arrow {
    transform: rotate(180deg);
}

.servicios-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-primary);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 999999 !important;
    margin-top: 0;
    max-height: 115px;
    overflow-y: auto;
}

.servicios-dropdown-menu.hidden {
    display: none;
}

/* Estilo del scrollbar del dropdown */
.servicios-dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.servicios-dropdown-menu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 0 0 6px 0;
}

.servicios-dropdown-menu::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 3px;
}

.servicios-dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

.servicio-dropdown-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.8rem;
}

.servicio-dropdown-item:last-child {
    border-bottom: none;
}

.servicio-dropdown-item:hover {
    background: var(--color-primary-a10);
}

.servicio-dropdown-item:has(input:checked) {
    background: var(--color-primary-a15);
}

.servicio-checkbox {
    width: 14px;
    height: 14px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.servicio-nombre {
    color: var(--color-text-medium);
    font-weight: 500;
    flex: 1;
    font-size: 0.75rem;
    line-height: 1.2;
}

.servicio-precio {
    color: var(--color-success);
    font-weight: 600;
    font-size: 0.7rem;
    white-space: nowrap;
}

/* Tags de servicios seleccionados */
.servicios-seleccionados {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.servicio-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.servicio-tag-precio {
    opacity: 0.9;
    font-weight: 600;
}

.servicio-tag-remove {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    color: white;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    margin-left: 2px;
    transition: background 0.2s ease;
}

.servicio-tag-remove:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Grupo de kilometraje - ahora en la misma fila que los demás filtros */
.filter-group-km {
    min-width: 120px !important;
    max-width: 150px;
    flex: 0 1 auto !important;
}

.kilometraje-input-container {
    display: flex;
    align-items: center;
    gap: 4px;
}

.filter-input-km {
    flex: 1;
    max-width: 70px;
    padding-right: 0.4rem !important;
}

.km-suffix {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Aviso de Ceremonia con El Recuerdo */
.aviso-ceremonia-recuerdo {
    margin-top: 0.75rem;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--color-warning-bg), var(--color-amber-bg));
    border: 1px solid var(--color-orange-light);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(243, 156, 18, 0.2);
}

.aviso-ceremonia-recuerdo.hidden {
    display: none;
}

.aviso-ceremonia-recuerdo .aviso-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aviso-ceremonia-recuerdo .aviso-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.aviso-ceremonia-recuerdo .aviso-content p {
    color: var(--color-warning-text);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 0;
}

.aviso-ceremonia-recuerdo .aviso-content strong {
    color: var(--color-orange-dark);
}

/* Resumen de extras tipificados */
.extras-resumen {
    margin-top: 0.75rem;
    padding: 12px 16px;
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    border: 1px solid var(--color-info);
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.15);
}

.extras-resumen-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.extras-resumen-label {
    color: var(--color-text-dark);
    font-size: 0.9rem;
    font-weight: 600;
}

.extras-resumen-valor {
    color: var(--color-success);
    font-size: 1.1rem;
    font-weight: 700;
    background: white;
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgba(39, 174, 96, 0.2);
}

.extras-resumen-numextras {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    font-style: italic;
}

/* Responsive para servicios adicionales y kilometraje */
@media (max-width: 992px) {
    .filter-group-servicios {
        min-width: 120px !important;
        max-width: 160px;
    }
    
    .filter-group-km {
        min-width: 100px !important;
        max-width: 130px;
    }
}

@media (max-width: 768px) {
    .filter-group-servicios,
    .filter-group-km {
        width: 100% !important;
        min-width: auto !important;
        max-width: none !important;
    }
    
    .extras-resumen-content {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .servicio-dropdown-item {
        padding: 8px 12px;
    }
    
    .servicio-nombre {
        font-size: 0.8rem;
    }
    
    .servicio-precio {
        font-size: 0.75rem;
    }
}

/* ========================================
   📋 BOTÓN COPIAR OPCIONES DE PAGO
   ======================================== */

/* Fila de dos botones copiar en tarjetas generales de la lista */
.btn-copiar-row {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.btn-copiar-row .btn-copiar-opciones {
    flex: 1;
    margin-top: 0;
    width: auto;
    padding: 7px 6px;
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 768px) {
    .btn-copiar-row {
        gap: 6px;
    }
    .btn-copiar-row .btn-copiar-opciones {
        font-size: 0.72rem;
        padding: 6px 4px;
    }
}

/* Botón icono pequeño para copiar descriptivo de servicios en lista de combinaciones */
.btn-copiar-servicios-small {
    background: none;
    border: 1px solid var(--color-purple-a40);
    border-radius: 6px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-purple);
    line-height: 1;
    transition: background 0.2s, transform 0.15s;
    vertical-align: middle;
    margin-left: 6px;
    flex-shrink: 0;
}
.btn-copiar-servicios-small:hover {
    background: rgba(102, 126, 234, 0.12);
    transform: scale(1.1);
}
.btn-copiar-servicios-small:active {
    transform: scale(0.95);
}
.btn-copiar-servicios-small:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-purple-a30);
}

/* Botón de copiar opciones de pago en tarjetas */
.btn-copiar-opciones {
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 2px 8px var(--color-purple-a30);
}

.btn-copiar-opciones:hover {
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4190 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--color-purple-a40);
}

.btn-copiar-opciones:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px var(--color-purple-a30);
}

.btn-copiar-opciones:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-purple-a30);
}

/* Notificación de copiado */
.copy-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 14px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px var(--color-black-a20);
}

.copy-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.copy-notification.copy-success {
    background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-bright) 100%);
    color: white;
}

.copy-notification.copy-error {
    background: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
    color: white;
}

.copy-notification-icon {
    font-size: 1.2rem;
}

.copy-notification-text {
    white-space: nowrap;
}

/* Responsive para botón copiar */
@media (max-width: 768px) {
    .btn-copiar-opciones {
        font-size: 0.8rem;
        padding: 7px 10px;
    }
    
    .copy-notification {
        font-size: 0.85rem;
        padding: 12px 20px;
        width: auto;
        max-width: calc(100% - 40px);
    }
}

@media (max-width: 480px) {
    .btn-copiar-opciones {
        font-size: 0.75rem;
        padding: 6px 8px;
    }
}

/* Botón de copiar específico para el panel popup del mapa */
.btn-copiar-popup {
    width: auto;
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 4px 15px var(--color-purple-a40);
    margin: 20px auto;
    display: inline-flex;
}

.btn-copiar-popup:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.btn-copiar-opciones-container {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    border-top: 1px solid rgba(102, 126, 234, 0.1);
    margin-top: 15px;
}


/* ============================================================
   Fixes responsive móvil (aditivos, desktop intacto)
   Sidebars usables en teléfono: con el panel abierto a 100%,
   el toggle externo (-40px) quedaba fuera de pantalla y no se
   podía cerrar. Con .open lo recolocamos DENTRO del panel.
   ============================================================ */
@media (max-width: 768px) {
    .tanatorios-sidebar,
    .precio-experto-sidebar {
        height: 100dvh;
    }

    .tanatorios-sidebar.open .sidebar-toggle,
    .precio-experto-sidebar.open .sidebar-toggle-left {
        top: 12px;
        right: 12px;
        left: auto;
        transform: none;
        writing-mode: horizontal-tb;
        flex-direction: row;
        min-height: 44px;
        min-width: 44px;
        padding: 8px 14px;
        border-radius: 12px;
    }

    /* Anular el nudge de :hover (-52px) dentro del panel abierto */
    .tanatorios-sidebar.open .sidebar-toggle:hover,
    .precio-experto-sidebar.open .sidebar-toggle-left:hover {
        left: auto;
        right: 12px;
    }

    /* Que el botón de cierre no tape el título del panel */
    .tanatorios-sidebar.open .sidebar-header,
    .precio-experto-sidebar.open .sidebar-header {
        padding-top: 44px;
    }
}

@media (max-width: 480px) {
    .sidebar-extras-tipificados-lista {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    /* Dropdown de servicios demasiado bajo (115px) para tocar en móvil */
    .servicios-dropdown-menu {
        max-height: 40vh;
    }

    /* Las cuotas no caben en columnas estrechas: la base impone
       min-width 350-400px y desborda la tarjeta sobre la vecina. */
    .cuota-container,
    .section-card .cuota-container {
        min-width: 0;
        max-width: 100%;
    }

    .section-card .cuota-principal,
    .section-card .precio-final-info,
    .section-card .presupuesto-info,
    .section-card .ipc-info {
        white-space: normal;
    }

    /* En columnas estrechas, Final/Ref uno debajo del otro */
    .section-card .cuota-secundaria {
        grid-template-columns: 1fr;
    }

    /* El grid calculaba filas de min-height (140px) y el contenido de la
       card (cuota + botones, ~220px) se derramaba sobre la card siguiente. */
    .cards-section-scroll {
        grid-auto-rows: max-content;
    }

    .section-card {
        height: auto;
    }
}