/*
Theme Name: Chacana Pro
Author: Inkas Chacana
Description: Tema propietario enfocado en ventas.
Version: 1.0
*/
/* =======================================================
   BLOQUE 2: DISEÑO DEL DASHBOARD (Colores y Tarjetas)
   ======================================================= */
:root {
    --bg-page: #EFECE0;      
    --primary-dark: #0D321F; 
    --accent-rust: #D93B18;  
    --accent-orange: #F0811B;
    --alert-red: #FF0000;    
    --white: #FFFFFF;
    --gray-light: #dadada;
}

body.page-id-2784 {
    background-color: var(--bg-page) !important;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--primary-dark);
}

/* WRAPPER PRINCIPAL */
.dashboard-wrapper {
    min-height: 100vh;
    width: 100%;
    box-sizing: border-box;
    padding: 20px 40px; /* Espacio para respirar */
}

/* PESTAÑAS (Cusco, Puno, Arequipa) */
.region-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 0;
    padding-left: 10px;
}

.tab {
    padding: 12px 30px;
    background-color: #dcd9cd;
    border-radius: 12px 12px 0 0;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    color: var(--primary-dark);
    opacity: 0.7;
    transition: 0.3s;
    border: none;
}
.tab:hover { opacity: 1; background-color: #e5e2d6; }
.tab.active {
    background-color: var(--white);
    opacity: 1;
    border-bottom: 4px solid var(--accent-orange);
}

/* PANEL DE CONTROL (Buscador y Filtros) */
.control-panel {
    background: var(--white);
    padding: 20px;
    border-radius: 0 12px 12px 12px;
    box-shadow: 0 4px 10px rgba(13, 50, 31, 0.1);
    margin-bottom: 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}
.search-box { flex: 1; min-width: 250px; }
.search-input {
    width: 95%;
    padding: 10px 15px;
    border: 2px solid var(--gray-light);
    border-radius: 8px;
    font-size: 15px;
}

/* FILTROS (Chips) */
.category-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.chip {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid var(--primary-dark);
    background: transparent;
    color: var(--primary-dark);
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
}
.chip:hover { background-color: var(--bg-page); }
.chip.active { background-color: var(--primary-dark); color: var(--white); }
.chip[data-filter="mp"].active { background-color: var(--accent-orange); border-color: var(--accent-orange); }
.chip[data-filter="aventura"].active { background-color: var(--accent-rust); border-color: var(--accent-rust); }

/* GRILLA DE TARJETAS */
.tours-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); 
    gap: 20px;
}
.tour-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.2s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.hidden { display: none !important; } /* Ocultar al filtrar */
.tour-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }

/* CONTENIDO DE TARJETA */
.card-img-wrap { height: 160px; overflow: hidden; position: relative; }
.card-img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 12px; }
.card-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--primary-dark); }
.card-type { font-size: 12px; color: var(--accent-rust); font-weight: 600; text-transform: uppercase; margin-top: 5px; }

/* SOLUCIÓN AL EFECTO ESCALERA */
/* Oculta los párrafos y saltos de línea fantasmas que WordPress inyecta en la grilla */
.tours-grid > p, 
.tours-grid > br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Asegura que las tarjetas se alineen arriba, evitando huecos si tienen distinta altura */
.tours-grid {
    align-items: start; 
}
/* CSS AISLADO PARA EVITAR CONFLICTOS CON EL TEMA */
#catalogo-view {
    --cat-verde: #1a4031;
    --cat-naranja: #dd3c27;
    --cat-crema: #EFECE0;
    --cat-blanco: #ffffff;
    --cat-texto: #333333;
    
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--cat-texto);
    background-color: var(--cat-crema);
    width: 100%;
    max-width: 100%;
    line-height: 1.5;
    margin: 0;
    padding: 0 0 60px 0;
}

#catalogo-view * { box-sizing: border-box; }


/* CONFIGURACIÓN MAESTRA AISLADA */
#catalogo-view {
    --cat-verde: #1a4031;
    --cat-naranja: #dd3c27;
    --cat-crema: #EFECE0;
    --cat-blanco: #ffffff;
    --cat-texto: #222222; /* Texto casi negro para contraste máximo */
    
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--cat-texto);
    background-color: var(--cat-crema);
    width: 100%;
    max-width: 100%;
    line-height: 1.5;
    margin: 0;
    padding: 0 0 60px 0;
    /* FUENTE BASE AUMENTADA PARA LEGIBILIDAD */
    font-size: 18px; 
}

#catalogo-view * { box-sizing: border-box; }

/* 1. HERO (Imagen Principal a Pantalla Completa) */
#catalogo-view .cat-hero {
    position: relative;
    height: 55vh; /* Un poco más alto para impacto */
    min-height: 500px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    width: 100%;
}
#catalogo-view .cat-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.7) 100%) !important;
    z-index: 1;
}
#catalogo-view .cat-hero-content {
    position: relative;
    z-index: 2;
    width: 90%; /* Ancho extendido */
    max-width: 1600px; /* Límite para pantallas ultra-anchas */
    margin: 0 auto;
    padding: 30px 0 80px 0;
}

/* TÍTULOS GIGANTES */
#catalogo-view h1.cat-title {
    color: #ffffff !important;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900 !important;
    text-transform: uppercase;
    margin: 0 0 10px 0 !important;
    line-height: 1 !important;
    text-shadow: 3px 3px 15px rgba(0,0,0,0.8);
}
#catalogo-view p.cat-subtitle {
    color: var(--cat-naranja) !important;
    font-size: 2rem;
    font-weight: 600;
    margin: 0 !important;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.9);
}

/* 2. HUD (Datos Técnicos) */
#catalogo-view .cat-hud {
    background: var(--cat-blanco);
    width: 85%; /* Ancho extendido */
    max-width: 1400px;
    margin: -60px auto 50px auto;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
    position: relative;
    z-index: 10;
}
#catalogo-view .hud-item { display: flex; align-items: center; gap: 15px; min-width: 150px; }
#catalogo-view .hud-icon { font-size: 2.8rem; }
#catalogo-view .hud-data h4 { font-size: 0.9rem; text-transform: uppercase; color: #666; margin: 0; font-weight: 700; letter-spacing: 1px; }
#catalogo-view .hud-data p { font-size: 1.4rem; font-weight: 800; color: var(--cat-verde); margin: 0; }

/* 3. LAYOUT PRINCIPAL (Ancho Completo) */
#catalogo-view .cat-grid {
    display: grid;
    grid-template-columns: 1.8fr 1fr; /* Columna izquierda más ancha para el contenido */
    gap: 50px; /* Más espacio entre columnas */
    width: 90%; /* OCUPA EL 90% DE LA PANTALLA */
    max-width: 1600px; /* Tope para pantallas gigantes */
    margin: 0 auto;
}

/* Títulos Secciones */
#catalogo-view h2.cat-h2 {
    color: var(--cat-verde) !important;
    font-size: 2.2rem;
    border-left: 8px solid var(--cat-naranja);
    padding-left: 20px;
    margin: 0 0 30px 0 !important;
    font-weight: 800;
}

/* Placeholder de Galería */
#catalogo-view .gallery-placeholder {
    background: #e0e0e0;
    border: 3px dashed #bbbbbb;
    padding: 80px 20px;
    text-align: center;
    font-weight: 600;
    color: #777;
    border-radius: 12px;
    margin-bottom: 50px;
}

/* 4. LISTAS Y RESUMEN (Alta Legibilidad) */
#catalogo-view .cat-summary {
    background: white;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.08);
    border-top: 8px solid var(--cat-naranja);
}

#catalogo-view .check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
#catalogo-view ul.check-list { list-style: none; padding: 0; margin: 0; }

/* ESTILOS DE LISTA PARA LECTURA FÁCIL */
#catalogo-view ul.check-list li { 
    font-size: 1.4rem !important; /* Letra AÚN MÁS GRANDE */
    font-weight: 700 !important;   /* Letra MUY GRUESA */
    color: #222222 !important;     /* Negro sólido */
    opacity: 1 !important;
    margin-bottom: 15px;           /* Mucho espacio entre items */
    display: flex; 
    align-items: flex-start; 
    line-height: 1.3;
}

#catalogo-view .ok::before { content: '✅'; margin-right: 15px; font-size: 1.4rem; }
#catalogo-view .no::before { content: '❌'; margin-right: 15px; font-size: 1.4rem; opacity: 1; color: var(--cat-naranja); }
#catalogo-view .no { color: #444444 !important; }

/* Precio y Botón */
#catalogo-view .cta-box {
    background: var(--cat-verde);
    padding: 30px;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
}
#catalogo-view .cta-price { 
    font-size: 4rem; /* PRECIO MASIVO */
    font-weight: 900; 
    line-height: 1; 
    color: var(--cat-naranja); 
    display: block;
}
#catalogo-view .cta-btn {
    background: var(--cat-naranja);
    color: white !important;
    padding: 18px 50px;
    border-radius: 60px;
    text-decoration: none;
    font-weight: 800;
    transition: 0.2s;
    border: none;
    cursor: pointer;
    font-size: 1.6rem; /* Botón masivo */
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
#catalogo-view .cta-btn:hover { background: #ff4d36; transform: scale(1.02); }

/* Itinerario - VERSIÓN COMPACTA */
#catalogo-view .cat-timeline { 
    border-left: 5px solid #ccc; 
    margin-left: 10px; 
    padding-left: 30px; 
    /* Opcional: padding arriba/abajo para ajustar el bloque entero */
    padding-top: 10px;
    padding-bottom: 10px;
}

#catalogo-view .time-item { 
    position: relative; 
    margin-bottom: 20px; /* ANTES ERA 40px -> Ahora más pegadito */
}

/* El punto (burbuja) */
#catalogo-view .time-item::before {
    content: ''; 
    position: absolute; 
    left: -41px; 
    top: 0px; /* Subimos un poco el punto para alinearlo con la hora */
    width: 22px; 
    height: 22px; 
    background: var(--cat-naranja); 
    border-radius: 50%; 
    border: 4px solid white; 
    box-shadow: 0 0 0 2px #ccc;
}

/* La Hora */
#catalogo-view .time-val { 
    font-weight: 800; 
    color: var(--cat-naranja); 
    font-size: 1.2rem; 
    display: block; 
    line-height: 1; /* Quitamos altura de línea extra */
    margin-bottom: 5px; /* Menos espacio entre la hora y el texto */
}

/* La Descripción */
#catalogo-view .time-desc {
    font-size: 1.2rem; 
    font-weight: 600; 
    color: #333;
    line-height: 1.2; /* Texto más compacto si ocupa dos líneas */
}
/* --- ESTILOS PARA LA CAJA "QUÉ LLEVAR" (NUEVO) --- */

/* La caja contenedora */
#catalogo-view .packing-box {
    background: white;
    padding: 30px;
    border-radius: 15px;
    border: 4px solid #ddd; /* Borde más grueso */
    margin-top: 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

/* El título de la caja */
#catalogo-view .packing-box h4 {
    color: var(--cat-verde);
    margin: 0 0 20px 0;
    font-size: 1.6rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* La lista (ul) */
#catalogo-view .packing-box ul {
    list-style: none; /* Quitamos los puntos por defecto del tema */
    padding: 0;
    margin: 0;
}

/* Los ítems de la lista (li) */
#catalogo-view .packing-box li {
    font-size: 1.4rem !important;  /* Letra GRANDE */
    color: #000000 !important;     /* Negro PURO */
    font-weight: 400 !important;   /* Negrita */
    margin-bottom: 15px;           /* Espacio entre líneas */
    display: flex;                 /* Para alinear el punto naranja */
    align-items: flex-start;
    line-height: 1.3;
}

/* El punto naranja personalizado */
#catalogo-view .packing-box li::before {
    content: '•';                  /* Un punto redondo */
    color: var(--cat-naranja);     /* Color naranja */
    font-size: 2rem;               /* Punto grande */
    line-height: 0.8;              /* Ajuste de altura */
    margin-right: 12px;            /* Espacio entre punto y texto */
}
/* Responsive */
@media (max-width: 1100px) {
    #catalogo-view .cat-grid { grid-template-columns: 1fr; gap: 40px; }
    #catalogo-view .cat-hero-content, #catalogo-view .cat-hud, #catalogo-view .cat-grid { width: 95%; }
    #catalogo-view .cta-box { flex-direction: column; text-align: center; gap: 20px; }
    #catalogo-view .check-grid { grid-template-columns: 1fr; gap: 20px; }
    #catalogo-view h1.cat-title { font-size: 2.5rem !important; }
}