/* =================================================================== */
/* === CORE.CSS - VERSIÓN FINAL: MODERN TECH & SUNSET VIBE         === */
/* =================================================================== */

/* Forzar que los iconos no bloqueen la carga visual del texto */
@font-face {
    font-family: 'Font Awesome 6 Free';
    font-display: swap; 
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2) format('woff2');
}

@font-face {
    font-family: 'Font Awesome 6 Brands';
    font-display: swap;
    src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2) format('woff2');
}

/* --- 2. SISTEMA DE THEMING (VARIABLES) --- */
:root {
  /* --- COLORES DE MARCA (NUEVOS) --- */
  --color-primary: #FF5E14;       /* Naranja Amanecer */
  --color-primary-hover: #E04F0F; /* Naranja Profundo */
  --color-secondary-magenta: #FF2E63; /* Magenta para degradados */
  
  /* --- PALETA OSCURA (Charcoal Premium) --- */
  --color-background: #1E2328;    /* Gris Carbón Mate (Base) */
  --color-surface: #262C33;       /* Superficie Tarjetas */
  --color-border: #343B42;        /* Bordes sutiles */
  
  /* --- TEXTOS --- */
  --color-text-primary: #F0F2F5;   /* Blanco Roto */
  --color-text-secondary: #9DA7B0; /* Gris Técnico */
  --color-text-inverted: #FFFFFF;  

  /* --- FUENTES (Híbridas) --- */
  --font-heading: 'Luckiest Guy', cursive;    /* H1: Personalidad */
  --font-subheading: 'Montserrat', sans-serif;/* H2-H6: Moderno/Tech */
  --font-body: 'Inter', sans-serif;           /* Párrafos: Lectura */
  --font-tactical: 'Orbitron', sans-serif;    /* HUDs */
  
  /* --- SOMBRAS & RADIOS --- */
  --shadow-md: 0 8px 16px rgba(0,0,0,0.3);
  --shadow-lg: 0 15px 35px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 15px rgba(255, 94, 20, 0.3);
  
  --radius-sm: 6px;
  --radius-md: 12px; /* Redondeado suave (coincide con tu logo) */
  
  --header-height: 60px;
  /* --- FORMAS TÁCTICAS (CLIPPED SHAPES) --- */
  
  /* Corte agresivo (para tarjetas grandes y contenedores) */
  /* Recorta la esquina superior izq. y la inferior derecha */
  --clip-tactical-lg: polygon(
        20px 0, 100% 0, 
        100% calc(100% - 20px), calc(100% - 20px) 100%, 
        0 100%, 0 20px
  );

  /* Corte medio (para botones grandes o tarjetas pequeñas) */
  --clip-tactical-md: polygon(
        10px 0, 100% 0, 
        100% calc(100% - 10px), calc(100% - 10px) 100%, 
        0 100%, 0 10px
  );

  /* Corte sutil (solo una esquina, estilo etiqueta) */
  --clip-tag-right: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

/* --- 2.1 MODO CLARO (Ghost White) --- */
body.light-theme {
  --color-background: #F4F6F8;     /* Blanco Fantasma */
  --color-surface: #FFFFFF;        /* Blanco Puro */
  --color-border: #E1E4E8;         
  
  --color-text-primary: #2D3436;   /* Gris Pizarra */
  --color-text-secondary: #636E72; 
  
  /* Ajustes Guía */
  --color-fondo-guia: #F4F6F8;       
  --color-superficie-guia: #FFFFFF;  
  --color-texto-guia: #2D3436;       
  --color-texto-secundario-guia: #636E72; 
  --color-acento-sombra-guia: rgba(255, 94, 20, 0.15);
  
  --borde-guia: #E1E4E8;
}

/* --- 3. RESET GLOBAL Y TIPOGRAFÍA --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body { 
    font-family: var(--font-body); 
    font-size: 16px; 
    line-height: 1.6; 
    background-color: var(--color-background); 
    color: var(--color-text-primary); 
    -webkit-font-smoothing: antialiased; 
    padding-top: var(--header-height); 
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Jerarquía Tipográfica Actualizada */
h1 { 
    font-family: var(--font-heading); 
    font-weight: 400; 
    text-transform: uppercase; 
    line-height: 1.1; 
    letter-spacing: 1px;
}

h2, h3, h4, h5, h6 { 
    font-family: var(--font-subheading); 
    font-weight: 800; /* Extra Bold para look moderno */
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 0.5em;
    color: var(--color-text-primary);
}

a { color: var(--color-primary); text-decoration: none; font-weight: 600; transition: all 0.2s ease; }
a:hover { color: var(--color-primary-hover); }
img { max-width: 100%; height: auto; display: block; }

.lazy-load-section {
    content-visibility: auto;
    contain-intrinsic-size: 1000px; /* Mantiene un tamaño en memoria para que la barra de scroll no enloquezca */
}

/* ... AQUÍ DEBAJO SIGUE TODO TU CSS ORIGINAL ... */

/* --- 3. CLASES DE UTILIDAD --- */
.container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; }
.hidden { display: none !important; }

/* --- 4. COMPONENTES: Tarjeta de Guía (Original) --- */
.guide-card { display: flex; flex-direction: column; background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; text-decoration: none; height: 100%; box-shadow: var(--shadow-md); transition: all 0.3s ease; }
.guide-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--color-primary); }
.guide-card__image-wrapper { position: relative; aspect-ratio: 16 / 10; background-color: var(--color-border); }
.guide-card__image { width: 100%; height: 100%; object-fit: cover; }
.guide-card__duration-badge { position: absolute; top: 0.75rem; right: 0.75rem; background-color: rgba(17, 24, 39, 0.7); color: #fff; padding: 0.25rem 0.6rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 600; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.1); }
.light-theme .guide-card__duration-badge { background-color: rgba(255, 255, 255, 0.7); color: var(--color-text-primary); border: 1px solid rgba(0, 0, 0, 0.05); }
.guide-card__content { padding: 1.25rem; display: flex; flex-direction: column; flex-grow: 1; }
.guide-card__country { color: var(--color-primary); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.25rem; }
.guide-card__title { font-size: 1.25rem; color: var(--color-text-primary); line-height: 1.3; margin-bottom: 0.5rem; }
.guide-card__intro { color: var(--color-text-secondary); font-size: 0.95rem; line-height: 1.6; flex-grow: 1; margin-bottom: 1rem; }
.guide-card__footer { border-top: 1px solid var(--color-border); padding-top: 0.75rem; margin-top: auto; }
.guide-card__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.guide-card__tag { background-color: var(--color-background); color: var(--color-text-secondary); padding: 3px 9px; border-radius: 4px; font-size: 0.75rem; }

/* --- 5. PÁGINA: Buscador (Layout y Componentes Final) (Original) --- */
.page-buscador { padding-top: 4rem; padding-bottom: 3rem; }
.page-buscador__header { text-align: center; margin-bottom: 3rem; }
.page-buscador__title { font-family: var(--font-heading); font-weight: 400; line-height: 1.1; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-buscador__subtitle { color: var(--color-text-secondary); margin-top: 0.5rem; }
.page-buscador__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 1024px) { .page-buscador__grid { grid-template-columns: 300px 1fr; } }
.page-buscador__sidebar { display: none; }
@media (min-width: 1024px) { .page-buscador__sidebar { display: block; position: sticky; top: 6rem; } }
.sidebar__inner { background-color: var(--color-surface); padding: 1.5rem; border-radius: 8px; border: 1px solid var(--color-border); max-height: calc(100vh - 7rem); overflow-y: auto; }
.sidebar__inner::-webkit-scrollbar { width: 8px; }
.sidebar__inner::-webkit-scrollbar-track { background: var(--color-surface); }
.sidebar__inner::-webkit-scrollbar-thumb { background-color: var(--color-primary); border-radius: 10px; border: 2px solid var(--color-surface); }
.search-input { width: 100%; background-color: var(--color-background); border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem 1rem; color: var(--color-text-primary); transition: border-color 0.2s, box-shadow 0.2s; }
.search-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.4); }
.page-buscador__search-mobile { margin-bottom: 1.5rem; }
@media (min-width: 1024px) { .page-buscador__search-mobile { display: none; } }
.sidebar__search-desktop { margin-bottom: 1.5rem; }
.filter-group { border-top: 1px solid var(--color-border); padding-top: 1.5rem; margin-top: 1.5rem; }
.filter-group:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.filter-option { margin: 0.25rem 0; }
.filter-option__label { display: flex; align-items: center; cursor: pointer; padding: 0.25rem 0; }
.option-name { margin-left: 0.75rem; color: var(--color-text-secondary); transition: color 0.2s; }
.filter-option__label:hover .option-name { color: var(--color-text-primary); }
.show-more-btn { background: none; border: none; color: var(--color-primary); font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; cursor: pointer; margin-top: 0.5rem; }
.sticky-controls-wrapper { position: sticky; top: 4.5rem; z-index: 20; margin-bottom: 1.5rem; }
.sort-bar { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; background-color: var(--color-surface); padding: 0.75rem 1rem; border-radius: 8px 8px 0 0; border: 1px solid var(--color-border); }
.active-filters:not(:empty) { min-height: 38px; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; background-color: var(--color-surface); padding: 0.75rem; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); border-radius: 0 0 8px 8px; margin-top: -1px; }
.sort-bar__count { color: var(--color-text-secondary); font-weight: 500; font-size: 0.9rem; }
.sort-bar__controls { display: flex; align-items: center; gap: 1rem; }
.sort-select { background-color: var(--color-background); border: 1px solid var(--color-border); color: var(--color-text-primary); padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.9rem; }
.view-switcher { display: flex; align-items: center; background-color: var(--color-background); border-radius: 6px; padding: 2px; }
.view-btn { background: transparent; border: none; color: var(--color-text-secondary); padding: 0.5rem; cursor: pointer; border-radius: 4px; transition: all 0.2s; }
.view-btn:hover { color: var(--color-text-primary); }
.view-btn.active { background-color: var(--color-primary); color: var(--color-text-inverted); }
.filter-pill { display: inline-flex; align-items: center; gap: 0.5rem; background-color: transparent; color: var(--color-text-secondary); border: 1px dashed var(--color-primary); padding: 0.25rem 0.75rem; border-radius: 9999px; font-size: 0.875rem; font-weight: 500; transition: all 0.3s ease; }
.filter-pill:hover { background-color: var(--color-primary); color: var(--color-text-inverted); border-style: solid; }
.filter-pill.is-removing { opacity: 0; transform: scale(0.5); }
.remove-filter-btn { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0; margin-left: 0.25rem; transition: color 0.2s, transform 0.2s; }
.filter-pill:hover .remove-filter-btn { color: var(--color-text-inverted); }
.remove-filter-btn:hover { transform: scale(1.3); }
.clear-all-btn { background: none; border: none; color: var(--color-primary); cursor: pointer; font-weight: bold; margin-left: auto; transition: color 0.2s; }
.clear-all-btn:hover { color: var(--color-primary-hover); }
.view-list { display: flex; flex-direction: column; gap: 1.5rem; position: relative; z-index: 1; }
.view-list .guide-card { flex-direction: row; align-items: stretch; }
.view-list .guide-card__image-wrapper { width: 250px; flex-shrink: 0; aspect-ratio: 4 / 5; }
.view-list .guide-card__content { justify-content: center; }
.view-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; position: relative; z-index: 1; }
@media (min-width: 768px) { .view-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .view-grid { grid-template-columns: repeat(3, 1fr); } }
.open-filters-btn { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 99; background-color: var(--color-primary); color: var(--color-text-inverted); border: none; border-radius: 9999px; padding: 12px 24px; font-size: 1rem; font-weight: 600; box-shadow: var(--shadow-lg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s, transform 0.2s; }
@media (min-width: 1024px) { .open-filters-btn { display: none; } }
.mobile-panel { position: fixed; bottom: 0; left: 0; right: 0; top: 0; z-index: 100; background-color: rgba(0, 0, 0, 0.5); display: flex; flex-direction: column; justify-content: flex-end; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; }
.mobile-panel.is-open { opacity: 1; pointer-events: auto; }
.mobile-panel__content { background-color: var(--color-surface); width: 100%; max-height: 85vh; display: flex; flex-direction: column; transform: translateY(100%); transition: transform 0.3s ease-in-out; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--color-border); border-radius: 16px 16px 0 0; }
.mobile-panel.is-open .mobile-panel__content { transform: translateY(0); }
.mobile-panel__header { position: relative; padding: 0.5rem 1rem; display: flex; justify-content: space-between; align-items: center; }
.mobile-panel__button--clear { background: none; border: none; cursor: pointer; color: var(--color-text-secondary); display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.mobile-panel__button--close { background: none; border: none; cursor: pointer; color: var(--color-text-secondary); font-size: 1.5rem; }
.mobile-panel__handle-container { position: absolute; left: 0; right: 0; top: 8px; display: flex; justify-content: center; }
.mobile-panel__handle { width: 40px; height: 4px; background-color: var(--color-border); border-radius: 2px; }
.mobile-panel__scroll-area { overflow-y: auto; padding: 1rem; }
.mobile-panel__apply-btn { display: block; width: calc(100% - 2rem); margin: 1rem; background-color: var(--color-primary); color: var(--color-text-inverted); font-family: var(--font-subheading); font-weight: 700; border: none; padding: 0.85rem 1rem; border-radius: 8px; cursor: pointer; }
.info-message { text-align: center; padding: 2rem; grid-column: 1 / -1; }
.info-message__icon { font-size: 3rem; margin-bottom: 1rem; }
.info-message__text { color: var(--color-text-secondary); }

/* ==========================================================================
   6 - HEADER Y MENÚ MÓVIL (BLOQUE UNIFICADO Y CORREGIDO)
   ========================================================================== */

/* -- 1. Estilos para la barra superior visible y ANCLADA -- */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Coincide con el top: 60px de la barra Repsol */
    
    /* LA CLAVE: Mayor que el 800 de la barra Repsol */
    z-index: 1000 !important; 
    
    background-color: var(--color-surface);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.header-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 15px; height: 60px; width: 100%; position: relative;
}

/* -- 2. Centrado y Efecto Amanecer ANIMADO del Logo -- */
.logo-container {
    position: absolute; left: 50%; transform: translateX(-50%);
}
.site-logo {
    font-family: 'Momo Type Display', sans-serif; font-weight: bold;
    font-size: 2.5rem; text-decoration: none;
    background: linear-gradient(90deg, #FFC300, var(--color-primary), #E11D48, var(--color-primary-hover), #FFC300);
    background-size: 300% auto;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: amanecer-animado 8s ease-in-out infinite;
    color: var(--color-primary); 
}
@keyframes amanecer-animado {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* -- 3. Estilos para el botón de Hamburguesa -- */
.menu-toggle-button {
    background: transparent; border: none; cursor: pointer; padding: 10px; z-index: 1001; margin-left: auto;
}
.hamburger-icon {
    display: block; width: 24px; height: 2px; background-color: var(--color-text-primary);
    position: relative; transition: all 0.3s ease;
}
.hamburger-icon::before, .hamburger-icon::after {
    content: ''; position: absolute; width: 100%; height: 2px;
    background-color: var(--color-text-primary); left: 0; transition: transform 0.3s ease;
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { bottom: -8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* -- ANIMACIÓN HAMBURGUESA -> ASPA -- */
.menu-toggle-button.is-active .hamburger-icon { background-color: transparent; }
.menu-toggle-button.is-active .hamburger-icon::before { transform: translateY(8px) rotate(45deg); }
.menu-toggle-button.is-active .hamburger-icon::after { transform: translateY(-8px) rotate(-45deg); }

/* -- 4. Estilos para el panel del menú lateral deslizable -- */
.mobile-navigation {
    display: block; position: fixed; top: 60px; right: 0; bottom: 0;
    width: 90%; max-width: 400px; background-color: var(--color-background);
    box-shadow: -5px 0 15px rgba(0,0,0,0.2); z-index: 1000;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.mobile-navigation.open { transform: translateX(0); }

/* -- LISTA DEL MENÚ -- */
.mobile-navigation ul { list-style: none; padding: 0; margin: 0; overflow-y: auto; max-height: 100%; }
.mobile-navigation ul::-webkit-scrollbar { width: 8px; }
.mobile-navigation ul::-webkit-scrollbar-thumb { background-color: var(--color-primary); border-radius: 4px; }

/* ----------------------------------------------------------------------- */
/* -- CORRECCIONES CRÍTICAS DE FLEXBOX (Alineación Icono, Texto, Flecha) -- */
/* ----------------------------------------------------------------------- */

/* 1. Contenedor principal del enlace (A) */
.mobile-navigation li a {
    display: flex; 
    align-items: center; /* Alinea verticalmente los 3 ítems principales (Icono, Wrapper, Flecha) */
    justify-content: space-between; 
    flex-wrap: nowrap; /* CRÍTICO: Evita que el enlace principal se rompa en varias líneas */
    
    padding: 15px 20px;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
}
.mobile-navigation li a:hover { 
    background-color: var(--color-surface); 
}

.menu-text-content {
    display: flex;
    flex-direction: column; /* CRÍTICO: Apila Texto Principal y Subtítulo */
    flex-grow: 1; /* Ocupa todo el espacio central */
    margin-right: 15px; /* Espacio antes de la flecha */
    line-height: 1.2;
}

/* CRÍTICO: Aseguramos que el texto principal y el subtítulo se alineen verticalmente */
/* Esto le da al texto principal la estructura de columna */
.mobile-navigation li a > *:nth-child(2) {
    flex-grow: 1; /* Permite que ocupe el espacio */
    line-height: 1.3;
    display: flex; /* CRÍTICO: Hace del contenedor de texto un flex-container */
    flex-direction: column; /* CRÍTICO: Apila el texto principal y el subtítulo */
    flex-basis: auto; /* Permite que el texto principal se ajuste automáticamente */
}


/* SUBTÍTULO (menu-subtitle) - Alineación corregida */
.menu-subtitle {
    display: block; /* Mantiene la propiedad de bloque para estilos */
    font-size: 0.75em; 
    font-weight: normal; 
    color: var(--color-text-secondary); 
    text-transform: none; 
    line-height: 1.2; 
    /* Todos los márgenes ya son 0 gracias al Flexbox apilado */
    margin: 0; 
}

/* 2. El envoltorio del texto (menu-text-wrapper) */
.menu-text-wrapper {
    display: flex;
    flex-direction: column; /* Apila el texto principal y el subtítulo */
    flex-grow: 1; /* Permite que ocupe el espacio principal */
    line-height: 1.3;
    margin-right: 12px; /* Pequeño margen para separar de la flecha */
}

/* 3. Icono (icon-container) */
.icon-container {
    margin-right: 12px;
    font-size: 1.1em;
    flex-shrink: 0; /* Asegura que el ícono no se encoja */
    /* Mantenemos align-self: center para que el icono se centre con el texto, 
       no con el inicio, que suele ser mejor visualmente */
}

/* 4. Subtítulo (menu-subtitle) */
.menu-text-wrapper .menu-subtitle {
    /* El subtítulo se comporta como un bloque apilado dentro de su contenedor Flex (menu-text-wrapper) */
    font-size: 0.75em; 
    font-weight: normal; 
    color: var(--color-text-secondary); 
    text-transform: none; 
    line-height: 1.2; 
    margin-top: 3px;
    margin-left: 0; /* Aseguramos que no tenga márgenes no deseados */
    width: auto;
}

/* 5. Indicador de Submenú (Flecha) */
.submenu-indicator {
    display: inline-block; /* Ya no usamos float, ahora es un Flex item */
    transition: transform 0.3s ease;
    flex-shrink: 0; /* Asegura que no se encoja */
}

/* 6. Rotación de la flecha cuando el submenú está abierto */
.has-submenu.submenu-open > a > .submenu-indicator { 
    transform: rotate(90deg); /* 90 grados es mejor para una flecha lateral */
}

/* -- ESTILOS PARA ICONOS Y SCROLL DEL MENÚ -- */

/* 1. Bloqueo de Scroll en el Body (Clase añadida por JS) */
body.no-scroll {
    overflow: hidden; /* Esto bloquea el scroll de la página detrás del menú */
    position: fixed;
    width: 100%;
}

/* 2. Scroll en el Panel del Menú */
.mobile-navigation ul {
    overflow-y: auto; /* Permite el scroll dentro del menú si es muy largo */
    max-height: 100%; /* Asegura que la lista ocupe toda la altura disponible */
}
.mobile-navigation ul::-webkit-scrollbar {
    width: 8px; /* Ancho de la barra de scroll */
}
.mobile-navigation ul::-webkit-scrollbar-thumb {
    background-color: var(--color-primary); /* Color de la barra de scroll (tu naranja) */
    border-radius: 4px;
}

/* 3. Estilo de los Íconos Temáticos */
/* -- ICONO PRINCIPAL Y TEXTO -- */
.icon-container {
    margin-right: 12px;
    font-size: 1.1em;
    display: inline-block;
    flex-shrink: 0; /* Asegura que el icono no se encoja */
    margin-top: 3px; /* Pequeño ajuste para que el icono quede alineado con el texto */
}

.icon-container i {
    /* El truco para el contorno naranja transparente */
    color: var(--color-primary); /* Color de relleno (queda transparente) */
    -webkit-text-stroke: 1.5px var(--color-primary); /* Dibuja el contorno, ligeramente más grueso */
    text-shadow: none;
    /* CRÍTICO: Relleno transparente */
    -webkit-text-fill-color: transparent; 
    text-fill-color: transparent; /* Versión estándar (para compatibilidad) */
}

/* 4. Estilo para los elementos Próximamente */
li.coming-soon a {
    color: var(--color-text-secondary) !important;
    cursor: default;
    opacity: 0.6;
}
li.coming-soon a .icon-container i {
    -webkit-text-stroke: 1px var(--color-text-secondary); /* Contorno gris para los no disponibles */
    color: var(--color-text-secondary); 
}
li.coming-soon a:hover {
    background-color: transparent !important;
}

/* -- SUBMENÚS (REGLAS DE ACORDEÓN ESTRICTO Y NUEVOS ICONOS) -- */

/* 1. Ocultar TODOS los submenús por defecto (Nivel 2, 3, etc.) */
/* Esta regla unificada oculta CUALQUIER ul.submenu o ul.submenu-level-2 */
.mobile-navigation .submenu,
.mobile-navigation .submenu-level-2 {
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: var(--color-surface); 
    padding-left: 0; /* Aseguramos que la indentación viene después */
}

/* 2. Mostrar el submenú (Nivel 2) cuando su LI padre está abierto */
.mobile-navigation .has-submenu.submenu-open > .submenu {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
    background-color: var(--color-background); 
    padding-left: 20px; /* CRÍTICO: Añade la indentación al Nivel 2 */
}

/* 3. Mostrar el sub-submenú (Nivel 3) cuando su LI padre está abierto */
.mobile-navigation .has-submenu.submenu-open > .submenu-level-2 {
    max-height: 1000px;
    transition: max-height 0.5s ease-in;
    padding-left: 40px; /* CRÍTICO: Aumenta la indentación del Nivel 3 */
    background-color: var(--color-surface);
}

/* -- ESTILOS DE INDICADORES -- */
.submenu-indicator {
    float: right; 
    display: inline-block; 
    transition: transform 0.3s ease;
    /* Mantenemos el tamaño del icono de Font Awesome */
    font-size: 0.8em; 
}

/* Rotación del indicador al desplegar (de flecha derecha a flecha abajo) */
.has-submenu.submenu-open > a > .submenu-indicator { 
    /* Cambia la flecha ">" por una flecha hacia abajo */
    transform: rotate(90deg);
}


/* -- ESTILO PARA LOS ENLACES DE NIVEL 3 -- */
.mobile-navigation .submenu-level-2 li a {
    /* Quitamos el borde superior/inferior del padre para que solo divida los hijos */
    border-bottom: 1px solid var(--color-border);
    padding: 10px 20px; /* Restauramos el padding */
    background-color: transparent; /* Aseguramos que no tenga fondo de superficie */
}

/* Quitamos el borde del LI principal del submenú para que no haya línea doble */
.mobile-navigation .submenu > li:first-child a {
    border-top: none; 
}

/* -- ESTILOS DE ÍCONOS Y SUBTÍTULOS (ALINEACIÓN CORREGIDA) -- */

/* El contenedor del ícono debe ser estático para la alineación */
.icon-container {
    margin-right: 12px;
    font-size: 1.1em;
    flex-shrink: 0; /* Asegura que el ícono no se encoja */
}

/* CRÍTICO: Ocultar el panel de control de escritorio en la vista móvil */
#desktop-control-panel {
    display: none;
}

/* Y aseguramos que el menú móvil SÍ aparezca */
.mobile-navigation {
    top: 60px; /* Sigue anclado debajo de la barra superior móvil */
}

/* Ocultar elementos específicos de escritorio en móvil */
.mobile-navigation .desktop-only-item {
    display: none !important;
}

/* ==========================================================================
   7 - HEADER Y MENÚ PC (Modo Móvil Replicado + Footer Fijo)
   ========================================================================== */
@media (min-width: 1024px) {

    /* --- 1. SETUP DE LAYOUT --- */
    
    /* El header móvil (.site-header) sigue visible por defecto */
    /* El body (.body) sigue con padding-top: 60px por defecto */
    
    /* CRÍTICO: Hacemos que el sidebar sea un contenedor Flex vertical */
    .mobile-navigation {
        display: flex;
        flex-direction: column;
    }

    /* --- 2. ÁREA DE MENÚ SCROLLABLE (UL) --- */
    
    .mobile-navigation ul {
        flex-grow: 1; /* Ocupa todo el espacio vertical disponible */
        overflow-y: auto; /* Permite el scroll INTERNO */
        
        /* Ajustamos el padding para el scroll 
        padding-top: 10px;
        padding-bottom: 10px;*/
    }

    /* --- 3. FOOTER FIJO (SELECTOR DE TEMA Y BUSCADOR) --- */

    /* Mostramos el footer solo en PC */
    .desktop-only-footer {
        display: block !important; 
        flex-shrink: 0; /* No se encoge */
        
        z-index: 960; 
        background-color: var(--color-background); 
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1); /* Sombra superior */
        padding: 10px 20px; 
    }
    #sidebar-footer li {
        list-style: none; /* Quitamos viñetas */
    }

    /* --- 4. ESTILOS DE LOS ELEMENTOS DEL FOOTER --- */
    
    .mobile-navigation .desktop-only-item {
        display: block !important; 
        border-bottom: 1px solid var(--color-border) !important;
        /*padding: 10px 0;*/ /* Padding vertical, el horizontal lo da el footer */
    }
    
    /* Estilos del Selector de Tema */
    .mobile-navigation .theme-switcher-item a {
        justify-content: space-between; 
        padding: 0;
    }
    .mobile-navigation .theme-switcher-item .theme-toggle-switch {
        font-size: 1.5rem; 
        color: var(--color-text-secondary);
    }
    .mobile-navigation .theme-switcher-item .icon-container {
        font-size: 1.2rem; 
        margin-right: 10px;
        color: var(--color-text-secondary);
    }

    /* Estilos de la Caja de Búsqueda */
    .mobile-navigation .search-box-item {
        background-color: var(--color-background); 
        padding: 15px 0 10px 0; 
        border-top: 1px solid var(--color-border);
        border-bottom: none !important; 
    }
    
    /* Estilos del formulario de búsqueda */
    .mobile-navigation .search-form-desktop {
        display: flex;
        width: 100%;
        background-color: var(--color-surface);
        border-radius: 25px;
        overflow: hidden; 
        border: 1px solid var(--color-border);
    }
    .mobile-navigation .search-form-desktop input[type="text"] {
        flex-grow: 1; border: none; padding: 10px 15px;
        background-color: transparent; color: var(--color-text-primary);
        font-size: 1rem; outline: none; 
    }
    .mobile-navigation .search-form-desktop input[type="text"]::placeholder {
        color: var(--color-text-secondary);
    }
    .mobile-navigation .search-form-desktop button[type="submit"] {
        background-color: var(--color-primary); border: none;
        padding: 10px 15px; cursor: pointer; color: var(--color-text-inverted);
        font-size: 1rem; border-radius: 0 25px 25px 0; 
    }
    .mobile-navigation .search-form-desktop button[type="submit"]:hover {
        background-color: var(--color-primary-hover);
    }
}

/* ==========================================================================
   8 - ESTILOS DE FOOTER, NEWSLETTER Y COOKIES (Refactorizados)
   ========================================================================== */

/* --- 8.1 Botones (Reutilizables) --- */
.button {
    font-family: var(--font-subheading);
    text-transform: uppercase;
    font-weight: bold;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}
.button--primary {
    background-color: var(--color-primary);
    color: var(--color-text-inverted);
    border: 2px solid var(--color-primary);
}
.button--primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}
.button--secondary {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    border: 2px solid var(--color-border);
}
.button--secondary:hover {
    background-color: var(--color-border);
}


/* --- 8.2 Newsletter (Efecto Atardecer - ANIMADO Y CANALLA) --- */
.newsletter-section {
    padding: 4rem 1.5rem;
    text-align: center;
    color: #ffffff;
    overflow: hidden; 
    
    /* FONDO ATARDECER ANIMADO */
    background: linear-gradient(135deg, #4c1d95, #f66b4e, #f97316, #4c1d95);
    background-size: 400% 400%;
    animation: atardecer-fluido 15s ease infinite;
}

/* Definimos la animación del fondo */
@keyframes atardecer-fluido {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.newsletter-section__title {
    font-family: var(--font-heading);
    font-size: 3rem; 
    margin-bottom: 1.5rem;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}
.newsletter-section__subtitle {
    font-size: 1.1rem;
    margin-bottom: 2.5rem; 
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}
.newsletter-section__form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; 
    max-width: 500px;
    margin: 0 auto;
}

/* Estilo "crudo" para el input (se mantiene) */
.newsletter-section__input {
    padding: 0.75rem 0.25rem; 
    border: none;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5); 
    border-radius: 0; 
    background-color: transparent; 
    color: #ffffff; 
    font-size: 1rem;
    text-align: center;
    transition: border-color 0.3s ease;
}
.newsletter-section__input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}
.newsletter-section__input:focus {
    outline: none;
    border-bottom: 2px solid var(--color-primary); 
}

/* Efecto en el botón (se mantiene) */
.newsletter-section .button--primary {
    transition: all 0.3s ease;
}
.newsletter-section .button--primary:hover {
    transform: scale(1.05); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Media query para alinear formulario en escritorio (se mantiene) */
@media (min-width: 768px) {
    .newsletter-section__form {
        flex-direction: row;
        align-items: flex-end; 
    }
    .newsletter-section__input {
        flex-grow: 1;
        padding: 0.75rem 1rem;
        text-align: left;
    }
}


/* --- 8.3 Footer Principal --- */
.site-footer {
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    padding: 4rem 1.5rem 2rem 1.5rem; /* Menos padding inferior */
}
.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 columna en móvil */
    gap: 2.5rem;
    margin-bottom: 3rem; /* Espacio antes de los enlaces legales */
}

/* Anulación de estilos del Logo */
.site-footer .logo-container {
    position: static;
    transform: none;
    margin-bottom: 1rem;
}
.site-footer .site-logo {
    text-align: left;
    font-size: 2rem;
}

/* (Estilos de .site-footer__socials se mantienen) */
.site-footer__socials {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.site-footer__socials a {
    font-size: 1.5rem;
    color: var(--color-text-secondary);
}
.site-footer__socials a:hover {
    color: var(--color-primary);
}

/* (Estilos de Título de Columna se mantienen) */
.site-footer__links-title {
    font-family: var(--font-subheading);
    color: var(--color-text-primary);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}


/* --- 8.4 Estilos del Buscador del Footer --- */
.site-footer__search p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.footer-search-form {
    display: flex;
    width: 100%;
    background-color: var(--color-background);
    border-radius: 25px;
    overflow: hidden; 
    border: 1px solid var(--color-border);
}
.footer-search-form input[type="text"] {
    flex-grow: 1; border: none; padding: 10px 15px;
    background-color: transparent; color: var(--color-text-primary);
    font-size: 1rem; outline: none; 
    font-family: var(--font-body);
}
.footer-search-form input[type="text"]::placeholder {
    color: var(--color-text-secondary);
}
.footer-search-form button[type="submit"] {
    background-color: var(--color-primary); border: none;
    padding: 0 15px; cursor: pointer; color: var(--color-text-inverted);
    font-size: 1rem;
    transition: background-color 0.2s ease;
}
.footer-search-form button[type="submit"]:hover {
    background-color: var(--color-primary-hover);
}


/* --- 8.5 NUEVO: Navegación Legal y Copyright --- */
.site-footer__legal-nav {
    border-top: 1px solid var(--color-border);
    padding-top: 2rem;
    margin-bottom: 2rem;
}
.site-footer__legal-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Apilados en móvil */
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.site-footer__legal-nav a {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
}
.site-footer__legal-nav a:hover {
    color: var(--color-primary);
}
.site-footer__copyright {
    text-align: center;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* Media query para columnas del footer en escritorio */
@media (min-width: 768px) {
    .site-footer__grid {
        /* Logo (2fr), Buscador (1.5fr) */
        grid-template-columns: 2fr 1.5fr;
        gap: 3rem; 
    }
    .site-footer__legal-nav ul {
        flex-direction: row; /* En línea en escritorio */
        gap: 2rem;
    }
    .site-footer__copyright {
        margin-top: 2rem; /* El copyright ya no necesita el borde */
    }
}

/* --- 8.4 Estilos del Buscador del Footer --- */

/* CRÍTICO: Añadimos esta regla para el contenedor del grid */
.site-footer__search {
    min-width: 0; /* Permite que el item del grid se encoja */
}

.site-footer__search p {
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.footer-search-form {
    display: flex;
    width: 100%;
    background-color: var(--color-background);
    border-radius: 25px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}
.footer-search-form input[type="text"] {
    flex-grow: 1; 
    min-width: 0; /* CRÍTICO: Mantenemos este para el flexbox */
    border: none; 
    padding: 10px 15px;
    background-color: transparent; 
    color: var(--color-text-primary);
    font-size: 1rem; 
    outline: none;
    font-family: var(--font-body);
}
.footer-search-form input[type="text"]::placeholder {
    color: var(--color-text-secondary);
}
.footer-search-form button[type="submit"] {
    background-color: var(--color-primary); border: none;
    padding: 0 15px; cursor: pointer; color: var(--color-text-inverted);
    font-size: 1rem;
    transition: background-color 0.2s ease;
}
.footer-search-form button[type="submit"]:hover {
    background-color: var(--color-primary-hover);
}


/* --- 8.4 Banner de Cookies (UNIFICADO Y CORREGIDO) --- */
#cookie-consent-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    
    /* Lógica de visibilidad (empieza oculto) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}
/* Estado visible (añadido por JS) */
#cookie-consent-overlay.show {
    opacity: 1;
    visibility: visible;
}
.cookie-modal {
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    padding: 2rem;
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    
    /* Animación de entrada */
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
#cookie-consent-overlay.show .cookie-modal {
    transform: scale(1);
    opacity: 1;
}
.cookie-modal__content {
    text-align: center;
}
.cookie-modal__title {
    font-family: var(--font-heading);
    color: var(--color-primary);
    font-size: 1.75rem;
    margin-bottom: 1rem;
}
.cookie-modal__text {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.cookie-modal__text a {
    color: var(--color-primary);
    text-decoration: underline;
}
.cookie-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.cookie-modal__settings-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary);
    text-decoration: underline;
    cursor: pointer;
    margin-top: 1rem;
    width: 100%;
}
.cookie-modal__settings-btn:hover {
    color: var(--color-text-primary);
}
.cookie-settings__options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.cookie-toggle-wrap {
    background-color: var(--color-background);
    padding: 1rem;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cookie-toggle__title {
    color: var(--color-text-primary);
    font-weight: bold;
}
.cookie-toggle__desc {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}
.cookie-modal__actions-settings {
    margin-top: 2rem;
    text-align: right;
}
/* Estilos del toggle (interruptor) */
.cookie-toggle { 
    position: relative; display: inline-block; width: 50px; height: 28px; cursor: pointer; 
}
.cookie-toggle input { display: none; }
.cookie-toggle .toggle-handle { 
    position: absolute; inset: 0; background-color: var(--color-border); border-radius: 28px; transition: .4s; 
}
.cookie-toggle .toggle-handle:before { 
    position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; border-radius: 50%; transition: .4s; 
}
.cookie-toggle input:checked + .toggle-handle { background-color: var(--color-primary); }
.cookie-toggle input:checked + .toggle-handle:before { transform: translateX(22px); }
.cookie-toggle.disabled { opacity: 0.5; cursor: not-allowed; }

/* Media query para botones de cookies en escritorio */
@media (min-width: 640px) {
    .cookie-modal__actions {
        flex-direction: row;
    }
}

/* Lógica de intercambio (Main vs Settings) */
#cookie-consent-overlay:not(.show-settings) #cookie-settings-modal {
    display: none;
}
#cookie-consent-overlay:not(.show-settings) #cookie-main-modal {
    display: block;
}
#cookie-consent-overlay.show-settings #cookie-main-modal {
    display: none;
}
/* CRÍTICO: Anulamos el .hidden que viene del HTML */
#cookie-consent-overlay.show-settings #cookie-settings-modal {
    display: block !important; 
}

/* ==========================================================================
   9 - WIDGETS FLOTANTES, BARRA MÓVIL Y PANELES (Refactorizados)
   ========================================================================== */

/* --- 9.1 Botones Flotantes (Chatbot y Scroll-top) --- */
.chatbot-btn,
.scroll-top-btn {
    position: fixed;
    right: 1.25rem; /* 20px */
    z-index: 40;
    background-color: var(--color-primary);
    color: var(--color-text-inverted);
    width: 3.5rem; /* 56px */
    height: 3.5rem; /* 56px */
    border-radius: 9999px; /* circular */
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* 24px */
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}
.chatbot-btn:hover,
.scroll-top-btn:hover {
    background-color: var(--color-primary-hover);
    transform: scale(1.1);
}
.scroll-top-btn {
    bottom: 1.25rem; /* 20px */
    width: 3rem; /* 48px */
    height: 3rem; /* 48px */
    font-size: 1.25rem; /* 20px */
}
.chatbot-btn {
    bottom: 5rem; /* 80px (encima del scroll-top) */
}

/* --- 9.2 Widget de Viaje (Botín de Escritorio) --- */
.trip-widget-container {
    position: fixed;
    bottom: 0;
    right: 96px; /* A la izquierda de los botones flotantes */
    z-index: 999;
    width: 320px;
    cursor: pointer;
    transition: max-height 0.4s ease-in-out;
    border-radius: 8px 8px 0 0;
    background-color: var(--color-surface);
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    border: 1px solid var(--color-border);
    overflow: hidden;
    max-height: 60px; /* Altura colapsado (solo header) */
}
.trip-widget-container.is-expanded {
    max-height: 450px;
}
.trip-widget-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 1rem;
    height: 60px;
}
.trip-widget-icon i {
    font-size: 1.25rem;
    color: var(--color-primary);
}
.trip-widget-title {
    font-size: 1rem;
    font-family: var(--font-subheading);
    color: var(--color-text-primary);
    flex-grow: 1;
}
.trip-widget-counter {
    background-color: var(--color-primary);
    color: var(--color-text-inverted);
    min-width: 24px;
    height: 24px;
    padding: 2px;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.trip-widget-toggle {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}
.trip-widget-container .icon-toggle-down { display: none; }
.trip-widget-container.is-expanded .icon-toggle-up { display: none; }
.trip-widget-container.is-expanded .icon-toggle-down { display: block; }
.trip-widget-action-btn {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    padding: 4px;
    transition: color 0.2s;
}
.trip-widget-action-btn:hover {
    color: var(--color-primary);
}
.trip-widget-body {
    height: calc(100% - 60px);
    overflow-y: auto;
    color: var(--color-text-primary);
}

/* --- 9.2.1 Contenido del Widget (Lista de Paradas) --- */

/* Estilo para el mensaje de "Tu mapa está en blanco" */
.trip-widget-body .widget-empty-message {
    padding: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: center;
    color: var(--color-text-secondary);
}
/* (Tu trip-planner.js debe envolver ese mensaje en esta clase) */

/* Título del grupo (Ej: "GUÍA: ROMA") */
.planner-group-title {
    padding: 12px 16px 8px 16px;
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    text-transform: uppercase;
    background-color: var(--color-background); /* Fondo ligeramente diferente */
}

/* Cada parada (item) en la lista */
.planner-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
}
.planner-item img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}
.planner-item .item-details {
    flex-grow: 1;
    overflow: hidden;
}
.planner-item .item-title {
    color: var(--color-text-primary);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
}
.planner-item .delete-item-btn {
    color: var(--color-text-secondary);
    font-size: 16px;
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s ease;
}
.planner-item .delete-item-btn:hover {
    color: #ef4444; /* Rojo para eliminar */
}


/* --- 9.3 Navegación Inferior (Móvil) y Panel de Viaje Móvil --- */
#mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    box-sizing: border-box; 
    
    padding-top: 12px; /* <--- REVERTIDO */
    /* Ajuste para el 'notch' de iPhone */
    padding-bottom: 12px; /* <--- REVERTIDO */
    
    padding-left: 8px;
    padding-right: 8px;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-around;
    align-items: center; /* (Mantenemos align-items: center, no hace daño) */
    z-index: 1000;  
}
.mobile-nav-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 100%;
    color: var(--color-text-secondary);
    background: none; border: none; cursor: pointer; text-decoration: none;
    position: relative; flex: 1; padding: 4px;
}
.mobile-nav-btn i { font-size: 22px; margin-bottom: 4px; }
.mobile-nav-btn span { display: none; } /* Oculta texto si lo hubiera */
.mobile-nav-btn:hover { color: var(--color-primary); }
.mobile-nav-btn.is-center { margin-top: -35px; }
.center-btn-circle {
    width: 60px; height: 60px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 4px solid var(--color-surface);
    box-shadow: 0 0 15px rgba(246, 107, 0, 0.5);
    transition: transform 0.2s ease;
}
.center-btn-circle i { color: var(--color-text-inverted); font-size: 24px; margin-bottom: 0; }
.mobile-nav-btn.is-center:hover .center-btn-circle { transform: scale(1.1); }
.mobile-nav-counter {
    position: absolute; top: 8px; right: 18px;
    background-color: var(--color-primary);
    color: var(--color-text-inverted);
    width: 18px; height: 18px; border-radius: 50%;
    font-size: 11px; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--color-surface);
    line-height: 1;
    transform: scale(0);
    transition: transform 0.2s ease;
}
.mobile-nav-counter:not(:empty):not(.is-zero) { transform: scale(1); }

/* Panel de Viaje Móvil (se desliza desde abajo) */
.mobile-trip-panel { /* ID #mobile-trip-panel en el HTML */
    position: fixed; bottom: 0; left: 0; right: 0;
    height: 85vh;
    background-color: var(--color-surface);
    color: var(--color-text-primary);
    box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
    z-index: 50; /* Z-index bajo, controlado por JS */
    border-radius: 16px 16px 0 0;
    display: flex; /* Asegura el display flex */
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}
.mobile-trip-panel.is-open { transform: translateY(0); }
.panel-header {
    flex-shrink: 0;
    position: relative;
    padding: 0.5rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.panel-handle-container { position: absolute; top: 0; left: 0; right: 0; padding: 8px; display: flex; justify-content: center; cursor: grab; }
.panel-handle { width: 50px; height: 5px; background-color: var(--color-border); border-radius: 3px; }
.panel-action-btn { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; }


/* --- 9.4 Reglas de Visibilidad (Móvil vs. Escritorio) --- */

/* Por defecto (Móvil): */
#trip-widget, /* Oculta Widget de Escritorio */
#chatbot-btn {  /* Oculta Chatbot Flotante de Escritorio */
    display: none; 
}
#mobile-bottom-nav,
.mobile-trip-panel {
    display: flex; /* Muestra Barra Inferior y Panel de Móvil */
}
/* Ajuste de scroll-top para que no choque con la barra inferior */
@media (max-width: 767px) {
    body { 
        padding-bottom: 50px; /* <--- CORREGIDO (50px de barra) */
    }
    .scroll-top-btn {
        /* 50px de barra + 20px de margen = 70px */
        bottom: 70px !important; /* <--- CORREGIDO */
    }
}

/* Escritorio (Tablet y superior): */
@media (min-width: 768px) {
    #mobile-bottom-nav,
    .mobile-trip-panel {
        display: none !important; /* Oculta Barra Inferior y Panel de Móvil */
    }
    #trip-widget, /* Muestra Widget de Escritorio */
    #chatbot-btn {  /* Muestra Chatbot Flotante de Escritorio */
        display: block;
    }
    /* El scroll-top vuelve a su posición original */
    .scroll-top-btn {
        bottom: 1.25rem !important;
    }
}

/* ==========================================================================
   11 - ESTILOS DE PÁGINA: HOME (Hero Refactorizado)
   ========================================================================== */

/* --- 11.1 Sección Hero --- */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh; /* Altura de pantalla completa */
    overflow: hidden;
    background-size: cover;
    background-position: center;
    /* Imagen de Fallback (si el vídeo falla o no carga) */
    background-image: url('https://images.pexels.com/photos/238622/pexels-photo-238622.jpeg?auto=compress&cs=tinysrgb&w=1920&h=1080&dpr=2');
}
.hero-video {
    position: absolute;
    top: 50%; 
    left: 50%;
    width: 100%; 
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 1;
    filter: brightness(0.6);
    
    /* CAMBIO CLAVE: Lo mostramos siempre para que se vea el poster */
    display: block !important; 
}
.hero-section__overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4); /* Capa oscura */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    z-index: 10;
}
.hero-section__content {
    width: 100%;
    max-width: 768px; /* Límite de ancho para el contenido */
    text-align: center;
    color: #ffffff; /* Color del texto del Hero */
}
.hero-section__title {
    font-family: var(--font-heading);
    font-size: 3rem; /* Tamaño móvil */
    line-height: 1.1;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5); /* Sombra para legibilidad */
}
.hero-section__subtitle {
    font-size: 1.25rem; /* Tamaño móvil */
    margin-bottom: 2.5rem;
    font-weight: bold;
    font-style: italic;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/* Formulario de Búsqueda del Hero (Corregido: Overflow) */
.hero-section__search-form {
    display: flex;
    flex-direction: row; /* Horizontal */
    width: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 50px; 
    padding: 0.5rem; /* Aumentamos el padding del contenedor */
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.2);
    align-items: center; /* Centra el input y el botón verticalmente */
}
.hero-section__search-input {
    flex-grow: 1; /* Deja que el input crezca */
    min-width: 0; /* CRÍTICO: Permite que el input se ENCOJA */
    border: none;
    background: transparent;
    padding: 0.75rem 1.25rem;
    color: #333; 
    font-size: 1.1rem;
    outline: none;
    font-family: var(--font-body);
    text-align: left;
}
.hero-section__search-button {
    /* Hereda .button y .button--primary */
    flex-shrink: 0; /* CRÍTICO: Evita que el botón se ENCOJA */
    padding: 0.6rem 1.5rem;
    font-size: 1rem;
    width: auto; 
}

/* Ajustes para Escritorio */
@media (min-width: 768px) {
    .hero-section__title { 
        font-size: 4.5rem; /* Más grande en PC */
    }
    .hero-section__subtitle { 
        font-size: 1.5rem; 
    }
    .hero-section__search-form {
        flex-direction: row; /* Lado a lado en PC */
    }
    .hero-section__search-input {
        text-align: left;
    }
    .hero-section__search-button {
        width: auto; /* Ancho automático en PC */
    }
}

/* ===================================================================== */
/* === 12 - ESTILOS PÁGINA: HOME (Topic Scroll-Track v3 - Cuadrado)  === */
/* ===================================================================== */

//* --- 1. El Contenedor de la Sección --- */
.home-topics {
    padding: 2.5rem 0 3.5rem 0;
    background-color: var(--color-background);
    border-bottom: none; /* Eliminamos el borde */
    position: relative; 
    overflow: hidden; 
}

/* --- 2. El Track de Scroll (FIX VVERTICAL) --- */
/* Usamos alta especificidad para ganar la cascada */
section.home-topics .home-topics__grid {
    /* ¡Fuerza el modo horizontal! */
    display: flex;         
    flex-wrap: nowrap;     
    flex-direction: row; 
    overflow-x: auto;      
    
    gap: 1.5rem; /* Espacio entre tarjetas */
    
    /* Padding interno (asumiendo que está dentro de un .container) */
    padding: 1.5rem 0.5rem; 

    /* Ocultamos las barras de scroll */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}
section.home-topics .home-topics__grid::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Pista visual para escritorio: se puede arrastrar */
section.home-topics .home-topics__grid {
    cursor: grab;
}
section.home-topics .home-topics__grid:active {
    cursor: grabbing;
}

/* Pista visual para escritorio: se puede arrastrar */
section.home-topics .home-topics__grid {
    cursor: grab; /* Muestra la "manita" para agarrar */
}
section.home-topics .home-topics__grid.is-grabbing {
    cursor: grabbing; /* Muestra la "manita" cerrada */
}


/* ================================================= */
/* === 3. LA TARJETA (Versión Alargada y Cuadrada) === */
/* ================================================= */

.topic-card {
    flex: 0 0 auto; /* Para que las tarjetas no se encojan */
    
    /* 1. ESTRUCTURA (Alargada) */
    width: 170px;
    height: 220px; /* Tarjeta alargada */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centramos el contenido */
    text-decoration: none;
    
    background-color: var(--color-surface);
    border: none; /* Quitamos el borde completo */
    border-radius: 0; /* Bordes cuadrados */
    padding: 1.5rem 1rem; 
    text-align: center;
    position: relative; /* Para los bordes parciales */
    overflow: hidden; 
    
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}

/* --- 4. ESTILO DE BORDE PARCIAL (Cuadrado) --- */
.topic-card::before,
.topic-card::after {
    content: '';
    position: absolute;
    width: 30px; /* Largo de las líneas del borde */
    height: 30px; /* Largo de las líneas del borde */
    border: 2px solid var(--color-border); /* Color del borde */
    transition: border-color 0.3s ease; 
}

/* Esquina superior izquierda */
.topic-card::before {
    top: 0;
    left: 0;
    border-width: 2px 0 0 2px; /* Solo borde superior e izquierdo */
    border-radius: 0; 
}

/* Esquina inferior derecha */
.topic-card::after {
    bottom: 0;
    right: 0;
    border-width: 0 2px 2px 0; /* Solo borde inferior y derecho */
    border-radius: 0; 
}


/* --- 5. CONTENIDO DE LA TARJETA --- */
.topic-card__icon-wrapper {
    margin-bottom: 1rem; 
    flex-shrink: 0;
}

.topic-card__icon {
    font-size: 3rem; 
    color: var(--color-primary); 
    -webkit-text-stroke: 1.5px var(--color-primary);
    text-shadow: none;
    -webkit-text-fill-color: transparent; 
    text-fill-color: transparent;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.topic-card__title {
    font-family: var(--font-subheading); 
    font-weight: 900;
    font-size: 1.15rem; 
    color: var(--color-text-primary);
    line-height: 1.3;
    margin: 0;
    
    display: -webkit-box;
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.topic-card__count {
    font-family: var(--font-body);
    font-size: 0.8rem; 
    color: var(--color-text-secondary);
    margin-top: 0.25rem;
}


/* --- 6. INTERACCIÓN (Hover) --- */

.topic-card:hover,
.topic-card:focus-visible {
    box-shadow: 0 0 25px rgba(249, 115, 22, 0.4);
    transform: translateY(-8px) scale(1.03); 
}

/* Los bordes parciales se colorean en hover */
.topic-card:hover::before,
.topic-card:hover::after {
    border-color: var(--color-primary);
}

/* Rellenar el icono y colorear el título */
.topic-card:hover .topic-card__icon {
    -webkit-text-fill-color: var(--color-primary); 
    text-fill-color: var(--color-primary);
    transform: scale(1.15) rotate(-5deg);
}
    
.topic-card:hover .topic-card__title {
    color: var(--color-primary);
}

/* ==========================================================================
   13 - ESTILOS PÁGINA: HOME (Misiones - HUD v10 - CORREGIDO)
   ========================================================================== */

/* --- Contenedor y Títulos --- */
.mission-grid {
    background-color: var(--color-background);
    padding: 4rem 1.5rem;
    overflow: hidden; 
}
.light-theme .mission-grid {
    background-color: #f3f4f6; 
}
.mission-grid__header {
    text-align: center;
    margin-bottom: 4rem;
}
.mission-grid__title {
    font-family: var(--font-heading);
    font-size: 2.5rem; 
    text-transform: uppercase;
    color: var(--color-text-primary);
}
.light-theme .mission-grid__title { color: #111827; }

.mission-grid__title--highlight {
    color: var(--color-primary);
}
.mission-grid__subtitle {
    font-family: var(--font-subheading);
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    margin-top: 0.75rem;
    max-width: 896px; 
    margin-left: auto;
    margin-right: auto;
}
.light-theme .mission-grid__subtitle { color: #4b5563; }

/* --- Grid --- */
.mission-grid__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem; 
}
@media (min-width: 640px) {
    .mission-grid__grid { 
        grid-template-columns: repeat(2, 1fr); 
    } 
}
@media (min-width: 1024px) { 
    .mission-grid__grid { 
        grid-template-columns: repeat(4, 1fr); 
        gap: 2.5rem;
    } 
}

/* --- ================================== --- */
/* --- INICIO DE ESTILOS DE TARJETA V4 --- */
/* --- ================================== --- */

/* --- BASE (MODO OSCURO) --- */
.mission-card-v4 {
    display: block;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out;
    aspect-ratio: 9 / 14; 
    border-radius: 6px;
    overflow: hidden;
    background: var(--color-surface);
    border: none; 
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.2);
}

/* --- 1. Fondo de la Tarjeta (MODO OSCURO) --- */
.mission-card-v4__image-wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.mission-card-v4__image-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, 
        rgba(17, 24, 39, 0.8) 0%,  /* --color-background */
        rgba(17, 24, 39, 0.4) 40%, 
        transparent 70%, 
        rgba(17, 24, 39, 0.8) 100%
    );
}
.mission-card-v4__image {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: brightness(0.9) grayscale(0.1);
    transition: transform 0.4s ease;
}

/* --- 2. Contenido Superpuesto (MODO OSCURO) --- */
.mission-card-v4__content-overlay {
    position: relative;
    z-index: 3;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.75rem 2rem;
}

/* Header (Textos) (MODO OSCURO) */
.mission-card-v4__header {
    position: relative;
    padding-right: 30px; 
}
.mission-card-v4__title {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    line-height: 1.1;
    color: #ffffff;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.mission-card-v4__description {
    font-family: var(--font-subheading);
    font-size: 0.9rem;
    font-weight: 500;
    color: #e5e7eb; /* CAMBIADO: De var(--color-text-primary) a un color fijo y claro */
    opacity: 0.9;
    margin-top: 0.5rem;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.hud-id-tag {
    position: absolute;
    top: 1.25rem;
    right: 2rem;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    color: var(--color-primary);
    opacity: 0.7;
    z-index: 3;
}

/* Footer (Iconos y decorado) (MODO OSCURO) */
.mission-card-v4__footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    position: relative;
    min-height: 60px;
    padding-top: 10px;
}
.hud-footer-left {
    position: relative;
    width: 120px;
    height: 50px;
}
.hud-footer-right {
    position: relative;
    flex-grow: 1;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding-right: 5px;
}
.hud-f-chevrons {
    position: absolute;
    top: 0; left: 0;
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-primary);
    opacity: 0.8;
    letter-spacing: 2px;
}
.hud-f-bar-dotted {
    position: absolute;
    top: 22px; left: 0;
    width: 60px; height: 10px;
    border: 1px solid var(--color-primary);
    border-radius: 2px;
    opacity: 0.8;
    background: repeating-linear-gradient(
        90deg,
        transparent, transparent 2px,
        var(--color-primary) 2px, var(--color-primary) 3px
    );
}
.hud-f-bar-beveled {
    position: absolute;
    bottom: 5px; left: 0;
    width: 100px; height: 15px;
    border: 2px solid var(--color-primary);
    border-right: none;
    clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
}
.hud-f-bar-beveled::after {
    content: '';
    position: absolute;
    top: 2px; left: 4px;
    width: 30px;
    height: 7px;
    background-color: var(--color-primary);
    opacity: 0.7;
}
.hud-f-line-h {
    position: absolute;
    left: -20px;
    bottom: 11px;
    right: 90px;
    height: 2px;
    background-color: var(--color-primary);
    opacity: 0.8;
}
.hud-f-icon {
    font-size: 1.2rem;
    color: var(--color-primary);
    opacity: 0.9;
    border: 1.5px solid var(--color-primary);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 1;
    background-color: var(--color-surface);
}
.hud-icon-target { font-size: 0.9rem; }
.hud-icon-gear { font-size: 1.1rem; }

/* --- 3. Elementos del Marco (MODO OSCURO) --- */
.hud-frame-container {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.hud-el {
    position: absolute;
    background-color: transparent;
    transition: all 0.3s ease;
}
.hud-el::before,
.hud-el::after {
    content: '';
    position: absolute;
    background-color: var(--color-primary);
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.7);
}
.hud-corner-tl { top: 10px; left: 10px; width: 30px; height: 30px; }
.hud-corner-tl::before { top: 0; left: 0; width: 100%; height: 2px; }
.hud-corner-tl::after { top: 0; left: 0; width: 2px; height: 100%; }
.hud-corner-tr { top: 10px; right: 10px; width: 30px; height: 30px; }
.hud-corner-tr::before { top: 0; right: 0; width: 100%; height: 2px; }
.hud-corner-tr::after { top: 0; right: 0; width: 2px; height: 100%; }
.hud-corner-bl { bottom: 10px; left: 10px; width: 30px; height: 30px; }
.hud-corner-bl::before { bottom: 0; left: 0; width: 100%; height: 2px; }
.hud-corner-bl::after { bottom: 0; left: 0; width: 2px; height: 100%; }
.hud-corner-br { bottom: 10px; right: 10px; width: 30px; height: 30px; }
.hud-corner-br::before { bottom: 0; right: 0; width: 100%; height: 2px; }
.hud-corner-br::after { bottom: 0; right: 0; width: 2px; height: 100%; }
.hud-sidebar-left,
.hud-sidebar-right {
    top: 44px;
    bottom: 44px;
    width: 20px;
}
.hud-sidebar-left { left: 10px; }
.hud-sidebar-right { right: 10px; transform: scaleX(-1); }
.hud-sidebar-left span,
.hud-sidebar-right span {
    position: absolute;
    background-color: var(--color-primary);
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.7);
}
.c-line.c-main-v { width: 1px; height: 100%; left: 3px; top: 0; opacity: 0.5; }
.c-line.c-h-1 { width: 10px; height: 2px; left: 3px; top: 10%; }
.c-line.c-v-1 { width: 1px; height: 25%; left: 15px; top: 10%; }
.c-block.c-b-1 { width: 8px; height: 15px; left: 0; top: 15%; }
.c-line.c-h-2 { width: 12px; height: 1px; left: 3px; top: 40%; }
.c-line.c-v-dots {
    width: 2px; height: 20%; left: 8px; top: 45%;
    background: transparent;
    border-left: 2px dotted var(--color-primary);
    box-shadow: none;
    opacity: 0.6;
}
.c-line.c-h-3 { width: 10px; height: 1px; left: 8px; top: 70%; }
.c-line.c-v-2 { width: 1px; height: 20%; left: 18px; top: 70%; }
.c-block.c-b-2 { width: 8px; height: 15px; left: 0; bottom: 5%; }
.hud-header-line {
    top: 35px; left: 50px; right: 50px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(249, 115, 22, 0.5) 20%, rgba(249, 115, 22, 0.5) 80%, transparent);
    box-shadow: none;
}
.hud-header-line::before {
    content: '::::::::::::';
    font-family: monospace;
    font-size: 8px;
    color: var(--color-primary);
    opacity: 0.6;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: transparent;
    box-shadow: none;
}
.hud-header-line::after { display: none; }

/* --- Interacción (MODO OSCURO) --- */
.mission-card-v4:hover {
    transform: translateY(-8px); 
    z-index: 10;
    box-shadow: 0 5px 30px rgba(249, 115, 22, 0.5);
}
.mission-card-v4:hover .mission-card-v4__image {
    transform: scale(1.1);
    filter: brightness(1) grayscale(0);
}
.mission-card-v4:hover .hud-el::before,
.mission-card-v4:hover .hud-el::after,
.mission-card-v4:hover .hud-f-bar-beveled,
.mission-card-v4:hover .hud-sidebar-left span,
.mission-card-v4:hover .hud-sidebar-right span {
    opacity: 1;
    box-shadow: 0 0 12px var(--color-primary);
}
.mission-card-v4:hover .hud-f-icon {
    background: var(--color-primary);
    color: var(--color-surface); 
}
.mission-card-v4:hover .hud-f-chevrons,
.mission-card-v4:hover .hud-f-bar-dotted {
    opacity: 1;
}

/* --- ================================== --- */
/* --- INICIO DE ESTILOS MODO CLARO --- */
/* --- ================================== --- */

/* --- Base (MODO CLARO) --- */
.light-theme .mission-card-v4 {
    /* Todas las reglas que rompían el diseño han sido eliminadas */
    /* Ahora la tarjeta se verá idéntica al modo oscuro */
}

/* --- 1. Fondo de la Tarjeta (MODO CLARO) --- */
.light-theme .mission-card-v4__image-wrapper {
    /* Eliminado */
}
.light-theme .mission-card-v4__image-wrapper::after {
    /* Eliminado */
}
.light-theme .mission-card-v4__image {
    /* Eliminado */
}

/* --- 2. Contenido Superpuesto (MODO CLARO) --- */
.light-theme .mission-card-v4__content-overlay {
    /* Eliminado */
}

/* Header (Textos) (MODO CLARO) */
.light-theme .mission-card-v4__header {
    /* Eliminado */
}
.light-theme .mission-card-v4__title {
    /* Eliminado */
}
.light-theme .mission-card-v4__description {
    /* Eliminado */
}
.light-theme .hud-id-tag { 
    /* Eliminado */
}

/* Footer (MODO CLARO) */
.light-theme .mission-card-v4__footer {
    /* Eliminado */
}
/* Ocultar elementos HUD */
.light-theme .hud-footer-left,
.light-theme .hud-footer-right {
    /* Eliminado */
}
/* Iconos Font Awesome para modo claro */
.light-theme .mission-card-v4__footer::before,
.light-theme .mission-card-v4__footer::after {
    /* Eliminado */
}

/* --- 3. Elementos del Marco (MODO CLARO) --- */
.light-theme .hud-frame-container {
    /* Eliminado */
}

/* --- Interacción (MODO CLARO) --- */
.light-theme .mission-card-v4:hover {
    /* Eliminado */
}
.light-theme .mission-card-v4:hover .mission-card-v4__footer::before,
.light-theme .mission-card-v4:hover .mission-card-v4__footer::after {
    /* Eliminado */
}

/* =================================================================== */
/* === 14 - ANIMACIÓN DE SCROLL (Lazy Load Sections)             === */
/* =================================================================== */

.lazy-load-section {
    opacity: 0;
    transform: translateY(30px); 
    visibility: hidden;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out, visibility 0.6s;
}

.lazy-load-section.is-visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* =================================================================== */
/* === 15 - SECCIÓN FOOTER: ÍNDICE DE DESTINOS (Integrado y Corregido) === */
/* =================================================================== */

.footer-destinations {
    /* Ajustamos el padding y márgenes */
    padding-top: 3rem; 
    padding-bottom: 3rem; 
    margin-top: 3rem; 
    
    /* ¡¡AQUÍ ESTÁ EL ARREGLO!! */
    background-color: transparent; /* Hereda el fondo del .site-footer */
    
    /* Un borde para separarlo del grid de logo/búsqueda */
    border-top: 1px solid var(--color-border);
}

.footer-destinations__header {
    text-align: left;
    margin-bottom: 2.5rem;
}

.footer-destinations__title {
    font-family: var(--font-heading);
    font-size: 2rem; 
    color: var(--color-text-primary);
    margin: 0;
}

/* --- El Grid de Países --- */
.footer-destinations__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 1.5rem 1rem;
}

@media (min-width: 768px) {
    .footer-destinations__grid {
        grid-template-columns: repeat(4, 1fr); 
    }
}

@media (min-width: 1024px) {
    .footer-destinations__grid {
        grid-template-columns: repeat(5, 1fr); 
    }
}

/* --- El Item Individual --- */
.footer-destinations__item {
    text-decoration: none;
    transition: transform 0.2s ease;
}

.footer-destinations__item-title {
    font-family: var(--font-subheading); 
    font-weight: 700; 
    font-size: 1.1rem;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem 0;
    transition: color 0.2s ease;
}

.footer-destinations__item-count {
    font-family: var(--font-body); 
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* --- Interacción de Hover --- */
.footer-destinations__item:hover {
    transform: translateX(5px); 
}

.footer-destinations__item:hover .footer-destinations__item-title {
    color: var(--color-primary); 
}

/* =================================================================== */
/* === 18. REFACTORIZACIÓN GUÍA & WIDGETS V5 (FINAL)        === */
/* =================================================================== */

/* --- 1. FIX CRÍTICO MÓVIL: Ocultar Widget Escritorio --- */
@media (max-width: 1023px) {
    .trip-widget-desktop-container {
        display: none !important;
    }
}

/* --- 2. WIDGET GLOBAL "PLAN DE FUGA" (Estilo LinkedIn - IZQUIERDA) --- */
.trip-widget-desktop-container {
    position: fixed;
    bottom: 0;
    left: 20px; /* A la IZQUIERDA */
    width: 320px;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -5px 25px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(calc(100% - 55px)); /* Colapsado, solo se ve el header */
    font-family: var(--font-body);
}

.trip-widget-desktop-container.is-expanded {
    transform: translateY(0);
}

.trip-widget-header {
    height: 55px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-weight: 600;
}

.trip-widget-header:hover { background: rgba(255,255,255,0.02); }

.widget-head-left { display: flex; align-items: center; gap: 10px; }
.widget-counter-badge {
    background: var(--color-primary); color: #000;
    font-size: 0.75rem; padding: 2px 6px; border-radius: 10px; font-weight: bold;
}
.widget-toggle-icon { transition: transform 0.3s; font-size: 0.9rem; }
.trip-widget-desktop-container.is-expanded .widget-toggle-icon { transform: rotate(180deg); }

.trip-widget-body { height: 400px; display: flex; flex-direction: column; background: var(--color-background); }
.trip-list-container { flex-grow: 1; overflow-y: auto; padding: 10px; }

/* Items del Plan */
.plan-item-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; margin-bottom: 8px;
    background: var(--color-surface); border-radius: 6px;
    border: 1px solid var(--color-border);
}
.plan-item-thumb { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
.plan-item-details { flex-grow: 1; overflow: hidden; }
.plan-item-title { font-size: 0.9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;}
.plan-item-meta { font-size: 0.75rem; color: var(--color-text-secondary); }
.plan-item-delete { color: #ef4444; background: none; border: none; cursor: pointer; padding: 5px; font-size: 0.9rem; opacity: 0.7; }
.plan-item-delete:hover { opacity: 1; }

.trip-widget-footer { padding: 15px; border-top: 1px solid var(--color-border); background: var(--color-surface); }

/* --- 3. NUEVO HERO DE GUÍA (Referencia Visual) --- */
.guide-hero-new {
    position: relative; min-height: 70vh; display: flex; align-items: flex-end;
    padding: 60px 20px; margin-top: -60px; overflow: hidden;
}
.guide-hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
}
.guide-hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, var(--color-background) 5%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.3) 100%);
}
.guide-hero-content {
    position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; width: 100%;
    display: grid; grid-template-columns: 1fr; gap: 40px;
}
@media (min-width: 768px) {
    .guide-hero-content { grid-template-columns: 1fr 1fr; align-items: end; }
}

/* Parte Izquierda Hero (Títulos) */
.hero-left-col { color: #fff; }
.hero-guide-number {
    font-family: var(--font-heading); font-size: clamp(5rem, 10vw, 8rem);
    line-height: 0.8; color: var(--color-primary); opacity: 0.9; display: block;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.3);
}
.hero-guide-title {
    font-family: var(--font-heading); font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1; text-transform: uppercase; margin: 10px 0 20px;
}
.hero-guide-meta {
    display: flex; gap: 20px; font-size: 0.9rem; color: rgba(255,255,255,0.8);
    text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.hero-meta-item i { color: var(--color-primary); margin-right: 5px; }

/* Parte Derecha Hero (Texto y "Leer más") */
.hero-right-col {
    background: rgba(24, 24, 27, 0.8); /* Fondo semitransparente */
    backdrop-filter: blur(10px);
    padding: 30px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.1);
}
.hero-description-text {
    color: rgba(255,255,255,0.9); line-height: 1.7; font-size: 1rem;
    max-height: 100px; overflow: hidden; position: relative;
    transition: max-height 0.5s ease;
}
.hero-description-text.is-expanded { max-height: 1000px; }
.hero-read-more-toggle {
    background: none; border: none; color: var(--color-primary);
    font-family: var(--font-subheading); font-weight: bold; cursor: pointer;
    padding: 0; margin-top: 15px; display: flex; align-items: center; gap: 5px;
}

/* --- 4. CABECERA DINÁMICA SCROLL (Estilo Repsol) --- */
#dynamic-scroll-header {
    position: fixed; top: 0; left: 0; width: 100%;
    background: rgba(15, 15, 20, 0.98); /* Casi negro */
    border-bottom: 2px solid var(--color-primary);
    z-index: 950; /* Por debajo del header principal si se solapan, pero visible */
    padding: 10px 20px;
    transform: translateY(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex; align-items: center; justify-content: space-between;
}
#dynamic-scroll-header.is-visible { transform: translateY(0); }

.dynamic-header-title {
    font-family: var(--font-heading); color: #fff; font-size: 1.1rem;
    text-transform: uppercase;
}
.dynamic-current-stop {
    color: var(--color-primary); margin-left: 10px;
}
.dynamic-header-controls { flex-grow: 1; display: flex; justify-content: flex-end; }
.dynamic-timeline-select {
    background: #000; color: #fff; border: 1px solid var(--color-border);
    padding: 8px 12px; border-radius: 4px; cursor: pointer; font-family: var(--font-body);
    max-width: 250px;
}

/* --- 5. LAYOUT GUÍA (Zig-Zag + Sidebar) --- */
.guide-main-layout {
    max-width: 1300px; margin: 0 auto; padding: 60px 20px;
    display: grid; grid-template-columns: 1fr; gap: 60px;
}
@media(min-width: 1024px) {
    .guide-main-layout { grid-template-columns: 1fr 300px; }
}

/* Sidebar de Pegamentos (Escritorio) */
.guide-sidebar-desktop { 
    display: none; 
    position: sticky; top: 80px; height: fit-content;
}
@media(min-width: 1024px) { .guide-sidebar-desktop { display: block; } }

.sidebar-widget-box {
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 8px; padding: 20px; margin-bottom: 25px;
}
.widget-box-title {
    font-family: var(--font-subheading); font-weight: bold; color: var(--color-primary);
    margin-bottom: 15px; display: flex; align-items: center; gap: 8px;
    text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px;
}
.widget-list-clean { list-style: none; padding: 0; margin: 0; }
.widget-list-clean li {
    margin-bottom: 12px; font-size: 0.9rem; color: var(--color-text-secondary);
    display: flex; gap: 10px;
}
.widget-list-clean i { color: var(--color-primary); margin-top: 3px; }
.widget-link { color: var(--color-text-primary); text-decoration: none; font-weight: 500; transition: color 0.2s; }
.widget-link:hover { color: var(--color-primary); }

/* Timeline Zig-Zag (Refinado) */
.timeline-stops-container { display: flex; flex-direction: column; gap: 100px; position: relative; }
/* Línea conectora */
.timeline-stops-container::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
    background: linear-gradient(to bottom, var(--color-primary) 0%, transparent 100%);
    opacity: 0.3; transform: translateX(-50%); z-index: 0;
}
@media(max-width: 1023px) { .timeline-stops-container::before { display: none; } }

.stop-card-zigzag {
    display: grid; grid-template-columns: 1fr; gap: 30px; position: relative; z-index: 1;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 12px; overflow: hidden;
}
@media(min-width: 768px) {
    .stop-card-zigzag { grid-template-columns: 1fr 1fr; gap: 0; background: transparent; border: none; border-radius: 0;}
}

/* Alternancia en escritorio */
@media(min-width: 768px) {
    .stop-card-zigzag:nth-child(odd) .stop-visual { order: 1; }
    .stop-card-zigzag:nth-child(odd) .stop-info { order: 2; }
    
    .stop-card-zigzag:nth-child(even) .stop-visual { order: 2; }
    .stop-card-zigzag:nth-child(even) .stop-info { order: 1; text-align: right; }
    .stop-card-zigzag:nth-child(even) .stop-header { flex-direction: row-reverse; }
    .stop-card-zigzag:nth-child(even) .stop-actions { justify-content: flex-end; }
}

.stop-visual { height: 300px; position: relative; }
@media(min-width: 768px) { .stop-visual { height: 500px; } }

.stop-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.stop-card-zigzag:hover .stop-image { transform: scale(1.05); }

.stop-info {
    padding: 30px; display: flex; flex-direction: column; justify-content: center;
    background: var(--color-surface);
}
@media(min-width: 768px) {
    .stop-info { padding: 50px; border: 1px solid var(--color-border); border-radius: 12px; }
    .stop-card-zigzag:nth-child(odd) .stop-info { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .stop-card-zigzag:nth-child(even) .stop-info { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
}

.stop-header { display: flex; align-items: baseline; gap: 15px; margin-bottom: 20px; }
.stop-num {
    font-family: var(--font-heading); font-size: 4rem; line-height: 0.8; color: var(--color-primary);
    opacity: 0.3;
}
.stop-name {
    font-family: var(--font-heading); font-size: 2rem; line-height: 1; text-transform: uppercase;
    color: var(--color-text-primary); margin: 0;
}
.stop-desc { color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 25px; }

.stop-actions { display: flex; gap: 10px; }

/* Botón "Añadir al Plan" */
.btn-add-to-plan {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px; border-radius: 30px;
    border: 1px solid var(--color-primary); color: var(--color-primary);
    background: transparent; font-family: var(--font-subheading); font-weight: bold;
    cursor: pointer; transition: all 0.2s; text-transform: uppercase; font-size: 0.85rem;
}
.btn-add-to-plan:hover { background: rgba(249, 115, 22, 0.1); }
.btn-add-to-plan.is-added {
    background: var(--color-primary); color: #000; border-color: var(--color-primary);
}
.btn-add-to-plan.is-added i { transform: scale(1.2); }

/* --- 6. NAVEGACIÓN ENTRE GUÍAS (Footer grande) --- */
.related-guides-nav {
    display: grid; grid-template-columns: 1fr; margin-top: 80px; border-top: 1px solid var(--color-border);
}
@media(min-width: 768px) { .related-guides-nav { grid-template-columns: 1fr 1fr; } }

.related-guide-link {
    position: relative; height: 300px; display: flex; align-items: center; justify-content: center;
    text-decoration: none; overflow: hidden; border-bottom: 1px solid var(--color-border);
}
@media(min-width: 768px) { .related-guide-link { border-bottom: none; } .related-guide-link:first-child { border-right: 1px solid var(--color-border); } }

.related-bg {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    transition: transform 0.5s; filter: brightness(0.4); z-index: 0;
}
.related-guide-link:hover .related-bg { transform: scale(1.05); filter: brightness(0.3); }
.related-content { position: relative; z-index: 1; text-align: center; color: #fff; padding: 20px; }
.related-label { display: block; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; opacity: 0.8; }
.related-title { font-family: var(--font-heading); font-size: 2.5rem; text-transform: uppercase; margin: 0; }
.related-arrow { font-size: 2rem; color: var(--color-primary); margin-top: 15px; display: block; transition: transform 0.3s; }
.related-guide-link.prev .related-arrow { transform: translateX(0); }
.related-guide-link.prev:hover .related-arrow { transform: translateX(-10px); }
.related-guide-link.next .related-arrow { transform: translateX(0); }
.related-guide-link.next:hover .related-arrow { transform: translateX(10px); }

/* =================================================================== */
/* === CORE.CSS V5: FIX MÓVIL & ESTÉTICA TOKIO                     === */
/* =================================================================== */

/* --- 1. FIX CRÍTICO: OCULTAR WIDGET ESCRITORIO EN MÓVIL --- */
@media (min-width: 1024px) {
    .trip-widget-desktop-container {
        bottom: 0 !important; /* Vuelve abajo */
        border-bottom: none;  /* Se fusiona con el borde de la pantalla */
        border-radius: 8px 8px 0 0;
        box-shadow: 0 -5px 25px rgba(0,0,0,0.3);
        z-index: 1000; /* Por encima de la barra de consola (que es 800) */
    }
    
    /* Los botones flotantes sí se quedan arriba para no chocar */
    .scroll-top-btn { bottom: 90px !important; }
    .chatbot-btn { bottom: 160px !important; }
}

/* ======================================================= */
/* === FIX DEFINITIVO: WIDGETS Y NAVEGACIÓN (LIMPIO)   === */
/* ======================================================= */

/* --- 1. WIDGET ESCRITORIO (IZQUIERDA + PEGADO AL SUELO) --- */
@media (min-width: 1024px) {
    .trip-widget-desktop-container {
        position: fixed; 
        
        /* FUERZA BRUTA: Pegado abajo y a la izquierda */
        bottom: 0 !important; 
        left: 20px !important; 
        right: auto !important; /* Anula cualquier regla de derecha */
        
        width: 320px;
        background-color: var(--color-surface); 
        border: 1px solid var(--color-border);
        border-bottom: none; /* Sin borde abajo para fusionarse */
        border-radius: 8px 8px 0 0;
        
        /* Sombra hacia arriba */
        box-shadow: 0 -5px 25px rgba(0,0,0,0.3);
        
        /* Z-INDEX: Encima de la barra de navegación (800) */
        z-index: 1000 !important; 
        
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        transform: translateY(calc(100% - 55px)); /* Colapsado: Solo se ve el título */
        font-family: var(--font-body);
        display: block !important;
    }
    
    .trip-widget-desktop-container.is-expanded {
        transform: translateY(0); /* Expandido */
    }
}

/* --- 2. OCULTAR WIDGET DE ESCRITORIO EN MÓVIL --- */
@media (max-width: 1023px) {
    .trip-widget-desktop-container { display: none !important; }
}

/* --- 3. BARRA DE NAVEGACIÓN MÓVIL (VISIBLE SIEMPRE EN MÓVIL) --- */
@media (max-width: 1023px) {
    .mobile-bottom-kit {
        display: flex !important; /* Forzar visibilidad */
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: var(--color-surface);
        border-top: 1px solid var(--color-border);
        
        /* Z-INDEX SUPREMO: Encima de todo */
        z-index: 999999 !important; 
        
        justify-content: space-around;
        align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
    }
    
    /* Padding al body para que el contenido no quede tapado */
    body { padding-bottom: 70px !important; }
}

/* OCULTAR BARRA MÓVIL EN PC */
@media (min-width: 1024px) {
    .mobile-bottom-kit { display: none !important; }
}

/* ======================================================= */
/* === 4. BARRA REPSOL (Scroll Sticky - FIXED)         === */
/* ======================================================= */

#repsol-nav {
    position: fixed;
    /* Colocamos la barra justo DEBAJO del header principal (que mide 60px) */
    top: 60px; 
    left: 0;
    width: 100%;
    height: 60px; /* Altura de la barra dinámica */
    
    background: rgba(10, 10, 10, 0.95); /* Fondo oscuro */
    backdrop-filter: blur(10px);
    border-bottom: 2px solid var(--color-primary);
    
    /* Z-index menor que el header principal (900) para que salga por debajo */
    z-index: 800; 
    
    /* Empieza escondida hacia arriba */
    transform: translateY(-150%); 
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Clase que añade JS para mostrarla */
#repsol-nav.visible {
    transform: translateY(0);
}

.repsol-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.repsol-title {
    font-family: var(--font-heading);
    color: #fff;
    font-size: 1.1rem;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 15px;
}

.repsol-select {
    background: var(--color-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    max-width: 250px;
    font-family: var(--font-subheading);
    font-weight: bold;
    outline: none;
}

.repsol-select:focus {
    border-color: var(--color-primary);
}

/* --- AJUSTE RESPONSIVE PARA MÓVIL --- */
@media (max-width: 768px) {
    /* En móvil, si el header es más pequeño o queremos ahorrar espacio */
    #repsol-nav {
        height: 50px;
        top: 60px; /* Mantenemos la posición bajo el header */
        padding: 0 10px;
    }
    
    .repsol-title {
        font-size: 0.9rem;
        max-width: 150px; /* Limitar ancho del título en móvil */
    }
    
    .repsol-select {
        font-size: 0.8rem;
        padding: 5px 10px;
        max-width: 140px;
    }
}

/* ======================================================= */
/* === 5. ZIG-ZAG HYBRID V8 (TEXTO FULL WIDTH)         === */
/* ======================================================= */

.guide-container {
    max-width: 1300px; margin: 0 auto; padding: 60px 20px;
    display: grid; grid-template-columns: 1fr 320px; gap: 60px;
}
@media (max-width: 1024px) { .guide-container { grid-template-columns: 1fr; } }

.stops-feed { display: flex; flex-direction: column; gap: 80px; }

/* Tarjeta contenedora */
.stop-card-v8 {
    display: flex; flex-direction: column; gap: 30px;
    padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.stop-card-v8:last-child { border-bottom: none; }

/* --- 1. FILA SUPERIOR (IMAGEN + DATOS) --- */
.stop-top-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
}

/* Lógica Zig-Zag (Escritorio) - Solo afecta a la parte superior */
@media (min-width: 768px) {
    .stop-card-v8:nth-child(even) .stop-top-row { direction: rtl; }
    .stop-card-v8:nth-child(even) .stop-data-col { direction: ltr; text-align: left; }
    .stop-card-v8:nth-child(even) .stop-copyright { text-align: left; }
}

/* Imagen */
.stop-img-frame {
    width: 100%; aspect-ratio: 467/300; position: relative;
    overflow: hidden; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 15px 40px rgba(0,0,0,0.5);
}
.stop-img-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.stop-card-v8:hover img { transform: scale(1.05); }

/* --- NUEVA MARCA DE AGUA (LOGO LIMPIO) --- */
.watermark-logo-img {
    position: absolute; 
    bottom: 10px; 
    right: 10px;
    width: auto; 
    height: 40px; /* Ajusta este tamaño según tu logo */
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
    
    /* Sombra sutil para asegurar que se vea sobre fotos claras */
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
    
    /* Opacidad ligera para que no moleste, pero se vea */
    opacity: 0.9;
}

/* Ajuste del hover en la tarjeta */
.stop-card-v8:hover .watermark-logo-img {
    opacity: 1; /* Al pasar el ratón se ve al 100% */
    transform: scale(1.05); /* Pequeño zoom */
    transition: all 0.3s ease;
}
.stop-copyright { margin-top: 8px; font-size: 0.75rem; color: #666; text-align: right; font-family: monospace; }

/* Columna de Datos */
.stop-data-col { display: flex; flex-direction: column; justify-content: center; height: 100%; }

.stop-number-outline {
    font-family: var(--font-heading); font-size: 5rem; line-height: 0.8;
    color: transparent; -webkit-text-stroke: 2px var(--color-primary);
    display: block; margin-bottom: 5px; opacity: 0.8;
}
.stop-title-main {
    font-family: var(--font-heading); font-size: 2.2rem; color: #fff;
    line-height: 1; text-transform: uppercase; margin: 0 0 15px 0;
}
.stop-address-link {
    color: var(--color-text-secondary); text-decoration: none; font-size: 0.9rem;
    border-bottom: 1px dashed #444; padding-bottom: 2px; display: inline-block; margin-bottom: 20px;
}
.stop-address-link:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* --- HUD Grid (Info + Acciones) --- */
.stop-hud-grid {
    background: var(--color-surface); /* Adaptable */
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary); /* Línea naranja marca */
    padding: 15px 20px; 
    display: flex; gap: 20px; align-items: center; justify-content: space-between;
    border-radius: 4px;
}

.hud-info-lines { 
    display: flex; flex-direction: column; gap: 8px; 
    font-size: 0.9rem; color: var(--color-text-secondary); 
    flex-grow: 1;
}
.hud-line i { color: var(--color-primary); width: 18px; text-align: center; margin-right: 5px; }
.hud-line strong { color: var(--color-text-primary); }

/* Columna Acciones Estilizada */
.hud-actions-col { 
    display: flex; 
    flex-direction: column; /* Vertical en escritorio */
    gap: 12px; align-items: center; 
    padding-left: 20px; 
    border-left: 1px solid var(--color-border); 
}

/* BOTONES TÁCTICOS (Estilizados y Pequeños) */
.btn-tactical-icon {
    width: 40px; height: 40px; /* Tamaño compacto */
    border-radius: 50%; /* Circulares */
    background: transparent;
    border: 1px solid var(--color-border); /* Borde sutil adaptable */
    color: var(--color-text-secondary);
    font-size: 1.1rem; /* Icono ajustado */
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
    text-decoration: none;
}

/* Hover: Se ilumina en naranja */
.btn-tactical-icon:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.2);
    transform: scale(1.1);
}

/* Estados Activos (Añadido al plan) */
.btn-tactical-icon.added {
    background-color: var(--color-primary);
    color: var(--color-text-inverted); /* Negro sobre naranja */
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.4);
}
.btn-tactical-icon.added i::before { content: "\f02e"; } /* Icono Bookmark Solid */

/* Responsive: En móvil los ponemos en fila horizontal */
@media (max-width: 768px) {
    .stop-hud-grid { 
        flex-direction: column; align-items: flex-start; gap: 15px; 
    }
    
    .hud-actions-col { 
        flex-direction: row; /* Horizontal en móvil */
        width: 100%; justify-content: flex-start; 
        padding-left: 0; border-left: none; 
        border-top: 1px solid var(--color-border); 
        padding-top: 15px; gap: 20px;
    }
    
    /* Un pelín más grandes en móvil para el dedo */
    .btn-tactical-icon { width: 45px; height: 45px; font-size: 1.2rem; }
}

/* Botones de Acción (Iconos Naranjas Grandes) */
.btn-icon-action {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 1.8rem; color: #555; transition: all 0.2s;
    display: flex; align-items: center; justify-content: center;
}
.btn-icon-action i { transition: transform 0.2s; }
.btn-icon-action:hover { color: var(--color-primary); }
.btn-icon-action:hover i { transform: scale(1.2); }

/* Estado Añadido (Bookmark sólido) */
.btn-icon-action.added { color: var(--color-primary); }
.btn-icon-action.added i::before { content: "\f02e"; } /* fa-bookmark solid */

/* --- 2. FILA INFERIOR (TEXTO FULL WIDTH) --- */
.stop-bottom-row { width: 100%; margin-top: 10px; }

.stop-narrative { position: relative; }
.narrative-content {
    font-size: 1.05rem; line-height: 1.8; color: #d4d4d4;
    overflow: hidden; transition: max-height 0.5s ease;
}
.narrative-content.collapsed {
    max-height: 120px; /* Solo intro visible */
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}
.narrative-content strong { color: #fff; }

/* Experiencia Canalla */
.canalla-box {
    margin-top: 30px; padding: 25px; background: rgba(20, 20, 20, 0.6);
    border: 1px dashed var(--color-primary); border-radius: 8px; position: relative;
}
.canalla-title {
    font-family: var(--font-subheading); color: #000; background: var(--color-primary);
    display: inline-block; padding: 4px 10px; font-size: 0.85rem; border-radius: 4px;
    position: absolute; top: -14px; left: 20px; font-weight: bold;
}

/* Botón Leer Más (Corregido para Modo Claro) */
.btn-read-more {
    background: none; 
    border: none; 
    color: var(--color-primary); /* Naranja base */
    font-weight: bold; 
    font-size: 0.9rem; 
    padding: 15px 0; 
    width: 100%; 
    text-align: left;
    cursor: pointer; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    display: flex; 
    align-items: center; 
    gap: 5px; 
    margin-top: 10px;
    transition: color 0.2s ease;
}

.btn-read-more:hover { 
    /* FIX: Usar variable adaptable en vez de #fff fijo */
    color: var(--color-text-primary); 
    text-decoration: underline; 
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .stop-top-row { grid-template-columns: 1fr; gap: 20px; }
    .stop-card-v8:nth-child(even) .stop-top-row { direction: ltr; } /* Reset dirección */
    
    .stop-hud-grid { flex-direction: column; align-items: flex-start; gap: 15px; }
    .hud-actions-col { 
        flex-direction: row; width: 100%; justify-content: flex-start; 
        padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,0.1); 
        padding-top: 15px; 
    }
    .btn-icon-action { font-size: 2rem; margin-right: 20px; }
}

/* --- 3. ACCIONES FOOTER --- */
.stop-actions-footer {
    display: flex; gap: 15px; align-items: center; border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
}

/* Botón Plan Fuga (Icono grande funcional) */
.btn-fuga-action {
    background: transparent; border: none; cursor: pointer;
    font-size: 1.8rem; color: #666; transition: all 0.2s;
    padding: 0;
}
.btn-fuga-action:hover { color: #fff; transform: scale(1.1); }
/* Estado Añadido (Controlado por JS togglePlanItem) */
.btn-fuga-action.added { color: var(--color-primary); }
.btn-fuga-action.added i::before { content: "\f02e"; } /* Cambia fa-bookmark regular a solid */

.btn-external-link {
    color: #666; font-size: 1.5rem; transition: color 0.2s;
}
.btn-external-link:hover { color: var(--color-primary); }

/* --- 6. SIDEBARS (Incógnito, Recomendaciones) --- */
.sidebar-sticky { position: sticky; top: 100px; height: fit-content; }
.sidebar-module {
    background: var(--color-surface); border: 1px solid #333; padding: 20px;
    margin-bottom: 20px; border-radius: 8px;
}
.sidebar-head {
    font-family: var(--font-subheading); color: var(--color-primary);
    border-bottom: 1px solid #333; padding-bottom: 10px; margin-bottom: 15px;
    text-transform: uppercase; font-weight: bold; letter-spacing: 1px;
}
.sidebar-content li { margin-bottom: 10px; color: #ccc; font-size: 0.9rem; display: flex; gap: 10px; }
.sidebar-content i { color: var(--color-primary); margin-top: 4px; }

/* ======================================================= */
/* === HERO MISION GUÍA (Brutalist & Accessible)       === */
/* ======================================================= */

:root {
    --hero-height: 90vh; /* Ocupa casi toda la pantalla */
    --color-neon: #f97316; /* Tu naranja corporativo */
    --font-primary: 'Montserrat', sans-serif; /* Ajusta a tu fuente */
    --font-display: 'Impact', 'Anton', sans-serif; /* Fuente gruesa para el título */
}

.hero-mission {
    position: relative;
    width: 100%;
    height: var(--hero-height);
    min-height: 600px; /* Evita que se aplaste en pantallas pequeñas */
    display: flex;
    align-items: flex-end; /* Contenido abajo para impacto visual */
    justify-content: center;
    overflow: hidden;
    padding-bottom: 60px; /* Espacio inferior */
    margin-top: -60px; /* Si tu header es fijo/transparente */
}

/* Imagen de Fondo */
.hero-mission__bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
    /* Animación lenta sutil para dar vida */
    animation: slowZoom 20s infinite alternate ease-in-out;
}
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.1); } }

/* Capa oscura (Vital para pasar tests de accesibilidad) */
.hero-mission__overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(
        to bottom, 
        rgba(0,0,0,0.3) 0%, 
        rgba(0,0,0,0.6) 50%, 
        rgba(0,0,0,0.9) 100%
    );
    z-index: 1;
}

/* Contenedor del contenido */
.hero-mission__content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 1. Localización */
.hero-location {
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--color-neon);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* 2. Título Brutalista */
.hero-title {
    font-family: var(--font-display);
    min-height: 1.2em;
    contain: layout paint;
    /* Clamp: Mínimo 3rem, Ideal 10vw, Máximo 8rem */
    font-size: clamp(3.5rem, 10vw, 8rem); 
    line-height: 0.9;
    text-transform: uppercase;
    margin: 0;
    color: #fff;
    /* Efecto "Glitch" o Sombra sólida */
    text-shadow: 5px 5px 0px rgba(0,0,0,0.5);
    word-break: break-word; /* Evita desbordamiento en móvil */
}

/* 3. HUD de Misión (Grid de datos) */
.mission-hud {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 10px;
}

.hud-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 20px;
    border-radius: 4px; /* Bordes ligeramente duros */
    backdrop-filter: blur(5px);
    display: flex;
    flex-direction: column;
    min-width: 100px;
}

.hud-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.hud-value {
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hud-value i { color: var(--color-neon); }

/* 4. Descripción Transparente (Glassmorphism) */
.hero-brief-glass {
    max-width: 700px;
    background: rgba(0, 0, 0, 0.4);
    border-left: 4px solid var(--color-neon); /* Acento de marca */
    padding: 15px 20px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin: 10px 0 20px 0;
}

.hero-brief-glass p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #e0e0e0;
}

/* 5. Barra de Herramientas */
.hero-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 20px;
}

.social-share {
    display: flex;
    align-items: center;
    gap: 15px;
}

.share-label {
    font-size: 0.9rem;
    color: #ccc;
    font-weight: 500;
}

.btn-social {
    color: #fff;
    font-size: 1.2rem;
    transition: transform 0.2s, color 0.2s;
    padding: 5px;
}

.btn-social:hover {
    color: var(--color-neon);
    transform: translateY(-3px);
}

.btn-notebook {
    background: var(--color-neon);
    color: #000; /* Contraste negro sobre naranja */
    border: none;
    padding: 12px 25px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.3s, box-shadow 0.3s;
    border-radius: 2px; /* Brutal = poco radio */
}

.btn-notebook:hover {
    background: #fff;
    box-shadow: 0 0 15px var(--color-neon);
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 768px) {
    .hero-mission {
        align-items: center; /* Centrar verticalmente en móvil */
        height: auto;
        min-height: 100vh; /* Ocupar pantalla completa */
        padding-top: 80px; /* Espacio para header */
    }
    
    .hero-mission__content {
        gap: 15px;
    }

    .hero-title {
        font-size: 3.5rem; /* Ajuste específico móvil */
    }

    .hero-brief-glass {
        font-size: 1rem;
        background: rgba(0, 0, 0, 0.6); /* Más oscuro para leer mejor en móvil */
    }

    .hero-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .btn-notebook {
        width: 100%;
        justify-content: center;
    }
}

/* --- 1. HERO TACTICAL V7 (SIEMPRE OSCURO + TÍTULO CONTROLADO) --- */
/* Estos estilos ignoran el modo claro para mantener el drama visual */

.hero-tactical {
    position: relative; width: 100%; min-height: 85vh;
    display: flex; align-items: center; margin-top: -60px;
    padding: 100px 0 60px; overflow: hidden;
    color: #fff !important; /* Forzar texto blanco siempre */
    content-visibility: auto; /* Mejora rendimiento */
    contain: layout paint; /* Aísla el renderizado */
}

.hero-bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
    filter: brightness(0.5) contrast(1.1);
}

.hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    background: radial-gradient(circle at top left, rgba(0,0,0,0.2), #000);
    opacity: 0.8;
}

.hero-grid {
    position: relative; z-index: 2; width: 100%;
    /* AJUSTE 1: Damos más espacio a la izquierda (1.5fr) para títulos largos */
    display: grid; grid-template-columns: 1.5fr 0.8fr;
    gap: 60px; align-items: center;
}

/* Textos Hero (Forzados a blanco) */
.hero-col-left { color: #fff !important; }

.hero-loc {
    color: var(--color-primary); font-family: var(--font-subheading);
    font-weight: 900; letter-spacing: 2px; margin-bottom: 15px;
    text-transform: uppercase; font-size: 0.9rem;
    display: flex; align-items: center; gap: 8px;
}

/* AJUSTE 2: TÍTULO CONTROLADO */
.hero-title {
    font-family: var(--font-heading);
    
    /* Clamp más suave: Mínimo 2.5rem, Ideal 4.5vw, Máximo 4.5rem */
    /* Esto evita que títulos largos como "La Ruta Prohibida..." se salgan */
    font-size: clamp(2.5rem, 4.5vw, 4.5rem); 
    
    line-height: 1.1; /* Un poco más de aire entre líneas */
    color: #fff !important;
    text-transform: uppercase; margin-bottom: 40px;
    text-shadow: 5px 5px 0px rgba(0,0,0,0.8);
    
    /* Seguridad extra */
    word-break: normal; 
    overflow-wrap: break-word; 
    hyphens: manual;
}

/* ======================================================= */
/* === HERO TACTICAL V7.5 (MIXTO: CRISTAL + SÓLIDO)    === */
/* ======================================================= */

/* 1. HUD STATS (CAJAS DE CRISTAL / GLASSMORPHISM) */
/* Solo cambiamos esto para que sea elegante y traslúcido */
.hero-specs-grid { 
    display: flex; gap: 20px; flex-wrap: wrap; 
}

.spec-box {
    /* Efecto Cristal */
    background: rgba(255, 255, 255, 0.05); /* Muy transparente */
    backdrop-filter: blur(10px);           /* Desenfoque del fondo */
    -webkit-backdrop-filter: blur(10px);
    
    /* Bordes sutiles con luz */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.25); /* Luz arriba */
    border-left: 1px solid rgba(255, 255, 255, 0.2); /* Luz izquierda */
    border-radius: 8px;
    
    padding: 15px 20px; 
    min-width: 120px;
    display: flex; flex-direction: column; gap: 5px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.spec-box:hover {
    transform: translateY(-5px);
    /* Al hacer hover se ilumina el borde en naranja */
    border-color: var(--color-primary);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2), 0 0 15px rgba(249, 115, 22, 0.2);
}

.spec-label {
    font-size: 0.7rem; 
    color: var(--color-primary);
    text-transform: uppercase; 
    font-weight: bold; 
    letter-spacing: 1px;
}

.spec-val {
    font-family: var(--font-heading);
    font-size: 1.5rem; 
    color: #fff !important; /* Blanco siempre */
    line-height: 1; 
    text-transform: uppercase;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* 2. CARD DERECHA (SÓLIDA OSCURA - INTACTA) */
/* Este bloque es EXACTAMENTE el que me pasaste */
.mission-report-card {
    background: rgba(20, 20, 20, 0.9); /* Gris muy oscuro fijo */
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(15px);
    border-top: 4px solid var(--color-primary);
    padding: 30px; 
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    color: #fff !important;
}

.report-header {
    font-family: var(--font-heading); 
    font-size: 1.5rem; 
    color: #fff !important; 
    margin-bottom: 20px;
    text-transform: uppercase; 
    border-bottom: 1px dashed rgba(255,255,255,0.2);
    padding-bottom: 15px;
}

.report-body {
    color: #ddd !important; 
    font-size: 1rem; 
    line-height: 1.6;
    max-height: 120px; 
    overflow: hidden; 
    position: relative;
    transition: max-height 0.5s ease;
}

/* Gradiente de desvanecimiento siempre negro */
.report-body::after {
    content: ''; 
    position: absolute; bottom: 0; left: 0; 
    width: 100%; height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(20,20,20,1));
    transition: opacity 0.3s;
}
.report-body.expanded { max-height: 1000px; }
.report-body.expanded::after { opacity: 0; pointer-events: none; }

.btn-expand-report {
    background: none; border: none; 
    color: var(--color-primary);
    font-weight: bold; cursor: pointer; margin-top: 15px;
    font-family: var(--font-subheading); text-transform: uppercase;
    font-size: 0.85rem; padding: 0;
}
.btn-expand-report:hover { color: #fff !important; }

/* 3. FOOTER ACCIONES (INTACTO) */
.report-actions {
    margin-top: 30px; padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex; justify-content: space-between; align-items: center;
}

.share-group { 
    display: flex; align-items: center; gap: 15px; 
    font-size: 0.85rem; 
    color: #aaa !important; 
    font-weight: bold; 
}

.share-icons a { 
    color: #fff !important; 
    font-size: 1.2rem; margin-right: 15px; transition: color 0.2s; 
}
.share-icons a:hover { color: var(--color-primary) !important; }

.btn-save-mission {
    background: transparent; border: none; padding: 0;
    color: #fff !important; 
    font-family: var(--font-subheading);
    font-weight: 900; font-size: 0.95rem; cursor: pointer;
    text-transform: uppercase; letter-spacing: 1px;
    display: flex; align-items: center; gap: 10px;
    transition: opacity 0.2s;
}
.btn-save-mission i { color: var(--color-primary); font-size: 1.4rem; }
.btn-save-mission:hover { opacity: 0.8; }

/* --- RESPONSIVE MOBILE HERO --- */
@media (max-width: 992px) {
    .hero-tactical { padding-top: 100px; height: auto; align-items: flex-start; }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-col-left { text-align: center; }
    .hero-loc { justify-content: center; }
    
    /* AJUSTE TÍTULO MÓVIL: Evita rotura de palabras */
    .hero-title { 
        font-size: 2.8rem; /* Tamaño seguro */
        text-align: center; margin-bottom: 30px; 
        word-wrap: normal;
    }
    
    .hero-specs-grid { justify-content: center; }
    .spec-box { flex: 1; min-width: 100px; text-align: center; }
    .mission-report-card { margin: 0 -10px; border-radius: 0; border-left: none; border-right: none; }
    .report-actions { flex-direction: column; gap: 20px; align-items: center; text-align: center; }
}


/* --- 2. ZIG-ZAG HYBRID V8 (ADAPTABLE AL TEMA) --- */
/* Aquí sí usamos variables para que el contenido cambie con el tema */

.guide-container {
    max-width: 1300px; margin: 0 auto; padding: 60px 20px;
    display: grid; grid-template-columns: 1fr 320px; gap: 60px;
}
@media (max-width: 1024px) { .guide-container { grid-template-columns: 1fr; } }

.stops-feed { display: flex; flex-direction: column; gap: 80px; }

.stop-card-v8 {
    display: flex; flex-direction: column; gap: 30px;
    padding-bottom: 40px; border-bottom: 1px solid var(--color-border);
}
.stop-card-v8:last-child { border-bottom: none; }

.stop-top-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

@media (min-width: 768px) {
    .stop-card-v8:nth-child(even) .stop-top-row { direction: rtl; }
    .stop-card-v8:nth-child(even) .stop-data-col { direction: ltr; text-align: left; }
    .stop-card-v8:nth-child(even) .stop-copyright { text-align: left; }
}

.stop-img-frame {
    width: 100%; aspect-ratio: 467/300; position: relative;
    overflow: hidden; border-radius: 4px; 
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
}
.stop-img-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.stop-card-v8:hover img { transform: scale(1.05); }

.stop-copyright { 
    margin-top: 8px; font-size: 0.75rem; 
    color: var(--color-text-secondary); text-align: right; font-family: monospace; 
}

/* DATOS PARADA */
.stop-data-col { display: flex; flex-direction: column; justify-content: center; height: 100%; }

.stop-number-outline {
    font-family: var(--font-heading); font-size: 5rem; line-height: 0.8;
    color: transparent; 
    -webkit-text-stroke: 2px var(--color-primary); /* Siempre Naranja */
    display: block; margin-bottom: 5px; opacity: 0.8;
}

.stop-title-main {
    font-family: var(--font-heading); font-size: 2.2rem; color: #fff;
    contain: layout;
    color: var(--color-text-primary); /* Adaptable (Negro en Light, Blanco en Dark) */
    line-height: 1; text-transform: uppercase; margin: 0 0 15px 0;
}

.stop-address-link {
    color: var(--color-text-secondary); text-decoration: none; font-size: 0.9rem;
    border-bottom: 1px dashed var(--color-border); padding-bottom: 2px; 
    display: inline-block; margin-bottom: 20px;
}
.stop-address-link:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* HUD Grid (Info + Acciones) */
.stop-hud-grid {
    background: var(--color-surface); /* Adaptable */
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    padding: 15px; display: flex; gap: 20px; align-items: center; justify-content: space-between;
    border-radius: 4px;
}

.hud-info-lines { 
    display: flex; flex-direction: column; gap: 8px; 
    font-size: 0.9rem; color: var(--color-text-secondary); 
}
.hud-line i { color: var(--color-primary); width: 18px; text-align: center; margin-right: 5px; }
.hud-line strong { color: var(--color-text-primary); }

.hud-actions-col { 
    display: flex; flex-direction: column; gap: 15px; align-items: center; 
    padding-left: 15px; border-left: 1px solid var(--color-border); 
}

/* Iconos de Acción (Naranja siempre visible) */
.btn-icon-action {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 1.8rem; 
    color: var(--color-text-secondary); /* Gris en reposo */
    transition: all 0.2s;
}
.btn-icon-action:hover { color: var(--color-primary); } /* Naranja en hover */
.btn-icon-action.added { color: var(--color-primary); }

/* TEXTO DESCRIPCIÓN (Adaptable) */
.stop-bottom-row { width: 100%; margin-top: 20px; }
.stop-narrative { position: relative; }

.narrative-content {
    font-size: 1.05rem; line-height: 1.8; 
    color: var(--color-text-secondary); /* Texto legible adaptable */
    overflow: hidden; transition: max-height 0.5s ease;
}
.narrative-content strong { color: var(--color-text-primary); } /* Negritas adaptables */

.narrative-content.collapsed {
    max-height: 120px;
    /* Gradiente adaptable hacia el color de fondo */
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Experiencia Canalla (Caja) */
.canalla-box {
    margin-top: 30px; padding: 25px; 
    background: var(--color-surface); 
    border: 1px dashed var(--color-primary); border-radius: 8px; position: relative;
    box-shadow: var(--shadow-md);
}
.canalla-title {
    font-family: var(--font-subheading); color: #000; background: var(--color-primary);
    display: inline-block; padding: 4px 10px; font-size: 0.85rem; border-radius: 4px;
    position: absolute; top: -14px; left: 20px; font-weight: bold;
}

.btn-read-more {
    background: none; border: none; color: var(--color-primary);
    font-weight: bold; font-size: 0.9rem; padding: 15px 0; width: 100%; text-align: left;
    cursor: pointer; text-transform: uppercase; letter-spacing: 1px;
    display: flex; align-items: center; gap: 5px; margin-top: 10px;
}
.btn-read-more:hover { text-decoration: underline; }

/* SIDEBAR (Adaptable) */
.sidebar-sticky { position: sticky; top: 100px; height: fit-content; }
.sidebar-module {
    background: var(--color-surface); border: 1px solid var(--color-border);
    padding: 20px; margin-bottom: 20px; border-radius: 8px;
    box-shadow: var(--shadow-md);
}
.sidebar-head {
    font-family: var(--font-subheading); color: var(--color-primary);
    border-bottom: 1px solid var(--color-border); padding-bottom: 10px; margin-bottom: 15px;
    text-transform: uppercase; font-weight: bold; letter-spacing: 1px;
}
.sidebar-content li { 
    margin-bottom: 10px; color: var(--color-text-secondary); 
    font-size: 0.9rem; display: flex; gap: 10px; 
}
.sidebar-content i { color: var(--color-primary); margin-top: 4px; }

/* RESPONSIVE */
@media (max-width: 992px) {
    .hero-tactical { padding-top: 100px; height: auto; align-items: flex-start; }
    .hero-grid { grid-template-columns: 1fr; gap: 40px; }
    .hero-col-left { text-align: center; }
    .hero-loc { justify-content: center; }
    .hero-title { font-size: 2.8rem; text-align: center; margin-bottom: 30px; word-wrap: normal; }
    .hero-specs-grid { justify-content: center; }
    .spec-box { flex: 1; min-width: 100px; text-align: center; }
    .mission-report-card { margin: 0 -10px; border-radius: 0; border-left: none; border-right: none; }
    .report-actions { flex-direction: column; gap: 20px; align-items: center; text-align: center; }

    .stop-top-row { grid-template-columns: 1fr; gap: 20px; }
    .stop-card-v8:nth-child(even) .stop-top-row { direction: ltr; }
    .stop-hud-grid { flex-direction: column; align-items: flex-start; gap: 15px; }
    .hud-actions-col { 
        flex-direction: row; width: 100%; justify-content: flex-start; 
        padding-left: 0; border-left: none; border-top: 1px solid var(--color-border); 
        padding-top: 15px; 
    }
    .btn-icon-action { font-size: 2rem; margin-right: 20px; }
}

/* ======================================================= */
/* === 7. NAVEGACIÓN ENTRE MISIONES (FOOTER GUÍA)      === */
/* ======================================================= */

.related-missions-nav {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--color-border);
    margin-top: 0; /* Pegado al final del contenido */
}

@media (min-width: 768px) {
    .related-missions-nav { grid-template-columns: 1fr 1fr; }
}

.mission-link-card {
    position: relative;
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    overflow: hidden;
    background-color: #000;
    border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
    .mission-link-card { border-bottom: none; }
    .mission-link-card:first-child { border-right: 1px solid var(--color-border); }
}

.mission-link-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    opacity: 0.4; transition: transform 0.5s ease, opacity 0.3s;
    filter: grayscale(100%);
}

.mission-link-content {
    position: relative; z-index: 2;
    text-align: center; padding: 20px;
    color: #fff;
    transition: transform 0.3s ease;
}

.mission-link-label {
    display: block;
    font-family: var(--font-subheading);
    font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px;
    color: var(--color-primary); margin-bottom: 10px;
    font-weight: bold;
}

.mission-link-title {
    font-family: var(--font-heading);
    font-size: 1.8rem; line-height: 1;
    text-transform: uppercase; margin: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}

.mission-arrow {
    font-size: 1.5rem; margin-top: 15px; color: #fff;
    transition: transform 0.3s; display: inline-block;
}

/* Hover Effects */
.mission-link-card:hover .mission-link-bg {
    transform: scale(1.1);
    opacity: 0.6;
    filter: grayscale(0%);
}
.mission-link-card:hover .mission-link-content {
    transform: translateY(-5px);
}
.mission-link-card.prev:hover .mission-arrow { transform: translateX(-10px); }
.mission-link-card.next:hover .mission-arrow { transform: translateX(10px); }

/* --- FIX ACCESIBILIDAD FOCUS --- */
button:focus-visible, a:focus-visible, select:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ======================================================= */
/* === 2.5 SECCIÓN MANIFIESTO (Narrativa Expandible)   === */
/* ======================================================= */

.mission-manifesto {
    margin: 40px auto 60px; /* Separación visual */
    max-width: 900px;
    position: relative;
    padding: 0 20px;
}

.manifesto-title {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--color-primary); /* Naranja marca */
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.manifesto-body {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--color-text-primary);
}

.manifesto-body p {
    margin-bottom: 20px;
}

/* Lógica de Colapso */
.manifesto-content {
    overflow: hidden;
    position: relative;
    transition: max-height 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Estado Colapsado */
.manifesto-content.collapsed {
    max-height: 250px; /* Altura inicial visible (aprox 2 párrafos) */
    
    /* Máscara de desvanecimiento hacia el color de fondo */
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

/* Botón de Acción */
/* Botón de Acción "Informe" (Estilo Terminal Táctico) */
.btn-read-manifesto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 10px auto 0; /* Centrado */
    padding: 15px;
    
    background: transparent; /* Sin fondo */
    border: none;            /* Sin bordes */
    
    /* Tipografía de impacto */
    color: var(--color-primary); 
    font-family: var(--font-subheading);
    font-weight: 900;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px; /* Aireado para elegancia */
    
    cursor: pointer;
    transition: all 0.3s ease-out;
}

.btn-read-manifesto:hover {
    /* Efecto: Se separa y brilla */
    letter-spacing: 4px; 
    text-shadow: 0 0 15px rgba(249, 115, 22, 0.6);
    transform: scale(1.05);
}

.btn-read-manifesto i {
    font-size: 0.9rem;
    transition: transform 0.3s;
}

.btn-read-manifesto:hover i {
    transform: translateY(3px); /* La flecha baja un poco */
}

/* Ajuste Móvil */
@media (max-width: 768px) {
    .manifesto-title { font-size: 1.8rem; text-align: center; }
    .manifesto-body { font-size: 1rem; text-align: left; }
    .manifesto-content.collapsed { max-height: 300px; }
}

/* ======================================================= */
/* === MARCA DE AGUA V3 (PEQUEÑA Y ELEGANTE)           === */
/* ======================================================= */

.watermark-stacked {
    position: absolute;
    bottom: 12px;
    right: 15px;
    z-index: 2;
    pointer-events: none;
    
    display: flex;
    align-items: center;
    gap: 3px;
    
    font-family: var(--font-heading);
    font-weight: 900;
    line-height: 0.9;
    
    /* Sombra más suave para tamaño pequeño */
    filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.8));
    
    opacity: 0.8;
    transition: all 0.3s ease;
}

.stop-card-v8:hover .watermark-stacked {
    opacity: 1;
    transform: scale(1.05);
}

/* --- CORCHETES [ ] (Naranjas y más finos) --- */
.wm-bracket {
    font-size: 1.8rem; /* Reducido de 3rem a 1.8rem */
    color: transparent;
    -webkit-text-stroke: 2px var(--color-primary); /* Trazo más fino */
    margin-top: -3px;
}

/* --- CONTENEDOR TEXTO --- */
.wm-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- ESTILOS DE TEXTO (Blancos) --- */
.wm-line-top, .wm-line-bottom {
    font-size: 0.85rem; /* Reducido de 1.4rem a 0.85rem */
    color: transparent;
    -webkit-text-stroke: 0.8px #fff; /* Trazo muy fino y elegante */
}

.wm-line-top { letter-spacing: 2px; }
.wm-line-bottom { letter-spacing: 1px; }

/* --- LAS "A" (Naranjas) --- */
.wm-accent {
    -webkit-text-stroke: 0.8px var(--color-primary);
}

/* --- RESPONSIVE (Móvil) --- */
@media (max-width: 480px) {
    /* Un pelín más pequeño en móvil para no tapar foto */
    .wm-bracket { font-size: 1.5rem; -webkit-text-stroke: 1.5px var(--color-primary); }
    .wm-line-top, .wm-line-bottom { font-size: 0.7rem; -webkit-text-stroke: 0.6px #fff; }
    .wm-accent { -webkit-text-stroke: 0.6px var(--color-primary); }
}

/* ======================================================= */
/* === 15. SECCIÓN FOOTER: DESTINOS (INTEGRADA)        === */
/* ======================================================= */

.footer-destinations {
    border-top: 1px solid var(--color-border);
    padding-top: 40px;
    margin-top: 40px;
}

.footer-destinations__title {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    color: var(--color-text-primary);
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-destinations__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (min-width: 768px) {
    .footer-destinations__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
    .footer-destinations__grid { grid-template-columns: repeat(5, 1fr); }
}

/* Item de País */
.footer-destinations__item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    padding: 10px;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.footer-destinations__item:hover {
    background: rgba(255,255,255,0.05);
}

.footer-destinations__item-title {
    font-family: var(--font-subheading);
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-text-primary);
    text-transform: uppercase;
}

.footer-destinations__item:hover .footer-destinations__item-title {
    color: var(--color-primary);
}

.footer-destinations__item-count {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-family: monospace;
    margin-top: 4px;
    display: block;
}


/* ======================================================= */
/* === 9. BARRA MÓVIL "CENTRO DE MANDO" (5 COLUMNAS)   === */
/* ======================================================= */

@media (max-width: 1023px) {
    .mobile-bottom-kit {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1.2fr 1fr 1fr; /* Central más ancho */
        align-items: center; 
        
        position: fixed; bottom: 0; left: 0; width: 100%;
        height: 65px; /* Altura cómoda */
        
        background-color: var(--color-surface);
        border-top: 1px solid var(--color-border);
        z-index: 99999;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
        
        /* Permitir que el botón central sobresalga */
        overflow: visible !important; 
    }

    /* ESTILO BOTONES ESTÁNDAR (Icono + Texto) */
    .kit-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100%;
        gap: 4px; /* Espacio entre icono y texto */
        
        background: none; border: none; 
        color: var(--color-text-secondary);
        text-decoration: none;
        cursor: pointer;
        padding: 5px 0;
        transition: color 0.2s;
    }
    
    .kit-nav-item i {
        font-size: 1.3rem;
        margin-bottom: 2px;
    }
    
    .kit-nav-label {
        font-size: 0.65rem;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.5px;
        line-height: 1;
    }

    .kit-nav-item:hover, .kit-nav-item.active {
        color: var(--color-primary);
    }

    /* BOTÓN CENTRAL FLOTANTE (CHATBOT) */
    .kit-nav-center {
        position: relative;
        height: 100%;
        display: flex; 
        justify-content: center;
        align-items: flex-end; /* Alineado abajo */
        padding-bottom: 10px;
    }

    .chatbot-orb {
        position: absolute;
        bottom: 15px; /* Lo subimos para que flote */
        width: 60px; height: 60px;
        
        background: var(--color-primary);
        border-radius: 50%;
        
        /* Borde del color del fondo para "recortar" visualmente la barra */
        border: 6px solid var(--color-surface); 
        
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 -5px 15px rgba(0,0,0,0.15);
        color: var(--color-text-inverted); 
        font-size: 1.6rem;
        cursor: pointer;
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 10;
    }
    
    .chatbot-orb:active { transform: scale(0.95); }
    
    /* Ajuste del Body para no tapar contenido */
    body { padding-bottom: 80px; }
}

/* Ocultar en PC */
@media (min-width: 1024px) {
    .mobile-bottom-kit { display: none !important; }
}

/* ======================================================= */
/* === 15. SECCIÓN FOOTER: DESTINOS (LIMPIA)           === */
/* ======================================================= */

.footer-destinations {
    border-top: 1px solid var(--color-border);
    padding-top: 40px;
    margin-top: 40px;
}

.footer-destinations__title {
    font-family: var(--font-heading);
    font-size: 2rem; 
    color: var(--color-text-primary);
    margin-bottom: 25px;
    text-transform: uppercase;
}

.footer-destinations__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (min-width: 768px) {
    .footer-destinations__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
    .footer-destinations__grid { grid-template-columns: repeat(5, 1fr); }
}

/* ITEM INDIVIDUAL (Sin efectos de caja) */
.footer-destinations__item {
    display: block;
    text-decoration: none;
    margin-bottom: 15px;
    /* Quitamos transiciones de movimiento o fondo */
    transition: none; 
    border: none;
    background: transparent;
}

/* TÍTULO DEL PAÍS */
.footer-destinations__item-title {
    font-family: var(--font-subheading);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--color-text-primary);
    margin: 0;
    /* Solo animamos el color del texto */
    transition: color 0.2s ease;
}

/* CONTADOR */
.footer-destinations__item-count {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    display: block;
    margin-top: 2px;
}

/* HOVER: SOLO CAMBIO DE COLOR DE TEXTO */
/* Aseguramos que no haya movimiento ni fondo */
.footer-destinations__item:hover {
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.footer-destinations__item:hover .footer-destinations__item-title {
    color: var(--color-primary);
}

/* ========================================================================= */
/* === 16. BLOQUE DE REPARACIÓN TOTAL: WIDGETS, SIDEBAR Y MÓVIL V.FINAL  === */
/* ========================================================================= */

/* ----------------------------------------------------------------- */
/* 1. SIDEBAR (PEGAMENTO LATERAL) - ESTILOS RECUPERADOS              */
/* ----------------------------------------------------------------- */
@media (min-width: 1024px) {
    .sidebar-sticky { 
        position: sticky; 
        top: 140px; /* Debajo del Header + Barra Repsol */
        height: fit-content; 
        display: flex; 
        flex-direction: column; 
        gap: 15px;
        z-index: 850;
    }
}
@media (max-width: 1023px) {
    .sidebar-sticky { display: none !important; }
}

/* Acordeones del Sidebar */
.sidebar-accordion {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px; overflow: hidden;
    transition: all 0.3s ease;
}
.sidebar-accordion.active {
    border-color: var(--color-primary);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.acc-head {
    padding: 15px; cursor: pointer;
    background: var(--color-surface);
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-subheading); font-weight: bold;
    color: var(--color-text-secondary);
    text-transform: uppercase; font-size: 0.9rem; letter-spacing: 1px;
    border-bottom: 1px solid transparent;
}
.sidebar-accordion.active .acc-head {
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    background: rgba(249, 115, 22, 0.05);
}
.acc-icon { transition: transform 0.3s; }
.sidebar-accordion.active .acc-icon { transform: rotate(180deg); }

.acc-body {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    background: var(--color-background);
}
.sidebar-accordion.active .acc-body { max-height: 1000px; }

/* Listas internas del sidebar */
.sidebar-list-clean { list-style: none; padding: 15px; margin: 0; }
.sidebar-list-clean li { margin-bottom: 10px; display: flex; gap: 10px; font-size: 0.9rem; color: var(--color-text-secondary); }

/* ----------------------------------------------------------------- */
/* 2. WIDGET "PLAN DE FUGA" (PC) - POSICIÓN CORREGIDA                */
/* ----------------------------------------------------------------- */
@media (min-width: 1024px) {
    .trip-widget-desktop-container {
        position: fixed; 
        bottom: 0 !important; /* PEGADO AL SUELO */
        left: 20px !important; /* PEGADO A LA IZQUIERDA */
        right: auto !important; 
        
        width: 320px;
        background-color: var(--color-surface); 
        border: 1px solid var(--color-border);
        border-bottom: none; 
        border-radius: 8px 8px 0 0;
        box-shadow: 0 -5px 25px rgba(0,0,0,0.4); /* Sombra fuerte para destacar */
        
        z-index: 1000 !important; /* ENCIMA de la barra negra (que es 800) */
        
        transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        transform: translateY(calc(100% - 55px)); /* Solo asoma la cabecera */
        display: block !important;
    }
    
    .trip-widget-desktop-container.is-expanded {
        transform: translateY(0); /* Sube completo */
    }

    .trip-widget-header {
        height: 55px; padding: 0 15px;
        display: flex; align-items: center; justify-content: space-between;
        cursor: pointer; background: var(--color-surface);
        color: var(--color-text-primary); font-weight: bold;
    }
    
    .trip-widget-body { height: 400px; display: flex; flex-direction: column; background: var(--color-background); }
    .trip-list-container { flex-grow: 1; overflow-y: auto; padding: 10px; }
    .trip-widget-footer { padding: 15px; border-top: 1px solid var(--color-border); background: var(--color-surface); }
}

@media (max-width: 1023px) {
    .trip-widget-desktop-container { display: none !important; }
}


/* 4. REDISEÑO DE LAS TARJETAS DE ITEM (PLAN ITEMS) */
.plan-item-card {
    background: var(--color-background); /* Fondo más oscuro para contraste */
    border: 1px solid var(--color-border);
    border-radius: 12px; /* Más redondeado */
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    transition: transform 0.2s, border-color 0.2s;
}

.plan-item-card:hover {
    border-color: var(--color-text-secondary); /* Sutil highlight */
}

/* Imagen Miniatura */
.plan-thumb {
    width: 60px; 
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.1);
}
.plan-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}

/* Info Texto */
.plan-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* Para que el texto se corte con ellipsis */
}

.plan-stop-title {
    font-family: var(--font-subheading);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.plan-stop-meta {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    font-family: monospace;
}

/* Botón Papelera */
.btn-trash-tactical {
    background: rgba(255,255,255,0.05);
    border: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    color: #ef4444; /* Rojo alerta */
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.btn-trash-tactical:hover {
    background: #ef4444;
    color: #fff;
    transform: scale(1.1);
}

/* 5. FOOTER DEL CAJÓN (Botón Ver Ruta) */
.plan-actions {
    padding: 20px 25px 40px 25px; /* Extra padding abajo para móviles */
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.plan-actions .button--primary {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(249, 115, 22, 0.3);
}

/* 6. BACKDROP (Fondo Oscuro Detrás) */
/* Aseguramos que exista visualmente si el JS lo crea */
.filters-backdrop, .drawer-backdrop {
    background: rgba(0,0,0,0.85) !important; /* Más oscuro */
    backdrop-filter: blur(5px);
}

/* ----------------------------------------------------------------- */
/* 4. BARRA DE NAVEGACIÓN MÓVIL (FIXED BOTTOM)                       */
/* ----------------------------------------------------------------- */
@media (max-width: 1023px) {
    .mobile-bottom-kit {
        display: flex !important;
        position: fixed; bottom: 0; left: 0; width: 100%; height: 60px;
        background: var(--color-surface); border-top: 1px solid var(--color-border);
        z-index: 999999 !important;
        justify-content: space-around; align-items: center;
        padding-bottom: env(safe-area-inset-bottom);
    }
    body { padding-bottom: 70px !important; }
}
@media (min-width: 1024px) {
    .mobile-bottom-kit { display: none !important; }
}

/* ================================================================= */
/* === 5. CONSOLA DE MANDO PC (NAV MISIONES - GLASSMORPHISM)     === */
/* ================================================================= */

.desktop-mission-console {
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 70px;
    
    /* CAPAS: Debajo del Widget Plan de Fuga (1000) */
    z-index: 800; 
    
    /* ESTILO BASE (MODO OSCURO - DARK GLASS) */
    background: rgba(9, 9, 11, 0.85); /* Negro Zinc semitransparente */
    backdrop-filter: blur(12px);      /* Efecto desenfoque */
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    
    display: flex; 
    align-items: center;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.desktop-mission-console .freq-container {
    width: 100%; 
    max-width: 100%; 
    display: flex; 
    justify-content: space-between;
    
    /* ESPACIO VITAL: */
    /* 340px a la izquierda para que no lo tape el Plan de Fuga */
    padding-left: 340px; 
    /* 100px a la derecha para no chocar con botones flotantes */
    padding-right: 100px; 
}

/* ENLACES (ESTILO BASE) */
.desktop-mission-console .freq-link {
    display: flex; 
    align-items: center; 
    gap: 15px;
    text-decoration: none;
    
    /* Color Gris Suave en reposo */
    color: rgba(255, 255, 255, 0.5); 
    transition: all 0.3s ease;
    max-width: 45%;
}

.desktop-mission-console .freq-link i {
    font-size: 1.1rem;
    color: var(--color-primary); /* Naranja siempre */
    transition: transform 0.3s ease;
}

/* HOVER (MODO OSCURO) */
.desktop-mission-console .freq-link:hover {
    color: #fff; /* Blanco brillante */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.desktop-mission-console .freq-link.prev:hover i { transform: translateX(-5px); }
.desktop-mission-console .freq-link.next:hover i { transform: translateX(5px); }

/* TEXTOS */
.desktop-mission-console .freq-data {
    display: flex; flex-direction: column; justify-content: center;
}
.desktop-mission-console .freq-label {
    font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase;
    font-family: var(--font-body); opacity: 0.7; margin-bottom: 2px;
}
.desktop-mission-console .freq-title {
    font-family: var(--font-subheading); font-size: 0.95rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}
.desktop-mission-console .freq-signal { opacity: 0.2; } /* Icono central sutil */

/* ----------------------------------------------------------------- */
/* === AJUSTES DE MODO CLARO (LIGHT THEME OVERRIDES)             === */
/* ----------------------------------------------------------------- */
body.light-theme .desktop-mission-console {
    /* Fondo Blanco Cristal */
    background: rgba(255, 255, 255, 0.9); 
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-theme .desktop-mission-console .freq-link {
    /* Texto Gris Oscuro en reposo */
    color: var(--color-text-secondary); 
}

body.light-theme .desktop-mission-console .freq-link:hover {
    /* Naranja corporativo en hover (sin brillo de neón) */
    color: var(--color-primary); 
    text-shadow: none; 
}

body.light-theme .desktop-mission-console .freq-signal {
    opacity: 0.1; color: #000;
}

/* ----------------------------------------------------------------- */
/* === RESPONSIVE: OCULTAR SIEMPRE EN MÓVIL                      === */
/* ----------------------------------------------------------------- */
@media (max-width: 1023px) {
    .desktop-mission-console { display: none !important; }
}

/* ======================================================= */
/* === RECUPERACIÓN DE ESTILOS PERDIDOS (COSMÉTICA)    === */
/* ======================================================= */

/* --- 2. ESTILOS DEL KIT DE AHORRO (BOTONES) --- */
.tools-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 columna por defecto */
    gap: 10px;
    padding: 10px 0;
}

.tool-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background-color: rgba(255, 255, 255, 0.03); /* Fondo sutil */
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.tool-btn i {
    color: var(--color-primary);
    font-size: 1.1rem;
    width: 20px; /* Ancho fijo para alinear texto */
    text-align: center;
}

.tool-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
    background-color: rgba(249, 115, 22, 0.05); /* Toque naranja fondo */
    transform: translateX(3px);
}


/* --- 3. ESTILOS NAVEGACIÓN MÓVIL (EN EL CAJÓN) --- */
.drawer-nav-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}

.drawer-nav-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.2s;
}

.drawer-nav-btn i { color: var(--color-primary); }

.drawer-nav-btn span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.drawer-nav-btn:hover {
    border-color: var(--color-primary);
    background: rgba(249, 115, 22, 0.1);
}

.drawer-nav-btn.prev { flex-direction: row; text-align: left; }
.drawer-nav-btn.prev span { margin-left: 8px; }

.drawer-nav-btn.next { flex-direction: row; text-align: right; }
.drawer-nav-btn.next span { margin-right: 8px; flex-grow: 1; }

.drawer-nav-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(100%);
    justify-content: center;
}

/* ======================================================= */
/* === CORRECCIÓN DE CAPAS (Z-INDEX HIERARCHY)         === */
/* ======================================================= */

/* 1. Sidebar: Nivel bajo (para que pase POR DEBAJO de las barras fijas) */
@media (min-width: 1024px) {
    .sidebar-sticky {
        z-index: 40 !important; 
        position: sticky;
        top: 150px; /* Ajuste para que no choque al inicio */
    }
}

/* 2. Barra Consola Inferior (Misión Anterior/Siguiente): Nivel Medio-Alto */
.desktop-mission-console {
    z-index: 800 !important;
}

/* 3. Barra Repsol Superior: Nivel Alto */
#repsol-nav {
    z-index: 950 !important;
}

/* 4. Plan de Fuga (Widget): Nivel Muy Alto */
@media (min-width: 1024px) {
    .trip-widget-desktop-container {
        z-index: 1050 !important;
    }
}

/* ======================================================= */
/* === REPARACIÓN VISUAL SIDEBAR (PEGAMENTO)           === */
/* ======================================================= */

/* 1. Estilo Base del Contenedor Sticky */
@media (min-width: 1024px) {
    .sidebar-sticky {
        position: sticky;
        top: 140px;
        z-index: 50; /* Nivel bajo para que la barra Repsol pase por encima */
        display: flex;
        flex-direction: column;
        gap: 15px;
        transition: opacity 0.4s ease, transform 0.4s ease;
    }
    
    /* CLASE PARA OCULTARLO (Lógica 3ª Parada) */
    .sidebar-sticky.widget-hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateX(50px); /* Se va hacia la derecha */
    }
}

/* 2. Estilo de los Acordeones (Cajas Negras) */
.sidebar-accordion {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    overflow: hidden;
}

.acc-head {
    padding: 12px 15px;
    cursor: pointer;
    background: var(--color-surface);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-subheading);
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-text-secondary);
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}

.acc-head span i { margin-right: 8px; color: var(--color-primary); }

.sidebar-accordion.active .acc-head {
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    background: rgba(249, 115, 22, 0.05);
}

.acc-icon { transition: transform 0.3s; }
.sidebar-accordion.active .acc-icon { transform: rotate(180deg); }

.acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    background: var(--color-background);
}
/* Al activar, damos altura máxima suficiente */
.sidebar-accordion.active .acc-body { max-height: 800px; }

/* 3. Estilos Internos: Listas Limpias */
.sidebar-list-clean {
    list-style: none !important; /* IMPORTANTE: Quita los puntos */
    padding: 15px;
    margin: 0;
}
.sidebar-list-clean li {
    display: flex; 
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.4;
}
.sidebar-list-clean li i { color: var(--color-primary); margin-top: 3px; }

/* 5. Estilos Internos: Kit de Ahorro (Botones) */
.tools-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 15px;
}
.tool-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: 0.8rem; font-weight: bold;
    transition: all 0.2s;
}
.tool-btn i { width: 20px; text-align: center; font-size: 1rem; color: var(--color-primary); }
.tool-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
    transform: translateX(5px);
    background: rgba(249, 115, 22, 0.1);
}

#sidebarTimelineWidget {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: top;
}

/* ======================================================= */
/* === FIX DEFINITIVO TIMELINE (HOJA DE RUTA) V.FINAL  === */
/* ======================================================= */

/* 1. Contenedor de la Lista */
.timeline-nav-list {
    list-style: none !important;
    padding: 10px 0;
    margin: 0 0 0 20px; /* Margen respecto al borde de la caja */
    
    /* La línea vertical (Gris sutil para elegancia) */
    border-left: 2px solid rgba(255, 255, 255, 0.15); 
    
    position: relative;
    /* FIX TIPOGRAFÍA: Usamos la fuente del cuerpo para legibilidad */
    font-family: var(--font-body); 
}

/* 2. El Item Individual */
.timeline-nav-list li {
    position: relative;
    /* Padding-left: Espacio entre la línea y el texto */
    padding: 8px 0 8px 25px; 
    margin-bottom: 2px;
    line-height: 1.4;
}

/* 3. El Círculo (CALIBRADO NO BIZCO) */
.timeline-nav-list li::before {
    content: '';
    position: absolute;
    
    /* CÁLCULO DE ALINEACIÓN EXACTA: */
    /* La línea mide 2px. El punto mide 10px. */
    /* Para centrarlo: left: - (10/2 + 2/2) = -6px */
    left: -6px; 
    
    /* Altura visual: Ajustado para centrarse con la primera línea de texto */
    top: 13px; 
    
    width: 10px;
    height: 10px;
    border-radius: 50%;
    
    /* Estado Normal (Inactivo): Agujero negro con borde gris */
    background-color: var(--color-surface); 
    border: 2px solid var(--color-text-secondary); 
    
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

/* 4. El Enlace (Texto Normal) */
.timeline-nav-list li a {
    text-decoration: none;
    /* Color gris claro para los no seleccionados */
    color: var(--color-text-secondary); 
    font-size: 0.95rem; /* Un pelín más grande para leerse bien */
    font-weight: 500;
    transition: color 0.2s;
    display: block;
}

/* --- ESTADOS ACTIVOS (SELECCIONADO) --- */

/* A. El Círculo Activo (NARANJA RELLENO) */
.timeline-nav-list li.active::before {
    background-color: var(--color-primary); /* Relleno Naranja */
    border-color: var(--color-primary);     /* Borde Naranja */
    
    /* Halo suave naranja alrededor */
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.15); 
    
    transform: scale(1.2); /* Crece un poco */
}

/* B. El Texto Activo (NARANJA Y NEGRILLA) */
.timeline-nav-list li.active a {
    color: var(--color-primary) !important; /* NARANJA OBLIGATORIO */
    font-weight: 700;
    text-shadow: 0 0 10px rgba(0,0,0,0.5); /* Sombra para resaltar sobre fondo */
}

/* --- ESTADOS HOVER (AL PASAR EL RATÓN) --- */

/* Si pasas el ratón por uno inactivo, se ilumina un poco en blanco/gris claro */
.timeline-nav-list li:not(.active):hover::before {
    border-color: var(--color-text-primary);
}
.timeline-nav-list li:not(.active):hover a {
    color: var(--color-text-primary);
}

/* ======================================================= */
/* === SCROLLBAR TÁCTICO (PLAN DE FUGA Y CAJONES)      === */
/* ======================================================= */

/* 1. Definición para Chrome, Safari, Edge */
.trip-list-container::-webkit-scrollbar,
.sidebar-inner::-webkit-scrollbar { /* Por si acaso usas otro contenedor */
    width: 6px; /* Fino y elegante */
}

.trip-list-container::-webkit-scrollbar-track,

.trip-list-container::-webkit-scrollbar-thumb,

/* Hover: Un poco más oscuro al intentar agarrarlo */
.trip-list-container::-webkit-scrollbar-thumb:hover,

/* 2. Definición para Firefox */
.trip-list-container,

/* ======================================================= */
/* === FIX EMERGENCIA: VISIBILIDAD CONTENIDO CAJÓN     === */
/* ======================================================= */

/* Asegurar que el contenido del cajón no esté oculto por CSS heredado */
#drawer-content-kit, 


/* Cuando el JS le pone style="display:block", esto asegura que se vea */
#drawer-content-kit[style*="display: block"],

/* Asegurar que el botón sea pulsable */
.kit-nav-item {
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
}

/* ======================================================= */
/* === 1. FIX: KIT DE AHORRO (SIDEBAR)                 === */
/* ======================================================= */
.tools-grid {
    display: grid !important; /* Fuerza cuadrícula */
    grid-template-columns: 1fr; /* Una columna */
    gap: 10px; /* Espacio entre botones */
    padding: 15px;
}

.tool-btn {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
    line-height: 1.2;
}

.tool-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-text-primary);
    background: rgba(249, 115, 22, 0.1);
    transform: translateX(3px);
}

.tool-btn i {
    color: var(--color-primary);
    font-size: 1.1rem;
    min-width: 20px; /* Alineación fija iconos */
    text-align: center;
}

/* ======================================================= */
/* === 2. NUEVO: HUD MINIMALISTA (Solo Iconos)         === */
/* ======================================================= */
/* Se usa cuando no hay horario/precio/transporte */
.stop-hud-minimal {
    display: flex;
    justify-content: flex-end; /* Botones a la derecha */
    gap: 15px;
    padding-top: 15px;
    margin-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Línea sutil separadora */
}

/* En móvil, los centramos o alineamos a la izquierda */
@media (max-width: 768px) {
    .stop-hud-minimal {
        justify-content: flex-start;
    }
}

/* ======================================================= */
/* === FIX: ALINEACIÓN DE TEXTOS LARGOS EN HUD         === */
/* ======================================================= */

.hud-line {
    display: flex;
    /* ALINEAR ARRIBA: Clave para cuando hay varias horas */
    align-items: flex-start; 
    gap: 12px;
    margin-bottom: 8px;
    font-size: 0.9rem;
    line-height: 1.5; /* Altura de línea para buena lectura */
    color: var(--color-text-secondary);
}

.hud-line i {
    /* El icono se queda fijo arriba, no baja con el texto */
    margin-top: 4px; 
    color: var(--color-primary);
    width: 20px;
    text-align: center;
    flex-shrink: 0; /* Evita que el icono se aplaste */
}

/* ======================================================= */
/* === FIX: HUD TEXTOS LIMPIOS (DEFINITIVO)            === */
/* ======================================================= */

.hud-line {
    display: flex;
    /* Alineación superior para que la primera línea coincida con el icono */
    align-items: flex-start; 
    gap: 15px; 
    margin-bottom: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.hud-line i {
    /* El icono se queda fijo arriba */
    margin-top: 3px; 
    color: var(--color-primary);
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.hud-line strong {
    color: var(--color-text-primary);
    /* Evitamos que "Llegar:" se parta */
    white-space: nowrap; 
}

.hud-line span {
    flex: 1;
    /* Respeta los saltos de línea (\n) que genera el PHP */
    white-space: pre-line; 
    /* Elimina cualquier margen heredado */
    margin: 0; 
}

/* ======================================================= */
/* === HOME: MISSION CARD V6 (TACTICAL TERMINAL)       === */
/* ======================================================= */

.mission-grid__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
@media (min-width: 768px) { .mission-grid__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .mission-grid__grid { grid-template-columns: repeat(4, 1fr); } }

/* --- CONTENEDOR PRINCIPAL --- */
.mission-card-v6 {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #09090b; /* Fondo muy oscuro */
    border: 1px solid #333;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    overflow: hidden;
    
    /* Clip-path para esquina cortada futurista */
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% calc(100% - 20px), 
        calc(100% - 20px) 100%, 
        0 100%
    );
}

.mission-card-v6:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(249, 115, 22, 0.15); /* Glow naranja sutil */
    border-color: var(--color-primary);
}

/* --- 1. PARTE VISUAL (MONITOR) --- */
.card-v6-visual {
    position: relative;
    aspect-ratio: 4/5; /* Formato vertical potente */
    overflow: hidden;
    border-bottom: 2px solid var(--color-primary); /* Línea divisoria neón */
}

.card-v6-img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(100%) contrast(1.1) brightness(0.9); /* Look cámara seguridad */
    transition: filter 0.4s ease, transform 0.4s ease;
}

/* Efecto al pasar el ratón: Color y Zoom */
.mission-card-v6:hover .card-v6-img {
    filter: grayscale(0%) contrast(1) brightness(1);
    transform: scale(1.1);
}

/* HUD OVERLAYS (Decoración sobre la foto) */
.hud-corner {
    position: absolute; width: 20px; height: 20px;
    border: 2px solid var(--color-primary);
    transition: all 0.3s ease;
    z-index: 2;
}
.hud-tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.hud-tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.hud-bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.hud-br { bottom: 10px; right: 10px; border-left: none; border-top: none; }

.mission-card-v6:hover .hud-corner {
    width: 90%; height: 90%; /* Se expanden al hacer hover */
    opacity: 0.5;
}

.hud-scanline {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent 50%, rgba(249, 115, 22, 0.1) 51%, transparent 52%);
    background-size: 100% 4px;
    z-index: 1; pointer-events: none;
}

/* Etiqueta ID Flotante */
.card-v6-id {
    position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
    background: #000; color: var(--color-primary);
    font-family: monospace; font-size: 0.7rem; padding: 2px 8px;
    border: 1px solid var(--color-primary);
    z-index: 3; text-transform: uppercase; letter-spacing: 1px;
}

/* --- 2. PARTE DATOS (TERMINAL) --- */
.card-v6-content {
    padding: 20px;
    display: flex; flex-direction: column; flex-grow: 1;
    background: var(--color-surface);
    position: relative;
}

/* Título */
.card-v6-title {
    font-family: var(--font-heading);
    font-size: 1.6rem; line-height: 1;
    color: var(--color-text-primary);
    text-transform: uppercase; margin: 0 0 10px 0;
}
.mission-card-v6:hover .card-v6-title { color: var(--color-primary); }

/* Descripción */
.card-v6-desc {
    font-size: 0.85rem; color: var(--color-text-secondary);
    line-height: 1.5; margin-bottom: 20px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    font-family: monospace; /* Toque técnico */
}

/* Footer Técnico */
.card-v6-footer {
    margin-top: auto;
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px dashed rgba(255,255,255,0.2);
    padding-top: 10px;
}

.tech-stat {
    font-size: 0.7rem; color: var(--color-text-secondary); text-transform: uppercase;
    display: flex; align-items: center; gap: 5px; font-weight: bold;
}
.tech-stat i { color: var(--color-primary); }

.tech-btn {
    color: var(--color-primary); font-family: var(--font-subheading);
    font-weight: 800; font-size: 0.9rem; text-transform: uppercase;
    display: flex; align-items: center; gap: 5px;
}
.tech-btn span { letter-spacing: 2px; }

/* Decoración de esquina cortada */
.card-v6-corner-deco {
    position: absolute; bottom: 0; right: 0;
    width: 20px; height: 20px;
    background: linear-gradient(135deg, transparent 50%, var(--color-primary) 50%);
    opacity: 0.5;
}

/* =================================================================== */
/* === 19. FIX FINAL: ESTILOS PERDIDOS (HOME X-RAY & SPLENDOR)     === */
/* =================================================================== */

/* --- A. TARJETAS "X-RAY" (La magia que faltaba en las Misiones) --- */
.mission-card-xray {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px; /* Bordes más suaves */
    overflow: hidden;
    text-decoration: none;
    position: relative;
    box-shadow: var(--shadow-md);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mission-card-xray:hover {
    transform: translateY(-10px); /* Levantar más */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3); /* Sombra profunda */
    border-color: var(--color-primary);
}

/* Área Visual (Contenedor de imágenes) */
.xray-visual {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #000;
}

/* 1. Imagen B/N (Base) */
.xray-img-bw {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.1) brightness(0.9);
    transition: transform 0.8s ease;
}

/* 2. Caja de Revelado (La máscara diagonal) */
.xray-reveal-box {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
    /* Empieza oculta en la esquina */
    clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
    transition: clip-path 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

/* 3. Imagen Color (Dentro de la máscara) */
.xray-img-color {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1); /* Ligero zoom inicial */
    transition: transform 0.8s ease;
}

/* --- ANIMACIÓN HOVER X-RAY --- */
.mission-card-xray:hover .xray-reveal-box {
    /* Barre toda la tarjeta diagonalmente */
    clip-path: polygon(0 0, 150% 0, 100% 100%, -50% 100%);
}
.mission-card-xray:hover .xray-img-bw { transform: scale(1.1); }
.mission-card-xray:hover .xray-img-color { transform: scale(1); }

/* Etiqueta ID Táctica (OP-001) */
.xray-id {
    position: absolute;
    top: 12px; right: 12px; z-index: 10;
    background-color: rgba(9, 9, 11, 0.9); /* Casi negro */
    color: var(--color-primary);
    font-family: monospace;
    font-size: 0.75rem; font-weight: bold;
    padding: 4px 8px;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    backdrop-filter: blur(4px);
}

/* Contenido de Texto */
.xray-content {
    padding: 1.5rem;
    display: flex; flex-direction: column; flex-grow: 1;
}

/* ================================================================= */
/* === FIX: TÍTULO X-RAY (Igualando tipografía con V4)           === */
/* ================================================================= */

.xray-title {
    font-family: var(--font-heading); /* Luckiest Guy */
    
    /* 1. TAMAÑO: Aumentamos de 1.35rem a 1.8rem para igualar la V4 */
    font-size: 1.8rem; 
    
    /* 2. INTERLINEADO: Más ajustado (1.1) para que el bloque de texto sea compacto */
    line-height: 1.1;
    
    /* 3. COLOR: Usamos la variable adaptable (se verá blanco en dark, negro en light) */
    color: var(--color-text-primary);
    
    text-transform: uppercase;
    margin-bottom: 0.75rem; /* Un poco más de aire debajo */
    transition: color 0.3s ease;
    
    /* 4. SOMBRA SUTIL: Para replicar el "pop" de la V4 sin romper la legibilidad en fondos planos */
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1); 
    
    /* 5. KERNING: Luckiest Guy pide un pelín de espacio en tamaños grandes */
    letter-spacing: 0.5px;
}

/* Efecto Hover: Se pone naranja (igual que en V4) */
.mission-card-xray:hover .xray-title { 
    color: var(--color-primary); 
    /* Al hacer hover, la sombra se vuelve del color de acento pero suave */
    text-shadow: 2px 2px 0px rgba(249, 115, 22, 0.2);
}

.xray-desc {
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer de la Tarjeta */
.xray-footer {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px dashed var(--color-border);
    display: flex; justify-content: space-between; align-items: center;
}

.xray-stat {
    font-size: 0.75rem; font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase; letter-spacing: 0.5px;
}
.xray-stat i { color: var(--color-primary); margin-right: 6px; }

.xray-btn {
    font-family: var(--font-subheading);
    font-size: 0.85rem; font-weight: 800;
    color: var(--color-text-primary);
    text-transform: uppercase;
    display: flex; align-items: center; gap: 6px;
    transition: all 0.3s;
}
.mission-card-xray:hover .xray-btn {
    color: var(--color-primary);
    transform: translateX(5px);
}


/* --- B. TEMÁTICAS (Limpieza Visual) --- */
/* Ocultar barra de scroll pero mantener funcionalidad */
.home-topics__grid {
    scrollbar-width: none; /* Firefox */
}
.home-topics__grid::-webkit-scrollbar { 
    display: none; /* Chrome/Safari */
}
/* Asegurar que las tarjetas temáticas no se aplasten */
.topic-card {
    flex-shrink: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}


/* --- C. HERO INPUT (La Barra de Búsqueda Premium) --- */
/* Estilo específico para el input del Hero que faltaba */
.hero-section__search-input.dynamic-placeholder-input {
    background-color: transparent;
    color: #333; /* Texto oscuro para legibilidad sobre blanco */
    font-weight: 500;
    font-size: 1.1rem;
}

.hero-section__search-form {
    /* Efecto cristal blanco */
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255,255,255,0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-section__search-form:hover,
.hero-section__search-form:focus-within {
    transform: scale(1.02);
    box-shadow: 0 15px 40px rgba(249, 115, 22, 0.3); /* Resplandor naranja */
    border-color: var(--color-primary);
}

/* =================================================================== */
/* === 20. ESTILOS PAGINA PAIS (MISIONES)                          === */
/* =================================================================== */

/* Añadido para diferenciar Misiones */
.guide-group {
    margin-bottom: 25px;
    border-left: 2px solid var(--color-border);
    padding-left: 15px;
}

.guide-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--color-border);
}

.guide-title {
    font-weight: 700;
    color: var(--color-accent);
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.guide-action {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.3s;
}

.guide-action:hover {
    color: var(--color-white);
}

.node-address {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin-top: 3px;
}

/* =================================================================== */
/* === 21. PÁGINA ARCHIVO: DOSSIERS TÁCTICOS (ROCK & ROLL VIBE) === */
/* =================================================================== */

/* --- Variables Locales para ajustar el Vibe --- */
.page-tactical-archive {
    --card-height: 500px;
    --console-bg: #000;
}

/* Fondo con Textura (Noise) sutil para toda la página */
.page-tactical-archive {
    background-color: var(--color-background);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    min-height: 100vh;
}

/* --- 1. HERO TACTICAL (Encabezado) --- */
.archive-hero {
    position: relative;
    padding: 120px 20px 60px;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    background: radial-gradient(circle at center, var(--color-surface) 0%, var(--color-background) 100%);
    overflow: hidden;
}

.glitch-title {
    font-family: var(--font-heading); /* Tu fuente Luckiest Guy o Anton */
    font-size: clamp(3rem, 8vw, 6rem);
    line-height: 0.9;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin-bottom: 20px;
    position: relative;
    text-shadow: 4px 4px 0px rgba(249, 115, 22, 0.2); /* Sombra dura naranja */
}

.glitch-title span { color: var(--color-primary); }

.hero-subtitle {
    font-family: monospace; /* Toque técnico */
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
    letter-spacing: 1px;
}

/* --- 2. CONSOLA DE BÚSQUEDA (Estilo Terminal) --- */
.console-wrapper {
    max-width: 800px;
    margin: -35px auto 60px; /* Montado sobre el borde del hero */
    position: relative;
    z-index: 10;
    padding: 0 20px;
}

.console-input-group {
    position: relative;
    background: #000;
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.console-input-group:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 25px rgba(249, 115, 22, 0.3);
}

.console-icon {
    padding: 20px;
    color: var(--color-primary);
    font-size: 1.2rem;
    font-family: monospace;
    font-weight: bold;
}

.console-input {
    width: 100%;
    background: transparent;
    border: none;
    color: #fff;
    font-family: monospace;
    font-size: 1.1rem;
    padding: 20px 20px 20px 0;
    outline: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.console-input::placeholder { color: #555; }

/* --- 3. GRID DE EXPEDIENTES --- */
.files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    padding-bottom: 100px;
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 20px; padding-right: 20px;
}

/* --- 4. LA TARJETA "DOSSIER" (El Alma de la Página) --- */
.dossier-card {
    position: relative;
    height: var(--card-height);
    background: #000;
    border: 1px solid var(--color-border);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.dossier-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-5px);
    z-index: 5;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
}

/* Fondo Imagen */
.dossier-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    filter: grayscale(100%) contrast(1.2) brightness(0.6); /* Apagado por defecto */
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dossier-card:hover .dossier-bg,
.dossier-card.mobile-active .dossier-bg {
    filter: grayscale(0%) contrast(1) brightness(0.8); /* Color al activar */
    transform: scale(1.1);
}

/* Overlay Oscuro */
.dossier-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, #000 10%, transparent 60%);
    z-index: 1;
}

/* Etiquetas Superiores */
.dossier-header {
    position: absolute; top: 20px; left: 20px; right: 20px;
    z-index: 3;
    display: flex; justify-content: space-between; align-items: flex-start;
}

.file-code {
    font-family: monospace;
    color: rgba(255,255,255,0.7);
    font-size: 0.8rem; letter-spacing: 2px;
    background: rgba(0,0,0,0.5); padding: 2px 5px;
}

.status-badge {
    background: var(--color-primary);
    color: var(--color-text-inverted); /* Texto oscuro */
    font-family: var(--font-subheading);
    font-weight: 800;
    padding: 5px 10px;
    font-size: 0.85rem;
    text-transform: uppercase;
    transform: skew(-10deg); /* Inclinado para velocidad */
    box-shadow: 2px 2px 0px rgba(255,255,255,0.2);
}

/* Título del País */
.dossier-title-wrap {
    position: absolute; bottom: 30px; left: 20px; z-index: 3;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}

/* Al hacer hover, el título sube para dejar sitio a la lista */
.dossier-card:hover .dossier-title-wrap,
.dossier-card.mobile-active .dossier-title-wrap {
    transform: translateY(-280px); 
}

.country-title {
    font-family: var(--font-heading);
    font-size: 3.5rem; line-height: 0.85;
    color: #fff; text-transform: uppercase; margin: 0;
    text-shadow: 0 5px 20px rgba(0,0,0,0.8);
}

/* LISTA DE MISIONES (Slide Up Panel) */
.mission-log {
    position: absolute; bottom: 0; left: 0; width: 100%;
    height: 300px;
    background: rgba(9, 9, 11, 0.95); /* Color surface muy opaco */
    border-top: 2px solid var(--color-primary);
    z-index: 4;
    padding: 20px;
    
    /* Escondido abajo inicialmente */
    transform: translateY(100%); 
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    
    display: flex; flex-direction: column;
}

.dossier-card:hover .mission-log,
.dossier-card.mobile-active .mission-log {
    transform: translateY(0); /* Sube al activar */
}

.log-header {
    font-family: monospace; color: var(--color-primary);
    font-size: 0.8rem; margin-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 5px; text-transform: uppercase;
}

.log-list {
    list-style: none; padding: 0; margin: 0;
    overflow-y: auto; flex-grow: 1;
    /* Scrollbar fina */
    scrollbar-width: thin; scrollbar-color: var(--color-primary) #222;
}

.log-item { margin-bottom: 12px; border-bottom: 1px dashed #333; padding-bottom: 8px; }
.log-item:last-child { border: none; }

.log-link {
    color: #fff; text-decoration: none;
    font-family: var(--font-subheading); font-weight: 700;
    font-size: 1.1rem; line-height: 1.2; display: block;
    transition: color 0.2s;
}
.log-link:hover { color: var(--color-primary); padding-left: 5px; }

.log-meta {
    font-size: 0.75rem; color: var(--color-text-secondary);
    font-family: monospace; margin-top: 3px;
}

/* Botón "Acceder al Sector" */
.btn-sector {
    margin-top: 15px; display: block; text-align: center;
    background: transparent; color: var(--color-text-secondary);
    text-decoration: none; padding: 10px;
    font-family: var(--font-subheading); font-weight: bold;
    font-size: 0.8rem; text-transform: uppercase;
    border: 1px solid var(--color-border);
    transition: all 0.2s;
}
.btn-sector:hover {
    background: var(--color-primary); color: #000; border-color: var(--color-primary);
}

/* Mensaje Sin Resultados */
#noResults {
    grid-column: 1 / -1;
    text-align: center; padding: 80px 20px;
    border: 1px dashed var(--color-border);
    color: var(--color-text-secondary);
    font-family: monospace;
}

/*buscador nuevo*/

/* === SEARCH.CSS - ESTILO TÁCTICO VENAVIAJERA === */

.search-container-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* --- Header --- */
.search-header {
    margin-bottom: 3rem;
    border-bottom: 2px solid var(--color-border);
    padding-bottom: 1rem;
}

.search-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.search-title .highlight {
    color: var(--color-primary);
    background: rgba(249, 115, 22, 0.1); /* Naranja transparente */
    padding: 0 10px;
    border-radius: 4px;
}

.search-meta {
    font-family: monospace;
    color: var(--color-text-secondary);
    margin-top: 0.5rem;
}

/* --- Layout Grid --- */
.search-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 3rem;
}

@media (max-width: 900px) {
    .search-layout { grid-template-columns: 1fr; }
}

/* --- Sidebar (Filtros) --- */
.search-sidebar {
    background: var(--color-surface);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--color-border);
    height: fit-content;
    position: sticky;
    top: 20px;
}

.filter-group { margin-bottom: 2rem; }
.filter-title {
    font-family: var(--font-subheading);
    color: var(--color-text-primary);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}

.filter-options.scrollable {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-surface);
}

/* Checkboxes Custom (Estilo Militar/Táctico) */
.custom-checkbox {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    transition: color 0.2s;
}

.custom-checkbox:hover { color: var(--color-text-primary); }

.custom-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    height: 18px;
    width: 18px;
    background-color: transparent;
    border: 2px solid var(--color-text-secondary);
    border-radius: 3px;
    margin-right: 10px;
    position: relative;
    transition: all 0.2s;
}

.custom-checkbox input:checked ~ .checkmark {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 0 8px var(--color-primary); /* Glow effect */
}

/* --- Grid de Misiones --- */
.missions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.mission-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
}

.mission-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    border-color: var(--color-primary);
}

.card-image {
    height: 180px;
    position: relative;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.mission-card:hover .card-image img {
    transform: scale(1.1);
}

.mission-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.8);
    color: var(--color-primary);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid var(--color-primary);
}

.card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-meta {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.8rem;
    display: flex;
    gap: 15px;
}

.card-title {
    font-family: var(--font-subheading);
    font-size: 1.3rem;
    margin: 0 0 10px 0;
    line-height: 1.3;
}

.card-title a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.card-title a:hover { color: var(--color-primary); }

.card-excerpt {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* Alerta de Inteligencia (Match en Itinerario) */
.intel-alert {
    background: rgba(249, 115, 22, 0.1);
    border-left: 3px solid var(--color-primary);
    padding: 10px;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
    display: flex;
    gap: 10px;
    align-items: start;
}

.intel-alert i { color: var(--color-primary); margin-top: 3px; }
.intel-text { color: var(--color-text-primary); }
.intel-stops { color: var(--color-text-secondary); font-style: italic; display: block; margin-top: 4px;}

.btn-mission {
    margin-top: auto;
    display: inline-block;
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: padding 0.3s;
}

.btn-mission:hover {
    padding-left: 10px;
    color: var(--color-primary-hover);
}

/* --- Empty State --- */
.empty-state {
    text-align: center;
    padding: 4rem 1rem;
    border: 2px dashed var(--color-border);
    border-radius: 12px;
}

.glitch-text {
    font-family: var(--font-heading);
    font-size: 5rem;
    color: var(--color-text-secondary);
    opacity: 0.3;
}

.btn-back {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 24px;
    background: var(--color-primary);
    color: var(--color-text-inverted);
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    transition: background 0.2s;
}
.btn-back:hover { background: var(--color-primary-hover); }

/* === SEARCH.CSS === */

/* Estructura Principal */
.search-container-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1rem;
}

/* Toolbar Superior (Buscador + Toggles) */
.search-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    background: var(--color-surface);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

.main-search-box {
    display: flex;
    flex-grow: 1;
    max-width: 600px;
    position: relative;
}

.main-search-box input {
    width: 100%;
    padding: 12px 50px 12px 20px;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-text-primary);
    font-family: var(--font-body);
}

.main-search-box button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-primary);
    cursor: pointer;
    font-size: 1.2rem;
}

.view-toggles {
    display: flex;
    align-items: center;
    gap: 10px;
}

.results-count {
    font-family: monospace;
    color: var(--color-text-secondary);
    margin-right: 10px;
}

.view-toggles button {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.view-toggles button.active, .view-toggles button:hover {
    background: var(--color-primary);
    color: var(--color-text-inverted);
    border-color: var(--color-primary);
}

/* Layout Grid/Sidebar */
.search-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
}

/* SIDEBAR: Lógica de Colapso y Estilo */
.filter-group {
    margin-bottom: 1.5rem;
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 1rem;
}

.filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin-bottom: 1rem;
}

.filter-title { 
    margin: 0; 
    font-size: 1rem;
    text-transform: uppercase;
}

.toggle-icon { transition: transform 0.3s; }
.filter-group.collapsed .toggle-icon { transform: rotate(-90deg); }
.filter-group.collapsed .filter-content { display: none; }

.filter-item { display: flex; /* Flex para alinear checkbox */ }
.filter-item.hidden { display: none; } /* Clase para el JS "Ver más" */

.show-more-link {
    display: block;
    margin-top: 10px;
    color: var(--color-primary);
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
}

/* GRID vs LIST VIEW */
.missions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

/* Estilos específicos para la vista de LISTA */
.missions-grid.list-view {
    grid-template-columns: 1fr; /* Una sola columna */
}

.missions-grid.list-view .mission-card {
    flex-direction: row; /* Imagen izq, texto derecha */
    height: auto;
    min-height: 220px;
}

.missions-grid.list-view .card-image {
    width: 35%;
    height: auto;
    flex-shrink: 0;
}

.missions-grid.list-view .card-content {
    width: 65%;
    justify-content: center;
}

/* RESPONSIVE: MÓVIL (OCULTAR FILTROS) */
@media (max-width: 900px) {
    .search-layout {
        grid-template-columns: 1fr; /* Sidebar desaparece del grid */
    }
    
    .search-sidebar {
        display: none; /* Instrucción estricta: No mostrar barra */
    }

    .missions-grid.list-view .mission-card {
        flex-direction: column; /* En móvil, la lista vuelve a ser tarjeta vertical */
    }
    .missions-grid.list-view .card-image { width: 100%; height: 200px; }
    .missions-grid.list-view .card-content { width: 100%; }
}

/* === NUEVOS AÑADIDOS TÁCTICOS (BRIEFING, MARKBOOK, OBJETIVOS) === */

/* 1. Botón Bookmark (Guardar) */
.bookmark-btn {
    position: absolute;
    top: 10px;
    left: 10px; /* A la izquierda, opuesto al badge */
    background: rgba(0,0,0,0.6);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

.bookmark-btn:hover {
    background: var(--color-surface);
    color: var(--color-primary);
    transform: scale(1.1);
}

.bookmark-btn.saved i {
    font-weight: 900; /* Vuelve el icono sólido */
    color: var(--color-primary);
}

/* 2. Briefing (Acordeón Descripción) */
.briefing-container {
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
}

.briefing-toggle {
    background: none;
    border: none;
    color: var(--color-text-primary);
    font-family: var(--font-subheading);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.briefing-toggle:hover { opacity: 1; color: var(--color-primary); }

.briefing-toggle .arrow {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.3s;
}

.briefing-toggle.active .arrow { transform: rotate(180deg); }

.briefing-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.briefing-content p { margin: 10px 0; }

/* 3. Objetivos (Antes Paradas) */
.intel-alert {
    background: rgba(249, 115, 22, 0.05); /* Tinte naranja muy sutil */
    border-left: 2px solid var(--color-primary);
    padding: 10px;
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
}

.intel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    margin-bottom: 5px;
}

.intel-list-short, .intel-list-full {
    color: var(--color-text-secondary);
    font-style: italic;
    line-height: 1.4;
}

.intel-list-full.hidden { display: none; }
.intel-list-full {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border);
    font-style: normal;
}

/* ... (Estilos anteriores de .intel-list-full, etc) ... */

/* BOTÓN DE VER MÁS OBJETIVOS */
.intel-toggle-btn {
    background: none;
    border: none;
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    margin-top: 5px;
    text-decoration: underline;
    transition: color 0.2s;

    /* ⚠️ CAMBIO CLAVE: OCULTO POR DEFECTO (Grid / Vertical) */
    display: none; 
}

.intel-toggle-btn:hover { 
    color: var(--color-text-primary); 
}

/* ⚠️ VISIBLE SOLO EN MODO HORIZONTAL (List View) */
/* Cuando el usuario activa la vista de lista, el botón aparece mágicamente */
.missions-grid.list-view .intel-toggle-btn {
    display: inline-block;
}

/* === ACTIVE FILTERS (CHIPS) === */
.active-filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 2rem;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px dashed var(--color-border);
}

.filters-label {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-right: 10px;
    text-transform: uppercase;
    font-weight: bold;
}

.filter-chip {
    background: var(--color-surface);
    border: 1px solid var(--color-primary);
    color: var(--color-text-primary);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.filter-chip:hover {
    background: var(--color-primary);
    color: var(--color-text-inverted);
}

.filter-chip i { font-size: 0.7rem; }

.filter-chip.clear-all {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-secondary);
}

/* === CORRECCIÓN COLOR BOTÓN BORRAR === */
.filter-chip.clear-all:hover {
    background: var(--color-primary); /* AHORA ES NARANJA */
    border-color: var(--color-primary);
    color: var(--color-text-inverted); /* Texto oscuro para contraste */
}

/* === BOTÓN CARGAR MÁS (PAGINACIÓN) === */
..load-more-container {
    text-align: center;
    margin-top: 3rem;
    padding-bottom: 2rem;
}
.btn-load-more {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    padding: 12px 30px;
    font-family: var(--font-subheading);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.btn-load-more:hover {
    background: var(--color-primary);
    color: var(--color-text-inverted);
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.4);
}
.btn-load-more.loading i {
    animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

.pagination-container {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}
.pagination-list {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    padding: 0;
}
.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s;
    background: #fff;
}
.pagination-link:hover, .pagination-link.active {
    background: #000; /* O tu color corporativo */
    color: #fff;
    border-color: #000;
}

/* Cabecera Limpia (Estilo VenaViajera) */
.mission-control-header {
    text-align: center;
    padding: 80px 20px 50px; /* Espaciado generoso */
    max-width: 900px;
    margin: 0 auto;
}

.mission-control-header h1 {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(2.5rem, 5vw, 4rem); /* Grande e impactante */
    text-transform: uppercase;
    font-weight: 800; /* O el peso que uséis en títulos */
    margin-bottom: 20px;
    line-height: 1.1;
    color: var(--color-text-primary, #000);
}

.mission-control-header .highlight {
    color: var(--color-primary, #d93025); /* Tu color rojo corporativo */
}

.mission-control-header .subtitle {
    font-family: var(--font-body, sans-serif);
    font-size: 1.2rem;
    color: var(--color-text-secondary, #666);
    line-height: 1.6;
    max-width: 750px;
    margin: 0 auto;
}

/* Botón Cargar Más - Estilo Ghost Naranja */
.load-more-container {
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
    width: 100%;
}

.btn-load-more {
    /* Estado Normal (Transparente) */
    background-color: transparent; 
    color: var(--color-primary, #ff6600); /* Usa tu variable o un naranja fijo */
    border: 2px solid var(--color-primary, #ff6600);
    
    /* Tipografía y Espaciado */
    padding: 12px 35px;
    font-family: var(--font-heading, sans-serif); /* Misma fuente que títulos */
    font-size: 0.95rem;
    font-weight: 800; /* Letra gruesa */
    text-transform: uppercase;
    letter-spacing: 1px;
    
    /* Forma y Transición */
    cursor: pointer;
    border-radius: 4px; /* O 0px si prefieres esquinas rectas */
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Estado Hover (Al pasar el ratón) */
.btn-load-more:hover {
    background-color: var(--color-primary, #ff6600); /* Se rellena de naranja */
    color: #fff; /* Texto blanco */
    box-shadow: 0 5px 15px rgba(255, 102, 0, 0.3); /* Sombra suave naranja */
    transform: translateY(-2px);
}

/* Estado Cargando (Mientras gira) */
.btn-load-more.loading {
    opacity: 0.7;
    pointer-events: none;
    background-color: transparent;
    color: var(--color-primary, #ff6600);
}

/* Contenedor relativo para posicionar los botones dentro */
.main-search-box {
    position: relative;
    display: flex;
    align-items: center;
    /* Asegúrate de que tu contenedor tenga fondo y borde si no lo tiene ya */
}

/* Ajuste del input para que el texto no se meta debajo de los botones */
.main-search-box input {
    padding-right: 80px; /* Espacio para la X y el Radar */
    width: 100%;
}

/* El botón del Radar (Lupa) habitual */
.main-search-box .search-trigger {
    /* Tus estilos actuales... o aseguramos que esté a la derecha */
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 40px; /* Ajusta según tu diseño */
    background: none;
    border: none;
    cursor: pointer;
}

/* NUEVO: Botón X de limpiar */
.clear-input-btn {
    position: absolute;
    right: 45px; /* Lo ponemos a la izquierda del botón radar */
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 5px;
    font-size: 1rem;
    transition: color 0.2s;
    z-index: 2;
}

.clear-input-btn:hover {
    color: var(--color-primary, #ff6600); /* Naranja al pasar el ratón */
}

/* Clase para ocultarlo cuando no hay texto */
.clear-input-btn.hidden {
    display: none;
}

/* --- LÓGICA FILTROS MÓVIL (OFF-CANVAS) --- */

/* Por defecto, el botón de cerrar filtros está oculto */
.close-filters-btn {
    display: none;
}

@media (max-width: 768px) {
    /* Estado ACTIVO de la sidebar (cuando se pulsa el botón del footer) */
    .search-sidebar.mobile-active {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        
        /* CORRECCIÓN: Usar variables del tema */
        background-color: var(--color-background); 
        color: var(--color-text-primary);
        
        z-index: 20000;
        overflow-y: auto;
        padding: 20px;
        padding-bottom: 100px;
        display: block !important;
        
        /* Opcional: Borde sutil si el fondo es igual que el body */
        border-right: 1px solid var(--color-border, rgba(255,255,255,0.1));
        
        animation: slideInBottom 0.3s ease-out;
    }

    /* Estilo del botón "VER RESULTADOS" */
    .close-filters-btn {
        display: block;
        width: 100%;
        padding: 15px;
        
        /* CORRECCIÓN: Usar color corporativo */
        background-color: var(--color-primary); 
        color: #000; /* Texto negro sobre color acento (naranja/amarillo) para contraste */
        
        text-align: center;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 25px;
        border: none;
        border-radius: 4px; /* Un poco menos redondeado para estética táctica */
        cursor: pointer;
        font-size: 1rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
    
    /* Animación */
    @keyframes slideInBottom {
        from { transform: translateY(100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
}

/* Reutilizamos animación */
@keyframes slideInBottom {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* =================================================================== */
/* 2. NUEVO UI: DATOS DE LA MISIÓN (Minimalista Fino) */
/* =================================================================== */

/* Contenedor principal */
.mission-grid {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Menos espacio entre filas para que sea compacto */
    padding: 10px 15px; /* Espaciado lateral para que no toque bordes */
}

/* El item individual */
.mission-item {
    display: flex;
    align-items: flex-start;
    gap: 12px; /* Icono un poco más cerca del texto */
    padding: 0;
    background: transparent;
    border: none;
}

/* El icono: Pequeño y sutil */
.mission-icon-box {
    flex-shrink: 0;
    width: 16px; /* Ancho fijo mínimo */
    text-align: center;
    color: var(--color-primary);
    font-size: 0.9rem; /* <--- TAMAÑO REDUCIDO */
    margin-top: 3px; /* Alineación óptica con la primera línea de texto */
    background: transparent;
    border: none;
    opacity: 0.9; /* Un poco menos intenso */
}

/* Contenedor de textos */
.mission-text {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Etiqueta */
.mission-label {
    font-family: var(--font-subheading);
    font-size: 0.65rem; /* Un pelín más pequeña */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
    font-weight: 600;
}

/* Valor */
.mission-value {
    font-size: 0.9rem; /* Texto de lectura cómodo */
    color: var(--color-text-primary);
    font-weight: 400;
    line-height: 1.4;
    word-break: break-word;
}

/* Enlaces */
.mission-value a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px dotted rgba(249, 115, 22, 0.4);
    transition: opacity 0.2s;
}

.mission-value a:hover {
    opacity: 0.8;
    background: transparent;
    color: var(--color-primary);
    border-bottom-style: solid;
}

/* Bubble de escritorio (esquina superior derecha) */
#desktopCounter.plan-counter-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #000;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    font-size: 0.7rem;
    font-weight: 900;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.4);
}

/* EFECTO PULSO SUTIL PARA ESCRITORIO */
.plan-docked:not(.is-collapsed) #desktopCounter {
    animation: none; /* Estático cuando está abierto */
}

@keyframes tactical-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.8); }
    50% { transform: scale(1.4); box-shadow: 0 0 0 12px rgba(249, 115, 22, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

@keyframes shake-animation {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px) rotate(-2deg); }
    50% { transform: translateX(3px) rotate(2deg); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
}

/* Badges de objetivos en las cabeceras */
.plan-group-header span:last-child {
    background: var(--color-primary);
    color: #000;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 900;
    font-family: monospace;
}

/* Animación de vibración táctica */
.shake-tactical {
    animation: tactical-shake 0.3s ease-in-out;
}

@keyframes tactical-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px) rotate(-2deg); }
    75% { transform: translateX(4px) rotate(2deg); }
}

/* Animación de Latido Táctico para Objetivos Fijados */
@keyframes target-heartbeat {
    0% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(249, 115, 22, 0.4)); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.8)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 2px rgba(249, 115, 22, 0.4)); }
}

/* Estilo táctico para el botón cuando está añadido */
.js-add-plan.added {
    border-color: var(--color-primary);
}

.js-add-plan.added i {
    color: var(--color-primary) !important;
    animation: target-heartbeat 2s infinite ease-in-out;
    display: inline-block; /* Requerido para que funcione transform */
}

/* Asegura que el icono sea visible y tenga tamaño  */
.btn-add-plan i {
    display: inline-block !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900; /* Requerido para iconos solid */
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Evitamos que el fondo naranja se "coma" al icono  */
.btn-add-plan.added {
    background-color: rgba(249, 115, 22, 0.15) !important; /* Fondo suave para que resalte el icono naranja sólido */
    border: 1px solid var(--color-primary) !important;
}

.btn-add-plan.added i {
    color: var(--color-primary) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ================================================================= */
/* === FIX: CONSOLA DE MANDO EN MODO CLARO (LIGHT THEME)         === */
/* ================================================================= */

/* 1. Cambiar el fondo de la barra */
body.light-theme .desktop-mission-console {
    /* Fondo Blanco "Glass" (Cristal) */
    background: rgba(255, 255, 255, 0.9); 
    /* Borde superior gris sutil */
    border-top: 1px solid rgba(0, 0, 0, 0.1); 
}

/* 2. Cambiar el color de los textos y flechas en reposo */
body.light-theme .desktop-mission-console .freq-link {
    /* Gris medio para que se lea sobre blanco */
    color: var(--color-text-secondary); 
}

/* 3. Cambiar el color al pasar el ratón (Hover) */
body.light-theme .desktop-mission-console .freq-link:hover {
    /* Naranja corporativo vibrante */
    color: var(--color-primary); 
    /* Quitamos el brillo blanco del modo oscuro */
    text-shadow: none; 
}

/* 4. Ajustar el icono del satélite central */
body.light-theme .desktop-mission-console .freq-signal {
    color: #000;
    opacity: 0.1; 
}

/* ================================================================= */
/* === FIX: BARRA REPSOL EN MODO CLARO (LIGHT THEME)             === */
/* ================================================================= */

/* 1. Cambiar el fondo de la barra para que sea blanca/transparente */
body.light-theme #repsol-nav {
    background: rgba(255, 255, 255, 0.95); /* Blanco cristal */
    /* El borde inferior naranja se mantiene igual, eso está bien */
}

/* 2. Cambiar el color del título (de blanco fijo a gris oscuro) */
body.light-theme .repsol-title {
    color: var(--color-text-primary); 
}

/* 3. Ajuste extra para el selector desplegable (opcional, por seguridad) */
body.light-theme .repsol-select {
    background-color: #ffffff; /* Blanco puro */
    border-color: var(--color-border);
    color: var(--color-text-primary);
}

/* ======================================================= */
/* === TARJETA EXPEDICIÓN (Estilo "Holidays" Táctico)  === */
/* ======================================================= */

/* Ajuste del Grid para que respiren */
.mission-grid__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px; /* Espacio generoso entre tarjetas */
    padding-bottom: 20px;
}

/* --- CONTENEDOR TARJETA --- */
.card-expedition {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px; /* Redondeado moderno */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
}

/* Efecto Hover: Levantar y Brillo Naranja */
.card-expedition:hover {
    transform: translateY(-10px);
    border-color: var(--color-primary);
    box-shadow: 0 15px 40px rgba(0,0,0,0.4), 
                0 0 20px rgba(249, 115, 22, 0.2);
}

/* --- 1. IMAGEN Y BADGE --- */
.card-exp-visual {
    position: relative;
    height: 220px; /* Altura fija imagen */
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
}

.card-exp-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    filter: brightness(0.9);
}

.card-expedition:hover .card-exp-img {
    transform: scale(1.1);
    filter: brightness(1.1); /* Se ilumina un poco */
}

/* La pastilla flotante (Donde iría el precio) */
.card-exp-badge {
    position: absolute;
    bottom: 15px;
    left: 20px;
    background-color: #000; /* Fondo negro contraste */
    border: 2px solid var(--color-primary);
    border-radius: 30px; /* Pastilla */
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.6);
    z-index: 2;
}

.badge-label {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    font-weight: 700;
}

.badge-val {
    font-family: 'Orbitron', sans-serif; /* Fuente numérica */
    font-size: 1rem;
    color: var(--color-primary);
    font-weight: 700;
}

/* --- 2. CONTENIDO --- */
.card-exp-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Título */
.card-exp-title {
    margin: 0 0 10px 0;
    line-height: 1.2;
}

.card-exp-title a {
    font-family: var(--font-heading); /* Luckiest Guy */
    font-size: 1.5rem;
    color: var(--color-text-primary);
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s;
}

.card-expedition:hover .card-exp-title a {
    color: var(--color-primary);
}

/* Meta Info (Destino) */
.card-exp-meta {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 15px;
    display: flex; gap: 5px;
}
.meta-value.text-primary { 
    color: var(--color-primary); 
    font-weight: 700; 
    text-transform: uppercase;
}

/* Specs (Barra Gris) */
.card-exp-specs {
    background-color: var(--color-background); /* Fondo ligeramente distinto */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.spec-group { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.spec-group i { color: var(--color-primary); }

.spec-divider {
    width: 1px; height: 16px;
    background-color: var(--color-border);
    margin: 0 15px;
}

.spec-icons { display: flex; gap: 10px; }
.spec-icons i { color: var(--color-text-secondary); transition: color 0.3s; }
.card-expedition:hover .spec-icons i { color: var(--color-text-primary); }

/* Descripción */
.card-exp-desc p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Cortar a 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 3. BOTÓN (Full Width como la referencia) --- */
.btn-exp-action {
    margin-top: auto;
    display: block;
    width: 100%;
    padding: 12px 0;
    text-align: center;
    background-color: var(--color-primary); /* Naranja Sólido */
    color: #fff; /* Texto blanco siempre */
    font-family: var(--font-subheading);
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 50px; /* Botón píldora */
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

.btn-exp-action:hover {
    background-color: var(--color-primary-hover);
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5);
}

/* --- MODO CLARO (Adaptación) --- */
body.light-theme .card-expedition {
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
body.light-theme .card-exp-badge {
    background-color: #fff; /* Badge blanco en modo claro */
    color: #000;
}
body.light-theme .card-exp-specs {
    background-color: #f8f9fa;
}

/* ======================================================= */
/* === CAROUSEL DRAG & ACORDEÓN TÁCTICO                === */
/* ======================================================= */

/* 1. EL CAROUSEL (DRAG HORIZONTAL) */
.mission-carousel {
    display: flex;
    overflow-x: auto; /* Permite scroll horizontal */
    gap: 20px; /* Espacio entre tarjetas */
    padding: 20px 5px 40px 5px; /* Padding abajo extra para sombras */
    
    /* Suavidad en iOS/Android */
    -webkit-overflow-scrolling: touch; 
    
    /* Scroll Snap (Efecto imán) */
    scroll-snap-type: x mandatory; 
    
    /* Ocultar barra scroll */
    scrollbar-width: none; 
}
.mission-carousel::-webkit-scrollbar { display: none; }

/* Ajuste de la tarjeta para el carrusel */
.card-drag-item {
    flex: 0 0 320px; /* Ancho fijo: No se estiran ni encogen */
    scroll-snap-align: start; /* Se alinean al inicio al soltar */
}

/* En móvil, hacerlas un poco más estrechas para ver que hay más */
@media (max-width: 768px) {
    .card-drag-item { flex: 0 0 280px; }
}


/* 2. EL ACORDEÓN (BRIEFING) */
.briefing-wrapper {
    margin-bottom: 15px;
    border-top: 1px dashed var(--color-border);
    padding-top: 10px;
}

.btn-toggle-brief {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    font-family: 'Orbitron', sans-serif; /* Fuente Tech */
    font-size: 0.8rem;
    font-weight: 700;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: color 0.3s;
    padding: 5px 0;
}

.btn-toggle-brief:hover,
.btn-toggle-brief.active {
    color: var(--color-primary); /* Naranja al activar */
}

.btn-toggle-brief i {
    transition: transform 0.3s ease;
}
.btn-toggle-brief.active i {
    transform: rotate(180deg); /* Flecha gira */
}

/* Contenido Oculto */
.briefing-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.briefing-inner {
    padding: 10px;
    background-color: var(--color-background); /* Fondo más oscuro */
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin-top: 5px;
    border-left: 2px solid var(--color-primary); /* Línea lateral naranja */
}

.briefing-inner p {
    margin-bottom: 5px;
    line-height: 1.4;
}
.briefing-inner p:last-child { margin-bottom: 0; }

/* Ajuste visual: Specs ahora resaltan el icono dinámico */
.card-exp-specs .text-primary i {
    filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.4)); /* Brillo neón */
}

/* ======================================================= */
/* === FIX VISUAL: ESTILO "GRAND CAROUSEL" (AIREADO)   === */
/* ======================================================= */

/* 1. Contenedor: Más espacio entre tarjetas */
.mission-carousel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    
    /* Aumentamos el gap para que se vean separadas y ligeras */
    gap: 30px !important; 
    
    padding: 20px 5px 50px 5px !important; /* Más espacio abajo para la sombra */
    width: 100% !important;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;
}

/* 2. Tarjetas: Más anchas y redondeadas */
.card-drag-item {
    /* ANCHO AUMENTADO: De 300px a 350px para escritorio */
    flex: 0 0 350px !important; 
    width: 350px !important;
    max-width: 350px !important;
    
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    
    /* Bordes muy redondeados (Estilo moderno/Apple) */
    border-radius: 24px !important; 
    
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    
    /* Sombra suave para dar ligereza */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2) !important;
    transition: transform 0.3s ease;
}

.card-drag-item:hover {
    transform: translateY(-10px) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
    border-color: var(--color-primary);
}

/* 3. Imagen: Más alta y protagonista */
.card-exp-visual {
    /* ALTURA AUMENTADA: De 180px a 240px */
    height: 240px !important; 
    width: 100%;
    position: relative;
    overflow: hidden;
}

.card-exp-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.card-drag-item:hover .card-exp-img {
    transform: scale(1.1);
}

/* 4. Contenido: Más padding (aire) */
.card-exp-content {
    padding: 25px !important; /* Más espacio interior */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Título más grande */
.card-exp-title a {
    font-size: 1.6rem !important; /* Letra más grande */
    line-height: 1.1;
}

/* 5. Botón: Estilo Píldora Flotante */
.btn-exp-action {
    display: block;
    width: 100%;
    text-align: center;
    background-color: var(--color-primary);
    color: #fff !important;
    font-weight: 800;
    text-transform: uppercase;
    padding: 14px 0; /* Botón más alto */
    
    /* Píldora perfecta */
    border-radius: 50px !important; 
    
    text-decoration: none;
    margin-top: auto; /* Empuja el botón al fondo */
    box-shadow: 0 5px 15px rgba(249, 115, 22, 0.3);
    transition: all 0.2s;
}

.btn-exp-action:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(249, 115, 22, 0.5);
}

/* --- AJUSTE MÓVIL (MUY IMPORTANTE) --- */
@media (max-width: 768px) {
    .card-drag-item {
        /* En móvil, que ocupen casi toda la pantalla (85%) para verlas grandes */
        flex: 0 0 85vw !important; 
        width: 85vw !important;
        max-width: 85vw !important;
    }
    
    .card-exp-visual {
        height: 220px !important; /* Un pelín menos en móvil */
    }
}

/* ======================================================= */
/* === FIX UX: CURSORES DE ARRASTRE (DRAG)             === */
/* ======================================================= */

/* Aplicar a ambos carruseles (Temáticas y Misiones) */
.mission-carousel, 
#topics-track {
    /* Muestra la manita abierta para indicar que se puede agarrar */
    cursor: grab; 
    cursor: -webkit-grab;
    
    /* Evita que el texto se seleccione azul mientras arrastras (Vital para UX) */
    user-select: none;
    -webkit-user-select: none;
    
    /* Asegura que el área toque sea sensible */
    touch-action: pan-y; 
}

/* Cuando la clase 'is-grabbing' es añadida por JS */
.mission-carousel.is-grabbing,
#topics-track.is-grabbing {
    /* Muestra la manita cerrada apretando */
    cursor: grabbing !important;
    cursor: -webkit-grabbing !important;
}

/* Accesibilidad: Indicador visual de foco para navegación por teclado */
.mission-carousel:focus-visible,
#topics-track:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ======================================================= */
/* === BOTONES DE NAVEGACIÓN CARRUSEL (A11Y & UX)      === */
/* ======================================================= */

/* Wrapper para posicionar las flechas relativas al carrusel */
.carousel-tactical-wrapper {
    position: relative;
    width: 100%;
    /* Añadimos padding lateral para que las flechas no tapen contenido en pantallas pequeñas */
    padding: 0 10px; 
}

.carousel-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20; /* Encima de las tarjetas */
    
    width: 48px; /* Tamaño mínimo accesible (44px+) */
    height: 48px;
    border-radius: 50%;
    
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    
    /* Accesibilidad: Quitar estilo default de botón */
    padding: 0;
    outline: none;
}

.carousel-nav-btn i {
    font-size: 1.2rem;
}

/* Posicionamiento */
.carousel-nav-btn.prev {
    left: -20px; /* Flotando a la izquierda */
}

.carousel-nav-btn.next {
    right: -20px; /* Flotando a la derecha */
}

/* Hover: Se pone naranja */
.carousel-nav-btn:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.4);
}

/* Focus (Teclado): Vital para Accesibilidad */
.carousel-nav-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

/* Estado Desactivado (si llegamos al final) */
.carousel-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

/* RESPONSIVE: En móvil las ocultamos o las metemos dentro */
@media (max-width: 1024px) {
    /* Opción A: Ocultar en móvil (el swipe es nativo) */
    .carousel-nav-btn {
        display: none; 
    }
    
    /* Restauramos el padding del wrapper en móvil */
    .carousel-tactical-wrapper {
        padding: 0;
    }
}

/* ======================================================= */
/* === FIX FINAL: NAVEGACIÓN Y GESTOS (ACCESIBLE)      === */
/* ======================================================= */

.mission-carousel, 
#topics-track {
    /* 1. MÓVIL: Permitir desplazamiento horizontal (Vital) */
    touch-action: pan-x pan-y !important; 
    
    /* 2. PC: Mostrar manita para indicar que se puede arrastrar */
    cursor: grab; 
    cursor: -webkit-grab;
    
    /* 3. UX: Evitar que el texto se seleccione feo al arrastrar */
    user-select: none;
    -webkit-user-select: none;
}

/* Estado "Agarrando" (cuando el script activa la clase) */
.mission-carousel.is-grabbing,
#topics-track.is-grabbing {
    cursor: grabbing !important;
    cursor: -webkit-grabbing !important;
}

/* 4. ACCESIBILIDAD: Foco visible para navegación por teclado */
.carousel-nav-btn:focus-visible,
.mission-carousel:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

/* ======================================================= */
/* === AJUSTE COMPACTO MÓVIL (TARJETAS CORTAS)         === */
/* ======================================================= */

@media (max-width: 768px) {
    
    /* 1. Reducir altura de imagen en móvil (de 240px a 160px) */
    /* Esto ahorra mucho espacio vertical */
    .card-exp-visual {
        height: 160px !important; 
    }

    /* 2. Reducir el padding interno para ganar espacio */
    .card-exp-content {
        padding: 15px !important; /* Antes era 25px */
    }

    /* 3. Ajustar tamaño del título para que no ocupe tanto */
    .card-exp-title a {
        font-size: 1.25rem !important; /* Un poco más pequeño y manejable */
    }

    /* 4. Ajustar el ancho de la tarjeta para invitar al scroll */
    /* 80vw permite ver un trozo de la siguiente tarjeta */
    .card-drag-item {
        flex: 0 0 80vw !important; 
        width: 80vw !important;
        max-width: 320px !important; /* Tope para que no sea gigante */
    }
    
    /* 5. Asegurar márgenes laterales en el contenedor */
    .mission-carousel {
        padding-left: 20px !important; 
        padding-right: 20px !important;
    }
}
/* ======================================================= */
/* === FIX FINAL: ANIMACIONES Y COLORES (VenaViajera)  === */
/* ======================================================= */

/* --- 1. ANIMACIÓN SCROLL REVEAL (Efecto Carga) --- */
/* Estado inicial: invisible y desplazado hacia abajo */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    will-change: opacity, transform; /* Optimización WPO */
}

/* Estado final: visible (JS añade esta clase) */
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- 2. ESTILO DESCRIPCIÓN TÁCTICA (Acordeón) --- */
.briefing-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin-top: 10px;
    
    /* CAMBIO: Ahora mostramos hasta 7 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 7; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    opacity: 0.9;
}

.briefing-divider {
    border: 0;
    border-top: 1px dashed var(--color-border);
    margin: 15px 0;
    opacity: 0.4;
}

/* Toque verde táctico para el estado */
.text-success {
    color: #10b981; /* Verde esmeralda */
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* --- 3. FIX NEWSLETTER (Texto siempre blanco) --- */
/* Esto fuerza que, aunque el tema sea claro (light-mode), 
   el texto sobre el fondo oscuro de la newsletter sea blanco */
.newsletter-section, 
section.newsletter,
.home-newsletter { /* Añado varias clases comunes por si acaso */
    --color-text-primary: #FFFFFF !important;
    --color-text-secondary: rgba(255, 255, 255, 0.8) !important;
    color: #FFFFFF !important;
}

.newsletter-section h2, 
.newsletter-section h3, 
.newsletter-section p {
    color: #FFFFFF !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Mejora lectura */
}

/* --- 4. AJUSTE ICONOS SPECS --- */
/* Aseguramos que los iconos nuevos se vean alineados */
.spec-icons {
    display: flex;
    gap: 12px;
    align-items: center;
}
.spec-icons i {
    font-size: 1rem;
    color: var(--color-text-secondary);
    transition: color 0.3s ease;
}
.card-drag-item:hover .spec-icons i {
    color: var(--color-primary); /* Se ponen naranjas al pasar el ratón */
}

/* ======================================================= */
/* === SECCIÓN TEMÁTICAS (Botones Cuadrados)           === */
/* ======================================================= */

/* 1. Ajuste del Grid para las Flechas */
.home-topics__grid {
    display: flex;
    flex-wrap: nowrap;      
    overflow-x: auto;       
    
    /* 1. CENTRADO HORIZONTAL (Eje principal) */
    justify-content: center; 
    
    /* 2. CENTRADO VERTICAL (Eje cruzado - ¡Esto es lo que pedías!) */
    align-items: center; 
    
    gap: 15px; 
    
    /* 3. PADDING EQUILIBRADO */
    /* Antes tenías menos arriba (10px) y más abajo (20px). */
    /* Ahora ponemos 25px arriba y abajo para que respire por igual */
    padding: 25px 5px; 
    
    margin: 0 auto; 
    max-width: 100%;
    
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
    
    cursor: grab;
    touch-action: pan-x pan-y;
}

/* Mantener ajuste móvil si lo usas */
@media (max-width: 480px) {
    .home-topics__grid {
        justify-content: flex-start; 
    }
}
.home-topics__grid.is-grabbing { cursor: grabbing; }

/* 2. DISEÑO DE LA TARJETA (Para que quepa el texto) */
.topic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centrado vertical */
    text-align: center;
    
    /* 1. MÁS ALTURA: Subimos a 180px para que quepan 3 líneas de texto */
    width: 140px; 
    height: 180px; 
    
    padding: 15px 8px; /* Un poco de margen lateral interno */
    
    background-color: var(--color-surface); 
    border: 1px solid var(--color-border);
    border-radius: 16px; 
    
    text-decoration: none;
    position: relative;
    transition: all 0.3s ease;
}

/* 3. EL ICONO */
/* Icono un poco más arriba para compensar */
.topic-card__icon-wrapper {
    font-size: 2rem;
    color: var(--color-primary);
    margin-bottom: 5px;
}

/* 4. EL TÍTULO (Lo que faltaba) */
.topic-card__title {
    /* 1. Fuente estándar limpia (se mantiene igual) */
    font-family: system-ui, -apple-system, sans-serif !important; 
    
    font-size: 0.85rem; 
    font-weight: 700;       
    line-height: 1.3;       
    letter-spacing: 0.5px;
    
    /* 2. CORRECCIÓN DE COLOR: Usamos la variable inteligente */
    /* Esto hará que sea BLANCO en modo oscuro y NEGRO en modo claro automáticamente */
    color: var(--color-text-primary) !important;
    
    /* Quitamos la sombra negra fuerte, porque en modo claro queda sucia */
    text-shadow: none; 
    
    margin: 10px 0; 
    text-transform: uppercase;
    
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 5. EL CONTADOR */
.topic-card__count {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    font-weight: 700;
    opacity: 0.8;
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 10px;
}

/* 6. INTERACCIÓN (Hover y Foco) */
.topic-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary);
    box-shadow: 0 5px 20px rgba(249, 115, 22, 0.15);
}

.topic-card:hover .topic-card__icon-wrapper {
    transform: scale(1.1);
}

.topic-card:hover .topic-card__title {
    color: var(--color-primary); /* El texto se pone naranja al pasar el ratón */
}

/* Foco Accesible */
.topic-card:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

/* 7. AJUSTE DE FLECHAS ESPECÍFICO PARA ESTA SECCIÓN */
.home-topics .carousel-nav-btn {
    width: 36px; height: 36px; /* Botones más discretos aquí */
    background: var(--color-background); /* Fondo sólido para tapar el carrusel al pasar por debajo */
}
.home-topics .carousel-nav-btn.prev { left: -10px; }
.home-topics .carousel-nav-btn.next { right: -10px; }

/* ======================================================= */
/* === FIX ACCESIBILIDAD (CONTRASTE)                   === */
/* ======================================================= */

/* Oscurecemos el naranja del botón para que el texto blanco se lea bien (Ratio 4.5:1) */
.button--primary, 
.hero-section__search-button {
    background-color: #ea580c !important; /* Un naranja más profundo/rojizo */
    color: #ffffff !important;
}

.button--primary:hover {
    background-color: #c2410c !important; /* Más oscuro al pasar el ratón */
}

/* Etiqueta BETA (si la usas) */
.etiqueta-beta {
    background-color: #f59e0b; /* Amarillo oscuro */
    color: #000000; /* Texto negro en lugar de blanco para mejor contraste */
    font-weight: bold;
}

/* --- FIX CONTRASTE ACCESIBILIDAD --- */

/* 1. Etiqueta Beta: Texto negro sobre fondo naranja */
.etiqueta-beta {
    background-color: #f59e0b; 
    color: #000000 !important; /* Forzamos negro para máximo contraste */
    font-weight: 700;
}

/* 2. Texto de Radar Vacío (JS Render) */
/* El informe se quejaba del estilo inline 'color: var(--color-primary)' */
.empty-radar-warning {
    color: #c2410c !important; /* Un naranja mucho más oscuro/rojizo para que se lea sobre blanco */
    font-weight: 800;
}

/* ======================================================= */
/* === FIX FINAL: ACCESIBILIDAD Y CONTRASTE            === */
/* ======================================================= */

/* 1. Botón de Búsqueda (Naranja más oscuro para que el blanco se lea) */
.button--primary, 
.hero-section__search-button {
    background-color: #ea580c !important; /* Naranja rojizo */
    color: #ffffff !important;
}
.button--primary:hover {
    background-color: #c2410c !important;
}

/* 2. Etiqueta Beta (Negro sobre Naranja es lo más legible) */
.etiqueta-beta {
    background-color: #f59e0b !important;
    color: #000000 !important;
}

/* 3. Forzar display swap en iconos de FontAwesome para evitar bloqueo */
@font-face {
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2) format('woff2');
}
@font-face {
  font-family: 'Font Awesome 6 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-brands-400.woff2) format('woff2');
}

/* Contenedor relativo para posicionar elementos encima */
.card-image {
    position: relative;
    overflow: hidden; /* Para que nada se salga */
}

/* 1. BOTÓN PLAN DE FUGA (Arriba Izquierda) */
.bookmark-btn-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    background: rgba(255, 255, 255, 0.9); /* Fondo blanco semitransparente */
    color: #333;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.bookmark-btn-overlay:hover {
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Estado de éxito (Verde) */
.bookmark-btn-overlay.added-success {
    background: #10b981 !important;
    color: white !important;
}

/* 2. ICONO GPS (Abajo Derecha) */
.gps-overlay {
    position: absolute;
    bottom: 10px;    /* Abajo */
    right: 10px;     /* Derecha */
    top: auto;       /* Reseteamos top si lo tenía antes */
    z-index: 20;
    
    background: rgba(0, 0, 0, 0.7); /* Fondo oscuro */
    color: #fff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(2px);
    transition: transform 0.2s;
}

.gps-overlay:hover {
    transform: scale(1.1);
    background: var(--color-primary, #f59e0b);
}

/* =========================================
   COMPONENTES GLOBALES (TARJETAS DE MISIÓN)
   ========================================= */

/* GRID RESPONSIVE MEJORADO */
/* =========================================
   GRID RESPONSIVE (LÍMITE ESTRICTO DE 3)
   ========================================= */

.travlia-grid { 
    display: grid; 
    gap: 20px; 
    width: 100%;
    
    /* 1. POR DEFECTO (Móvil): 1 Columna */
    grid-template-columns: 1fr; 
}

/* 2. TABLETS (Pantallas > 650px): 2 Columnas */
@media (min-width: 650px) {
    .travlia-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* 3. ESCRITORIO (Pantallas > 1100px): EXACTAMENTE 3 Columnas */
/* Ajusta el 1100px según cuando quieras que salten las 3 columnas */
@media (min-width: 1100px) {
    .travlia-grid { 
        grid-template-columns: repeat(3, 1fr); 
    }
}

/* TARJETA MAESTRA */
.trav-card {
    background: var(--color-surface); 
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md); 
    overflow: hidden; 
    display: flex; 
    flex-direction: column;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    height: 100%; 
    width: 100%;      
    max-width: 450px; /* Límite de seguridad */
    margin: 0 auto;   /* Centrado si queda sola */
}

.trav-card:hover { 
    transform: translateY(-4px); 
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md); 
}

.trav-img-box { 
    position: relative; height: 220px; 
    flex-shrink: 0; 
}
.trav-img-box img { width: 100%; height: 100%; object-fit: cover; }

/* BADGES & ICONOS */
.trav-badge-cat {
    position: absolute; top: 15px; left: 0;
    background: var(--color-primary); color: #fff;
    padding: 5px 12px; font-weight: 800; font-size: 0.75rem; 
    font-family: var(--font-subheading); text-transform: uppercase;
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

.trav-wishlist-btn {
    position: absolute; top: 10px; right: 10px;
    width: 38px; height: 38px; background: rgba(0,0,0,0.5);
    border-radius: 50%; border: none; color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; 
    backdrop-filter: blur(4px); z-index: 5; transition: all 0.2s;
}
.trav-wishlist-btn:hover { background: #fff; color: var(--color-primary); }
.trav-wishlist-btn.added-active { background: var(--color-primary); color: #fff; }

.trav-gps-icon {
    position: absolute; bottom: 10px; right: 10px;
    width: 32px; height: 32px; background: rgba(0,0,0,0.6);
    border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; z-index: 5;
}

/* CUERPO DE LA TARJETA */
.trav-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }

.trav-title { 
    margin: 0 0 10px; 
    font-family: var(--font-subheading); font-size: 1.2rem; 
    line-height: 1.3; font-weight: 800;
}
.trav-title a { color: var(--color-text-primary); text-decoration: none; transition: color 0.2s; }
.trav-title a:hover { color: var(--color-primary); }

/* ACORDEÓN BRIEFING */
.trav-details-accord { margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.trav-accord-trigger {
    width: 100%; background: transparent; 
    border: 1px solid var(--color-border); border-radius: 4px;
    padding: 6px; font-size: 0.8rem; color: var(--color-text-secondary); cursor: pointer;
    font-family: var(--font-subheading); text-transform: uppercase; transition: all 0.2s;
}
.trav-accord-trigger:hover { border-color: var(--color-primary); color: var(--color-primary); }
.trav-accord-content { display: none; margin-top: 8px; font-size: 0.85rem; color: var(--color-text-secondary); }
.trav-details-accord.active .trav-accord-content { display: block; }

/* DATOS TÁCTICOS */
.trav-meta-row {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 20px; margin-top: auto; border-top: 1px solid var(--color-border); padding-top: 15px;
}
.meta-item .lbl { font-size: 0.7rem; color: var(--color-text-secondary); text-transform: uppercase; margin-bottom: 4px; display: block; }
.meta-item .val { font-weight: 700; font-size: 1.1rem; color: var(--color-text-primary); font-family: var(--font-tactical); }
.meta-item .val.accent { color: var(--color-primary); }

/* BOTÓN DE ACCIÓN (Estilo Ghost / Contorno) */
.trav-btn-rect {
    display: block; 
    width: 100%; 
    
    /* 1. Fondo transparente y Borde Naranja */
    background: transparent !important; 
    border: 2px solid var(--color-primary) !important; 
    color: var(--color-primary) !important; /* Texto naranja por defecto */
    
    text-align: center; 
    padding: 12px 0; /* Ajuste ligero por el borde */
    font-family: var(--font-subheading);
    font-weight: 800; 
    text-transform: uppercase; 
    text-decoration: none; 
    border-radius: var(--radius-sm); 
    transition: all 0.3s ease;
}

.trav-btn-rect:hover {
    /* 2. Al pasar el mouse: Se rellena de naranja y el texto pasa a blanco */
    background-color: var(--color-primary) !important;
    color: #fff !important; 
    
    /* Extra: Un pequeño brillo y elevación para darle clase */
    box-shadow: 0 5px 15px rgba(255, 94, 20, 0.3);
    transform: translateY(-2px);
}

/* LIST VIEW MODE */
.travlia-grid.list-view .trav-card { flex-direction: row; height: auto; min-height: 250px; max-width: 100%; }
.travlia-grid.list-view .trav-img-box { width: 35%; height: auto; }
.travlia-grid.list-view .trav-body { width: 65%; padding: 25px; }

@media(max-width: 768px) {
    .travlia-grid.list-view .trav-card { flex-direction: column; }
    .travlia-grid.list-view .trav-img-box { width: 100%; height: 200px; }
    .travlia-grid.list-view .trav-body { width: 100%; }
}

/* =========================================
   LISTA DE OBJETIVOS (Dentro de la Card)
   ========================================= */
.objectives-list { 
    margin-bottom: 15px; 
    padding: 0 5px; /* Un poco de aire lateral */
}

.obj-header { 
    font-family: var(--font-subheading); 
    font-size: 0.75rem; 
    font-weight: 800; 
    color: var(--color-text-secondary); 
    text-transform: uppercase; 
    margin-bottom: 8px; 
    display: flex;
    align-items: center;
    gap: 6px;
}

.objectives-list ul { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

.objectives-list li { 
    font-family: var(--font-body);
    font-size: 0.85rem; 
    color: var(--color-text-secondary); 
    margin-bottom: 6px; 
    display: flex; 
    gap: 8px; 
    align-items: flex-start; /* Alinea el icono arriba si el texto es largo */
    line-height: 1.4;
}

/* Icono del check (verde táctico o primary según prefieras) */
.objectives-list li i { 
    color: #10b981; /* Verde éxito */
    margin-top: 4px; 
    font-size: 0.8rem; 
    flex-shrink: 0;
}

/* ==========================================================
   FIX FINAL: FILTROS MÓVIL (Buscador.php)
   ========================================================== */

@media (max-width: 900px) {
    
    /* 1. Forzamos que el sidebar EXISTA (anulamos el display: none antiguo) */
    .search-sidebar {
        display: flex !important; 
        flex-direction: column !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 85vh !important; /* Altura cómoda para el dedo */
        max-height: 85vh !important;
        
        /* Estilos visuales */
        background: var(--color-surface) !important;
        border-top: 4px solid var(--color-primary) !important;
        border-radius: 20px 20px 0 0 !important;
        box-shadow: 0 -10px 100px rgba(0,0,0,0.5) !important;
        
        /* Z-INDEX SUPREMO: Debe estar encima de todo */
        z-index: 2147483647 !important; 
        
        /* ESTADO INICIAL: Oculto hacia abajo */
        transform: translateY(120%) !important;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
        
        /* Reset de estilos de PC */
        top: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border-right: none !important;
        position: fixed !important; /* Asegurar fixed sobre sticky */
    }

    /* 2. ESTADO VISIBLE (Activado por JS 'mobile-open') */
    .search-sidebar.mobile-open {
        transform: translateY(0%) !important;
    }

    /* 3. ELEMENTOS INTERNOS DEL SIDEBAR */
    
    /* Header del filtro (con la X de cerrar) */
    .mobile-filters-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid var(--color-border);
        background: var(--color-surface);
        flex-shrink: 0; /* No se aplasta */
    }
    
    .mobile-filters-header h3 {
        margin: 0;
        font-size: 1.1rem;
        color: var(--color-primary);
    }

    /* Cuerpo con scroll */
    .mobile-filters-body {
        flex-grow: 1;
        overflow-y: auto;
        padding: 20px;
        /* Fix para scroll suave en iOS */
        -webkit-overflow-scrolling: touch; 
    }

    /* Botón flotante inferior */
    .mobile-filters-footer {
        display: block !important;
        padding: 20px;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        flex-shrink: 0;
    }

    /* 4. EL BACKDROP (Fondo oscuro) */
    .filters-backdrop {
        position: fixed;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.8);
        backdrop-filter: blur(4px);
        z-index: 2147483640 !important; /* Justo debajo del sidebar */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }
    
    .filters-backdrop.active {
        opacity: 1;
        visibility: visible;
        display: block !important;
    }
}

/* Estilos para items completados en el PANEL LATERAL (Main.js) */
.plan-item-card.plan-completed {
    background: rgba(34, 197, 94, 0.1); /* Fondo verde muy suave */
    border-left: 3px solid #22c55e; /* Borde verde eléctrico */
    opacity: 0.8;
}

.plan-item-card.plan-completed .plan-stop-title {
    text-decoration: line-through;
    color: #22c55e;
}

.plan-item-card.plan-completed .plan-thumb img {
    filter: grayscale(1);
    opacity: 0.6;
}

/* Badge sobre la imagen */
.done-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    color: #22c55e;
    font-size: 1.2rem;
    font-weight: bold;
}
/* 1. IMPRESCINDIBLE: Confinar el badge dentro de la imagen */
.plan-thumb {
    position: relative !important; /* Esto atrapa al badge dentro de la miniatura */
    overflow: hidden; /* Asegura que no se salga nada por los bordes redondeados */
}

/* 2. Ajuste del Badge (Capa oscura + Tick) */
.done-badge {
    position: absolute;
    inset: 0; /* Ocupa todo el espacio DEL .plan-thumb (ahora sí) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5); /* Fondo oscuro semitransparente */
    color: #22c55e; /* Color verde del tick */
    font-size: 1.5rem;
    z-index: 10;
    
    /* CRÍTICO: Permite hacer clic a través del badge (si la imagen es un enlace) */
    pointer-events: none; 
}

/* 3. Asegurar que el Panel Lateral esté POR ENCIMA del overlay general */
#planner-panel {
    z-index: 10000 !important; /* Muy alto para ganar a todo */
}

#planner-overlay {
    z-index: 9999 !important; /* Justo debajo del panel */
}

/* 4. Estilo de la tarjeta completada (ajuste visual) */
.plan-item-card.plan-completed {
    background: rgba(34, 197, 94, 0.05); /* Fondo verde muy sutil */
    border-left: 3px solid #22c55e;
    opacity: 1; /* Restauramos opacidad para que no se vea "deshabilitado" */
}

/* Texto tachado opcional */
.plan-item-card.plan-completed .plan-stop-title {
    text-decoration: line-through;
    opacity: 0.7;
}

/* ==========================================================
   SOLUCIÓN DEFINITIVA: CAJÓN FLEXIBLE MÓVIL (CORREGIDO V2)
   ========================================================== */

/* 1. OCULTAR EN PC SIEMPRE */
.kit-drawer { display: none; }

/* 2. ESTILOS EXCLUSIVOS MÓVIL */
@media (max-width: 1024px) {

    /* --- A. CONTENEDOR PRINCIPAL --- */
    .kit-drawer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 85vh !important;
        max-height: 85vh !important;
        
        display: flex !important; 
        flex-direction: column !important;
        
        background-color: var(--color-surface, #1a1a1a) !important;
        
        /* Borde superior Naranja */
        border-top: 4px solid var(--color-primary, #f97316) !important;
        border-radius: 20px 20px 0 0 !important;
        
        /* FIX BORDE: Esto evita que el header corte las esquinas redondeadas */
        overflow: hidden !important; 
        
        box-shadow: 0 -10px 100px rgba(0,0,0,0.9) !important;
        z-index: 2147483640 !important; 
        
        transform: translateY(120%) !important;
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
        visibility: hidden;
    }

    .kit-drawer.is-open {
        transform: translateY(0%) !important;
        visibility: visible !important;
    }

    /* --- B. HEADER --- */
    .kit-drawer .drawer-header {
        flex: 0 0 auto !important;
        display: flex; justify-content: space-between; align-items: center;
        padding: 15px 25px;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        background: var(--color-surface, #1a1a1a);
        min-height: 60px;
        /* Nos aseguramos que el fondo no tape el borde del padre */
        z-index: 10; 
    }
    
    .kit-drawer #drawerTitle {
        font-family: var(--font-heading, sans-serif);
        font-size: 1.2rem; color: var(--color-primary, #f97316); margin: 0;
    }
    .drawer-close-x {
        background: none; border: none; font-size: 1.5rem; color: var(--color-primary, #F0F2F5); padding: 0;
    }

    /* --- C. WRAPPER (Flex) --- */
    .drawer-content-wrapper {
        display: flex !important; 
        flex-direction: column !important;
        flex: 1 1 auto !important; 
        height: auto !important; /* Dejamos que Flex calcule la altura */
        overflow: hidden !important; 
        min-height: 0 !important;
    }

    /* --- D. ZONA SCROLL --- */
    .drawer-body-scroll {
        flex: 1 1 auto !important; 
        overflow-y: auto !important; 
        padding: 10px 20px;
        scrollbar-width: thin;
        scrollbar-color: var(--color-primary, #f97316) transparent;
        -webkit-overflow-scrolling: touch;
    }
    .drawer-body-scroll::-webkit-scrollbar { width: 5px; }
    .drawer-body-scroll::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 4px; }

    /* --- E. FOOTER (FIX BOTÓN SOLAPADO) --- */
    .drawer-footer-fixed {
        flex: 0 0 auto !important;
        background: var(--color-surface, #1a1a1a);
        border-top: 1px solid rgba(255,255,255,0.1);
        z-index: 50;
        
        /* === AJUSTE DE ALTURA === */
        /* Antes: 130px (Muy alto) */
        /* Ahora: 90px (Más bajo, justo encima de la barra de iconos) */
        padding: 15px 25px 90px 25px !important; 
    }
    
    .btn-full-width {
        display: flex; justify-content: center; align-items: center; width: 100%;
        padding: 15px; font-weight: 800; text-transform: uppercase;
        background: var(--color-primary, #f97316); color: #fff; border-radius: 8px;
        text-decoration: none;
        box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
    }
}

/* ================================================================= */
/* === SIDEBAR V13: GHOST WIREFRAME (FINAL & STABLE)             === */
/* ================================================================= */

/* 1. CONTENEDOR PRINCIPAL (HUD FRAME) */
#desktopSidebarContainer.wireframe-hud {
    background: transparent; /* SIN RELLENO */
    padding: 0;
    display: flex; flex-direction: column; gap: 15px;
    margin-bottom: 50px;
}

/* Cabecera del Sistema (Solo líneas y texto) */
.hud-top-bar {
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 5px; margin-bottom: 10px;
    font-family: var(--font-tactical); /* Orbitron */
    font-size: 0.75rem; letter-spacing: 2px;
    color: var(--color-primary);
    position: relative;
}
.hud-status { text-shadow: 0 0 5px var(--color-primary); font-weight: bold; }


/* 2. MÓDULO WIREFRAME (EL ESQUELETO) */
.wire-module {
    background: transparent; /* SIN RELLENO DE FONDO */
    /* Borde sutil estructura (Gris en oscuro, Gris medio en claro) */
    border: 1px solid rgba(255, 255, 255, 0.15); 
    border-left: 2px solid rgba(255, 255, 255, 0.3); 
    position: relative;
    transition: all 0.3s ease;
    
    /* Efecto "Esquina HUD" cortada */
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% calc(100% - 10px), 
        calc(100% - 10px) 100%, 
        0 100%
    );
}

/* ESTADO ACTIVO (Encendido) */
.wire-module.active {
    border-color: rgba(255, 94, 20, 0.5); /* Borde se vuelve naranja translúcido */
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.1) inset; /* Resplandor INTERNO */
}

/* Esquinas decorativas que aparecen al activar */
.wire-module::before, .wire-module::after {
    content: ''; position: absolute; width: 10px; height: 10px;
    border-color: var(--color-primary); border-style: solid;
    opacity: 0; transition: opacity 0.3s; pointer-events: none;
}
.wire-module::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.wire-module::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }

.wire-module.active::before, .wire-module.active::after { opacity: 1; }


/* 3. CABECERA (HEAD) */
.wire-head {
    padding: 15px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
    border-bottom: 1px dashed rgba(255,255,255,0.1); 
    background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent);
}
.wire-module.active .wire-head {
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.1), transparent);
    border-bottom: 1px solid var(--color-primary);
}

.wh-title {
    font-family: var(--font-subheading); /* Montserrat */
    font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px;
    color: var(--color-text-primary);
    display: flex; gap: 10px; align-items: center;
}
.wh-title i { color: var(--color-primary); width: 20px; text-align: center; }

/* SELLO TÉCNICO DERECHA */
.wh-stamp {
    font-family: var(--font-tactical); 
    font-size: 0.65rem; color: var(--color-text-secondary);
    border: 1px solid var(--color-text-secondary);
    padding: 2px 6px; letter-spacing: 1px; opacity: 0.7;
}
.wire-module.active .wh-stamp {
    color: var(--color-primary); border-color: var(--color-primary); opacity: 1;
    text-shadow: 0 0 5px var(--color-primary);
}


/* 4. CUERPO (BODY) */
.wire-body {
    max-height: 0; overflow: hidden;
    transition: max-height 0.4s ease;
    position: relative;
    font-family: var(--font-body); 
}
.wire-module.active .wire-body { max-height: 2000px; }

/* Rejilla táctica de fondo sutil */
.grid-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px; pointer-events: none; z-index: 0;
}


/* --- 5. WIDGETS ESPECÍFICOS --- */

/* A. TIMELINE (HOJA RUTA) */
.wire-timeline {
    list-style: none; padding: 20px 0; margin: 0; position: relative; z-index: 1;
}
.wire-timeline::before { /* Eje vertical */
    content: ''; position: absolute; top: 0; bottom: 0; left: 25px;
    width: 1px; background: rgba(255,255,255,0.2);
}
.wire-timeline li {
    position: relative; padding: 8px 10px 8px 50px; margin-bottom: 2px;
}
.wt-diamond { /* Rombo */
    position: absolute; left: 21px; top: 14px;
    width: 9px; height: 9px;
    background: var(--color-background); /* Tapa la línea */
    border: 1px solid var(--color-text-secondary);
    transform: rotate(45deg); transition: all 0.2s;
}
.wire-timeline li a {
    color: var(--color-text-secondary); text-decoration: none; font-size: 1rem;
    transition: all 0.2s; display: block;
}
/* Activo */
.wire-timeline li.active .wt-diamond {
    background: var(--color-primary); border-color: var(--color-primary);
    box-shadow: 0 0 10px var(--color-primary);
}
.wire-timeline li.active a { 
    color: #fff; font-weight: 700; text-shadow: 0 0 5px var(--color-primary); 
}


/* B. ALERTAS */
.warning-mode.active { border-color: rgba(239, 68, 68, 0.5); }
.warning-mode .wh-title i { color: #ef4444; }
.warning-mode .blink { animation: blink 1s infinite; color: #ef4444; border-color: #ef4444; }

.wire-list { list-style: none; padding: 15px; margin: 0; position: relative; z-index: 1; }
.warning-item {
    display: flex; gap: 15px; padding: 10px 0; border-bottom: 1px dotted rgba(255,255,255,0.1);
    color: #fca5a5; font-size: 0.95rem; align-items: flex-start;
}


/* C. INTEL MISIÓN (FIX ALINEACIÓN) */
.wire-kv-grid { padding: 10px; position: relative; z-index: 1; }
.wire-kv-row {
    display: flex; justify-content: space-between; align-items: baseline; /* Alinea textos */
    padding: 12px 10px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.wk-label {
    width: 40%; flex-shrink: 0; /* Columna fija */
    font-size: 0.7rem; font-weight: 700; color: var(--color-text-secondary);
    text-transform: uppercase; display: flex; align-items: center; gap: 8px;
}
.wk-label i { color: var(--color-primary); font-size: 0.9rem; }
.wk-val { 
    width: 60%; text-align: right; 
    font-family: var(--font-body); font-size: 0.95rem; color: var(--color-text-primary); 
    line-height: 1.3;
}


/* D. SUPERVIVENCIA (Logística) */
.wire-logistics { padding: 15px; display: flex; flex-direction: column; gap: 20px; position: relative; z-index: 1; }
.wl-header {
    display: flex; align-items: center; gap: 15px; margin-bottom: 10px;
    border-bottom: 1px solid var(--color-primary); padding-bottom: 5px; width: fit-content;
}
.wl-badge {
    color: var(--color-primary); font-family: var(--font-tactical); font-weight: 900; 
    font-size: 1rem;
}
.wl-zone { color: var(--color-text-primary); font-weight: 700; font-size: 0.9rem; text-transform: uppercase; }

.wl-content { display: flex; flex-direction: column; gap: 10px; }
.wl-row {
    display: flex; gap: 15px; align-items: flex-start;
    font-size: 0.95rem; color: var(--color-text-secondary);
    padding: 8px; border-left: 2px solid var(--color-text-secondary);
}
.wl-row i { color: var(--color-primary); margin-top: 4px; width: 16px; text-align: center; }
.wl-row strong { color: var(--color-text-primary); font-weight: 700; } /* Resaltar local */


/* E. INCÓGNITO & COMIDA (FIX RESALTADO NARANJA) */
.incognito-item-wire {
    padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,0.1);
    display: flex; flex-direction: column; gap: 4px;
}
/* El título SIEMPRE naranja */
.wi-title, 
.check-mode strong { 
    color: var(--color-primary) !important; 
    font-weight: 800; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px;
}
.wi-text, .check-mode span { font-size: 0.9rem; opacity: 0.9; line-height: 1.4; color: var(--color-text-primary); }

/* Checklist de Comida */
.check-mode li { display: flex; gap: 10px; padding: 8px 0; align-items: flex-start; }
.check-mode li i { color: #10b981; margin-top: 4px; } /* Verde Táctico */


/* F. KIT AHORRO (GRID INVENTARIO) */
.wire-tools-grid { 
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 15px; position: relative; z-index: 1;
}
.wire-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 15px 10px; height: 100%;
    background: rgba(255,255,255,0.02); 
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--color-text-secondary); text-decoration: none; 
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    transition: all 0.2s ease;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.wire-btn i { color: var(--color-primary); font-size: 1.4rem; margin-bottom: 8px; transition: transform 0.2s; }

.wire-btn:hover {
    background: rgba(249, 115, 22, 0.1); border-color: var(--color-primary);
    color: var(--color-text-primary);
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.2) inset;
}
.wire-btn:hover i { transform: scale(1.1); }


/* ======================================================= */
/* === FIX MODO CLARO (VISIBILIDAD Y CONTRASTE)        === */
/* ======================================================= */
body.light-theme .wire-module {
    /* Bordes más oscuros para que se vean sobre blanco */
    border-color: rgba(0, 0, 0, 0.2);
    /* Fondo sutil para separar del blanco puro */
    background: rgba(0, 0, 0, 0.03);
}
body.light-theme .wire-head {
    border-bottom-color: rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.05);
}
body.light-theme .wh-title { color: #333; }
body.light-theme .wh-stamp { color: #555; border-color: #999; }

/* Textos oscuros */
body.light-theme .wire-body, 
body.light-theme .wk-val, 
body.light-theme .wi-text,
body.light-theme .wl-row { color: #333; }

body.light-theme .wk-label { color: #666; }
body.light-theme .wire-timeline li a { color: #555; }
body.light-theme .wire-timeline li.active a { color: #000; text-shadow: none; }
body.light-theme .wt-diamond { background: #fff; border-color: #999; }

body.light-theme .wire-btn {
    background: #fff; border-color: #ccc; color: #555;
}
/* Rejilla invertida */
body.light-theme .grid-overlay {
    background-image: 
        linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}

/* ======================================================= */
/* === FIX URGENTE: ALERTAS EN MODO CLARO (LEGIBILIDAD) === */
/* ======================================================= */

/* 1. Contenedor de Alertas: Fondo rojizo muy suave para diferenciar */
body.light-theme .wire-module.warning-mode {
    background-color: #fff1f2 !important; /* Rosa muy pálido casi blanco */
    border-color: rgba(220, 38, 38, 0.3) !important; /* Borde rojo sutil */
}

/* 2. Cabecera (Icono y Título) */
body.light-theme .warning-mode .wh-title {
    color: #991b1b !important; /* Rojo oscuro profundo */
}
body.light-theme .warning-mode .wh-title i {
    color: #dc2626 !important; /* Rojo vivo para el icono triangular */
}

/* 3. El Sello "CRITICAL" */
body.light-theme .warning-mode .wh-stamp {
    color: #b91c1c !important; 
    border-color: #ef4444 !important;
    background: #fff;
}

/* 4. EL TEXTO DE LA LISTA (Lo más importante) */
body.light-theme .warning-item {
    /* Cambiamos el rosa pastel por un rojo oscuro muy legible */
    color: #7f1d1d !important; 
    border-bottom-color: rgba(220, 38, 38, 0.15) !important;
}

/* 5. Los iconos de exclamación de la lista */
body.light-theme .warning-item i {
    color: #dc2626 !important; /* Rojo señal */
}

/* ========================================================= */
/* DISEÑO SHARD CARD - COMPLETO                             */
/* ========================================================= */

/* --- 1. TITULO DE SECCIÓN --- */
.section-title {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--color-text-primary);
    margin-bottom: 1rem;
    text-shadow: 4px 4px 0px var(--color-primary); /* Pop Art/Brutal Shadow */
}

/* --- 2. CONTROLES DE NAVEGACIÓN (ACCESIBILIDAD) --- */
/* Nuevo: Botones para mover el carrusel sin arrastrar */
.carousel-controls-container {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-right: 5vw;
    margin-bottom: -20px;
    position: relative;
    z-index: 20;
}

.tactical-nav-btn {
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    width: 40px; height: 40px;
    cursor: pointer;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tactical-nav-btn:hover, .tactical-nav-btn:focus {
    background: var(--color-primary);
    color: var(--color-text-primary);
    outline: 2px solid white;
}

/* --- 3. CAROUSEL ZONE --- */
.carousel-zone {
    width: 100%;
    padding: 40px 0 60px 0;
    overflow-x: auto;
    display: flex;
    gap: 30px;
    padding-left: 5vw;
    padding-right: 5vw;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    
    /* Configuración para arrastre (Drag) */
    cursor: grab;
    user-select: none;
}

.carousel-zone::-webkit-scrollbar { 
    display: none; /* Chrome/Safari */
}

.carousel-zone.active {
    cursor: grabbing;
    scroll-snap-type: none; /* Desactivar snap al arrastrar para suavidad */
}

/* --- 4. THE SHARD CARD (Core Design) --- */
.shard-card {
    /* Dimensiones fijas para igualdad estricta */
    flex: 0 0 300px;
    width: 300px;
    min-width: 300px;
    height: 520px; /* Altura fija para alinear botones */
    
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    scroll-snap-align: center;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    
    /* Aggressive Polygon Shape */
    clip-path: polygon(
        20px 0, 100% 0, 
        100% 85%, calc(100% - 30px) 100%, 
        0 100%, 0 20px
    );
}

/* Decorative Corner Brackets */
.shard-card::before, .shard-card::after {
    content: ''; position: absolute; width: 20px; height: 20px;
    transition: border-color 0.3s;
    z-index: 10; pointer-events: none;
}
 
/* Top Left Bracket */
.shard-card::before {
    top: 0; left: 0;
    border-top: 3px solid var(--color-text-secondary);
    border-left: 3px solid var(--color-text-secondary);
}
/* Bottom Right Bracket */
.shard-card::after {
    bottom: 0; right: 0;
    border-bottom: 3px solid var(--color-text-secondary);
    border-right: 3px solid var(--color-text-secondary);
}

/* --- HOVER STATE: ACTIVATION --- */
.shard-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
    z-index: 5;
}

.shard-card:hover::before, 
.shard-card:hover::after {
    border-color: var(--color-primary);
}

/* --- 5. CARD CONTENT --- */
 
/* Header */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.country-tag {
    font-family: var(--font-tactical); /* Orbitron */
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 2px;
    color: var(--color-text-secondary);
    transition: color 0.3s;
}
.shard-card:hover .country-tag { color: var(--color-primary); }

/* Estado Base (Desactivado) */
.bookmark-mision-btn {
    /* 1. ELIMINAMOS EL CÍRCULO */
    background: transparent !important; /* Sin fondo */
    border: none !important;            /* Sin borde */
    box-shadow: none !important;        /* Sin sombra de caja */
    border-radius: 0 !important;
    
    /* 2. Color base del icono (Gris discreto) */
    color: var(--color-text-secondary); 
    opacity: 0.7; /* Un poco transparente para que no moleste */
    
    /* 3. Ajustes de posición */
    width: auto;
    height: auto;
    padding: 8px; /* Mantenemos área de click cómoda */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Efecto rebote suave */
    
    /* Tamaño del icono */
    font-size: 1.3rem; 
    z-index: 10; /* Aseguramos que esté por encima de la imagen */
}

.bookmark-mision-btn:hover {
    color: var(--color-primary);
    opacity: 1;
    transform: scale(1.2); /* Crece un poco */
    background: transparent !important;
}

/* Estilo para cuando está seleccionado (relleno manejado por cambio de clase fa-regular a fa-solid en JS) */
.bookmark-mision-btn.selected {
    color: var(--color-primary);
}

/* Image & Map Button */
.card-visual {
    height: 190px;
    width: 100%;
    overflow: hidden;
    position: relative;
    flex-shrink: 0; /* Evita que la imagen se encoja */
}
 
.card-visual img {
    width: 100%; height: 100%; object-fit: cover;
    transition: 0.5s ease;
    filter: grayscale(80%) contrast(1.1);
}

.shard-card:hover .card-visual img {
    filter: grayscale(0%);
    transform: scale(1.1);
}

.map-btn {
    position: absolute;
    bottom: 0; right: 0;
    
    /* El fondo es siempre oscuro, así que forzamos el texto a BLANCO siempre */
    background: rgba(30, 35, 40, 0.9);
    color: #ffffff !important; /* <--- CAMBIO AQUÍ (Antes era var(--color-text-primary)) */
    
    border: none;
    padding: 8px 15px;
    font-family: var(--font-tactical);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    
    /* Usaremos la variable nueva aquí abajo, pero de momento mantenemos esto */
    clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%);
    
    transition: 0.3s;
    transform: translateY(100%);

    z-index: 5; /* Asegura que esté encima del link */
}

.shard-card:hover .map-btn { transform: translateY(0); }
.map-btn:hover { background: var(--color-primary); color: #fff; }

/* Meta Strip */
.meta-strip-stacked {
    background: rgba(0,0,0,0.2);
    border-bottom: 1px solid var(--color-border);
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Categoría (Arriba) */
.meta-cat {
    font-family: var(--font-tactical);
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--color-primary); /* Naranja para destacar */
    text-transform: uppercase;
    font-weight: 700;
}

/* Fila de Datos (Abajo) */
.meta-tech-row {
    display: flex;
    gap: 10px;
}

/* Cajitas de Datos */
.tech-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: var(--font-body); /* Fuente legible numéricos */
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.tech-box i {
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

/* Efecto hover en la tarjeta ilumina las cajas */
.shard-card:hover .tech-box {
    border-color: rgba(249, 115, 22, 0.5);
    background: rgba(249, 115, 22, 0.1);
    color: var(--color-text-primary);
}
.shard-card:hover .tech-box i {
    color: var(--color-primary);
}

.meta-item {
    flex: 1;
    padding: 8px;
    font-family: var(--font-tactical);
    font-size: 0.7rem;
    text-align: center;
    border-right: 1px solid var(--color-border);
    color: var(--color-text-secondary);
}
.meta-item:last-child { border-right: none; color: var(--color-text-primary); }
.meta-item i { color: var(--color-primary); margin-right: 5px; }

/* Body */
.card-body { 
    padding: 20px; 
    flex-grow: 1; /* Esto hace que el body ocupe todo el espacio sobrante */
    display: flex;
    flex-direction: column;
}

.card-title {
    font-family: var(--font-subheading);
    font-weight: 800;
    /* REDUCIDO: Tamaño de letra más pequeño para que quepa todo */
    font-size: 1rem; 
    margin: 0 0 10px 0;
    line-height: 1.2;
    color: var(--color-text-primary);
    text-transform: uppercase;
    
    /* CAMBIO: Permitir que el texto fluya y no se corte */
    display: block;
    overflow: visible;
    white-space: normal;
    
    /* Quitamos el truncado de Webkit */
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
}
.shard-card:hover .card-title { color: var(--color-primary); transition: color 0.3s; }

/* Nuevo: Estilo de descripción (Reemplaza al acordeón) */
.briefing-static {
    margin-bottom: auto; /* Empuja el footer hacia abajo */
}

/* Ajuste descripción recuperada */
.briefing-text {
    font-family: var(--font-body);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin-top: 10px;
    
    /* CAMBIO: Ahora mostramos hasta 7 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 7; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
    opacity: 0.9;
}

/* Footer */
.card-footer { 
    padding: 0 20px 20px; 
    display: flex; 
    justify-content: flex-end; 
    margin-top: auto; /* Asegura que se quede abajo del todo */
}
 
.expand-btn {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: 8px 20px;
    font-family: var(--font-tactical);
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%);
    transition: 0.3s;
}
.expand-btn:hover {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 0 15px var(--color-primary);
}

/* =================================================================== */
/* === 6. MODAL SYSTEM (CORREGIDO PARA LIGHT/DARK THEME)           === */
/* =================================================================== */

.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    
    /* Fondo fijo semitransparente oscuro (siempre se ve mejor oscuro) */
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(5px);
}

/* En modo claro, hacemos el overlay un poco más ligero */
body.light-theme .modal-overlay {
    background: rgba(255, 255, 255, 0.85);
}

.modal-box {
    width: 85%; max-width: 900px; height: 65vh;
    
    /* USO DE VARIABLES: Esto asegura que cambie con el tema */
    background-color: var(--color-surface); 
    color: var(--color-text-primary);
    border: 2px solid var(--color-primary);
    
    /* Complex Modal Clip */
    clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.modal-header {
    padding: 15px 30px;
    
    /* USO DE VARIABLES */
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-primary);
    
    display: flex; justify-content: space-between; align-items: center;
}

.modal-title {
    font-family: var(--font-heading); 
    color: var(--color-primary);
    font-size: 1.5rem; letter-spacing: 1px;
}

.close-btn {
    background: none; border: none; 
    color: var(--color-text-secondary);
    font-size: 2rem; cursor: pointer; transition: 0.3s;
}
.close-btn:hover { color: var(--color-primary); transform: rotate(90deg); }

/* --- MAPA Y CONTENEDOR --- */

/* Contenedor del mapa Leaflet */
.modal-map {
    flex: 1;
    width: 100%;
    position: relative;
    z-index: 1;

    /* CRÍTICO: Usar la variable de superficie para evitar el fondo negro fijo */
    background-color: var(--color-surface) !important; 
}

/* El ID específico que usas en el JS */
#modal-leaflet-map {
    background-color: var(--color-surface) !important;
}

/* Grid Overlay decorativo sobre el mapa */
.modal-map::after {
    content: ''; position: absolute; inset: 0;
    /* Grid adaptable al color del borde */
    background: 
        linear-gradient(var(--color-border) 1px, transparent 1px), 
        linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
    background-size: 40px 40px; 
    opacity: 0.1; /* Muy sutil */
    pointer-events: none;
    z-index: 0; 
}

/* Footer del Modal (Status) */
.modal-footer-status {
    padding: 10px 20px; 
    border-top: 1px solid var(--color-border); /* Variable adaptable */
    font-family: monospace; 
    font-size: 0.8rem; 
    
    /* Fondo y texto adaptables */
    background-color: var(--color-surface);
    color: var(--color-text-secondary);
    
    display: flex; 
    justify-content: space-between;
}

/* ======================================================= */
/* === 6.1 ESTILOS DEL POPUP LEAFLET (MODO CLARO/OSCURO) === */
/* ======================================================= */

/* 1. EL GLOBO (CONTENEDOR) */
.leaflet-popup-content-wrapper, 
.leaflet-popup-tip {
    /* Fondo adaptable (Blanco en Light, Gris en Dark) */
    background-color: var(--color-surface) !important; 
    
    /* Texto adaptable */
    color: var(--color-text-primary) !important;       
    
    /* Borde y Sombra */
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-primary); /* Borde naranja táctico */
    border-radius: 4px; /* Bordes rectos estilo tech */
}

/* 2. EL TEXTO DEL CUERPO (Coordenadas) */
.leaflet-popup-content {
    margin: 13px 18px !important;
    font-family: var(--font-body) !important;
    
    /* AUMENTADO: Tamaño de letra del cuerpo */
    font-size: 1rem !important; 
    
    line-height: 1.6;
}

/* 3. EL TÍTULO (Nombre de la parada) */
/* Esto afecta a la etiqueta <strong> que pusimos en el JS */
.leaflet-popup-content strong {
    display: block;
    color: var(--color-primary);
    font-family: var(--font-heading);
    text-transform: uppercase;
    
    /* AUMENTADO: Título grande y visible */
    font-size: 1.4rem !important; 
    
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px dashed var(--color-border); /* Línea separadora sutil */
    letter-spacing: 0.5px;
    line-height: 1.1;
}

/* 4. BOTÓN DE CERRAR (X) */
.leaflet-container a.leaflet-popup-close-button {
    color: var(--color-text-secondary) !important;
    font-size: 1.2rem !important;
    top: 8px;
    right: 8px;
    transition: color 0.3s ease;
}

.leaflet-container a.leaflet-popup-close-button:hover {
    color: var(--color-primary) !important;
}

/* ======================================================= */
/* === FIX MARCADORES TÁCTICOS (PULSOS PERDIDOS)       === */
/* ======================================================= */

/* 1. La clase contenedora que define el JS de Leaflet */
.custom-div-icon {
    background: transparent !important;
    border: none !important;
    /* CRÍTICO: Permite que el pulso se expanda fuera de los 24x24px */
    overflow: visible !important; 
}

/* 2. Refuerzo del contenedor interno */
.tactical-marker-box {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible !important; /* Asegura doblemente la visibilidad */
}

/* 3. Refuerzo del Punto Central (TARGET) */
.tactical-dot {
    width: 14px; /* Un poco más grande para que se vea bien */
    height: 14px;
    background-color: var(--color-primary) !important; /* Forzamos el naranja */
    border: 2px solid #fff;
    border-radius: 50%;
    z-index: 500 !important; /* Encima del pulso */
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* 4. Refuerzo de la Animación (PULSO) */
.tactical-pulse {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    width: 14px; 
    height: 14px;
    background-color: var(--color-primary) !important;
    border-radius: 50%;
    z-index: 400 !important; /* Debajo del punto */
    opacity: 0.6;
    animation: radar-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Definición de la animación por si se había perdido */
@keyframes radar-ping {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    70% {
        transform: translate(-50%, -50%) scale(4); /* Expansión grande */
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

/* ======================================================= */
/* === UTILIDADES DE FORMA TÁCTICA (GLOBAL)            === */
/* ======================================================= */

/* Aplica el corte medio (ideal para botones) */
.u-clip-md {
    clip-path: var(--clip-tactical-md);
}

/* Aplica el corte grande (ideal para cards) */
.u-clip-lg {
    clip-path: var(--clip-tactical-lg);
}

/* Opcional: Aplicar por defecto a TODOS los botones primarios */
/* Descomenta esto si quieres que TODOS tus botones naranjas tengan el corte automáticamente */
/*
.button--primary, .btn-mission, .tactical-nav-btn {
    clip-path: var(--clip-tactical-md);
    border-radius: 0 !important; 
}
*/

/* ======================================================= */
/* === NUEVO TÍTULO SECCIÓN (ESTILO CYBERLUX TÁCTICO)  === */
/* ======================================================= */

/* Definición de la animación del escáner */
@keyframes cyber-scan {
    0% { left: 0; }
    50% { left: calc(100% - 10px); } /* Se mueve hasta el final menos su propio ancho */
    100% { left: 0; }
}

.cyber-title-block {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    padding: 0 15px;
}

.cyber-subtitle-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.cyber-subtitle-text {
    font-family: var(--font-tactical);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
    text-shadow: 0 0 10px rgba(255, 94, 20, 0.4);
}

/* La línea base */
.cyber-decoration-line {
    display: block;
    width: 60px; /* Un poco más larga para que se note el movimiento */
    height: 3px;
    background-color: rgba(255, 94, 20, 0.3); /* Fondo más sutil */
    position: relative;
    border-radius: 2px;
    overflow: hidden; /* Contiene el punto dentro de los bordes redondeados */
}

/* El Punto ANIMADO */
.cyber-decoration-line::before {
    content: '';
    position: absolute;
    left: 0; 
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background-color: #fff;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--color-primary), 0 0 5px #fff; 
    z-index: 2;
    
    /* CAMBIO AQUÍ: De 2s a 4s para que vaya más despacio */
    animation: cyber-scan 4s ease-in-out infinite; 
}

.cyber-main-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    color: var(--color-text-primary);
    text-transform: uppercase;
    margin: 0;
    text-shadow: 4px 4px 0px rgba(0,0,0,0.3);
}

.cyber-desc-text {
    font-family: var(--font-subheading);
    color: var(--color-text-secondary);
    font-size: 1.15rem; /* Ligeramente más grande */
    max-width: 750px;
    margin: 20px auto 0;
    line-height: 1.5;
    font-weight: 500;
}

/* Ajuste para Modo Claro */
body.light-theme .cyber-decoration-line::before {
    background-color: #fff;
    border-color: var(--color-primary);
     box-shadow: 0 0 8px var(--color-primary);
}

/* Ajuste Título en Modo Claro */
body.light-theme .cyber-main-title {
    color: var(--color-primary); /* Naranja en vez de gris oscuro */
    /* Opcional: Le quitamos la sombra negra dura para que se vea más limpio en blanco */
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1); 
}

/* ============================================================ */
/* === SECCIÓN AGENCIA: LAYOUT ASIMÉTRICO (RESPONSIVE)      === */
/* ============================================================ */

.cyber-agency-wrapper {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
}

/* --- GRID PRINCIPAL --- */
.cyber-agency-grid {
    display: grid;
    grid-template-columns: 1fr; /* Móvil: 1 columna */
    gap: 40px;
    align-items: start; /* Alineación superior */
    margin-bottom: 40px;
}

/* En Escritorio: 2 columnas (40% Título - 60% Texto) */
@media (min-width: 992px) {
    .cyber-agency-grid {
        grid-template-columns: 0.8fr 1.2fr; 
        gap: 60px;
        align-items: center; /* Centrado vertical en PC queda muy elegante */
    }
    
    /* Línea separadora vertical sutil entre columnas */
    .cyber-col-left {
        border-right: 1px solid var(--color-border);
        padding-right: 30px;
    }
}

/* --- COLUMNA IZQUIERDA (TÍTULO) --- */
.cyber-agency-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    line-height: 1;
    color: var(--color-text-primary);
    text-transform: uppercase;
    margin-top: 15px;
    margin-bottom: 0;
}

.cyber-agency-title .text-highlight {
    color: var(--color-primary); /* Naranja */
    display: block; /* Salto de línea forzado */
}

/* --- COLUMNA DERECHA (DATOS) --- */
.cyber-col-right {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Espacio entre los dos bloques de texto */
}

.cyber-data-head {
    font-family: var(--font-subheading);
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--color-primary); /* Naranja */
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Adorno pequeño antes del título (cuadrado) */
.cyber-data-head::before {
    content: '';
    display: block;
    width: 8px; height: 8px;
    background-color: var(--color-primary);
    box-shadow: 0 0 5px var(--color-primary);
}

.cyber-data-body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary); /* Gris técnico para que sea sutil */
    margin: 0;
    padding-left: 18px; /* Indentación para alinear con el texto del título */
}

/* --- FOOTER (PREGUNTA FINAL) --- */
.cyber-agency-footer {
    text-align: center;
    border-top: 1px dashed var(--color-border);
    padding-top: 30px;
    max-width: 700px;
    margin: 0 auto;
}

.agency-brief {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    margin-bottom: 10px;
}

.agency-question {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0;
    letter-spacing: 1px;
}

/* AJUSTES MODO CLARO */
body.light-theme .cyber-col-left {
    border-right-color: rgba(0,0,0,0.1);
}
body.light-theme .cyber-agency-footer {
    border-top-color: rgba(0,0,0,0.1);
}

/* ============================================================ */
/* === DASHBOARD TÁCTICO V.FINAL (GRID AREAS)               === */
/* ============================================================ */

.tactical-dashboard-section {
    background-color: var(--color-background);
    padding: 60px 0;
    overflow: hidden;
}

/* --- LAYOUT RESPONSIVE --- */
.dashboard-grid-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    
    /* Configuración por defecto (MÓVIL - FLEX COLUMNA) */
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* --- ORDEN Y ALINEACIÓN MÓVIL (Actualizado: Todo a la izquierda) --- */
.dash-area-header { 
    order: 1; 
    text-align: left !important; /* Alineación izquierda forzada */
    margin-bottom: 20px; /* Un poco de aire antes del carrusel */
}

.dash-area-carousel { 
    order: 2; 
} 

.dash-area-cta { 
    order: 3; 
    text-align: left !important; /* Alineación izquierda forzada */
    margin-top: 20px; 
    padding-left: 5px; /* Pequeño ajuste para que no pegue con el borde */
}

.dash-area-info { 
    display: none !important; /* Cajas ocultas en móvil */
}


/* --- LAYOUT ESCRITORIO (GRID TETRIS) --- */
@media (min-width: 1024px) {
    .dashboard-grid-wrapper {
        display: grid;
        /* Definimos anchuras: 35% Izquierda, 65% Derecha */
        grid-template-columns: 35% 65%;
        /* Definimos filas automáticas según contenido */
        grid-template-rows: auto auto auto;
        /* EL MAPA DEL TESORO: Dónde va cada cosa */
        grid-template-areas: 
            "header  carousel"
            "info    carousel"
            "cta     carousel";
        
        /* Alineación vertical centrada */
        align-content: center;
        gap: 0 60px; /* 0 vertical gap (controlado por margins), 60px horizontal */
    }

    /* Asignamos áreas */
    .dash-area-header   { grid-area: header; text-align: left; margin-bottom: 40px; } /* Separación Título-Cajas */
    .dash-area-info     { grid-area: info;   display: flex !important; flex-direction: column; gap: 20px; margin-bottom: 30px; } /* Separación Cajas-CTA */
    .dash-area-cta      { grid-area: cta;    text-align: left; margin-top: 0; }
    .dash-area-carousel { grid-area: carousel; min-width: 0; align-self: center; }
}


/* --- ESTILOS VISUALES --- */

/* Título */
.cyber-agency-title {
    margin-top: 10px;
}

/* Cajas de Datos (Sin puntos, Iconos latiendo) */
.pulse-box {
    background: transparent;
    border-left: 1px solid rgba(255, 94, 20, 0.3); /* Línea fina izquierda */
    padding-left: 20px;
    transition: all 0.3s ease;
}
.pulse-box:hover {
    border-left-color: var(--color-primary);
}

.cyber-data-head {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 5px;
    display: flex; align-items: center; gap: 10px;
}
/* Icono latiendo */
.cyber-data-head i {
    font-size: 1.1rem;
    animation: icon-pulse 2s infinite ease-in-out;
}
@keyframes icon-pulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(249, 115, 22, 0)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 5px rgba(249, 115, 22, 0.5)); transform: scale(1.1); }
}

.cyber-data-body {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0; opacity: 0.8;
}

/* CTA Final */
.dash-area-cta {
    border-top: 1px dashed rgba(255,255,255,0.1);
    padding-top: 20px;
}
.dash-area-cta p {
    font-family: var(--font-subheading);
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
    font-weight: 700; opacity: 0.6;
}
.dash-area-cta h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--color-text-primary);
    text-transform: uppercase;
    margin: 0;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.5);
}
.dash-area-cta:hover h3 {
    color: var(--color-primary);
    transition: color 0.3s ease;
}

/* Carrusel y Flechas */
.compact-carousel {
    display: flex;
    gap: 20px;
    
    /* CLAVE: Solo scroll horizontal, nada vertical */
    overflow-x: auto;
    overflow-y: hidden; 
    
    /* Espacio extra abajo para las sombras de las cards */
    padding-bottom: 40px; 
    margin-bottom: -20px;
    
    /* Comportamiento de scroll suave */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.compact-carousel::-webkit-scrollbar { display: none; }

/* 3. AJUSTE ALTURA TARJETA (Sin footer) */
.compact-carousel .shard-card {
    display: flex;
    flex-direction: column;
    
    /* CAMBIO: Subimos de 460px a 540px para más presencia */
    height: 540px; 
    min-height: 540px;
    
    flex: 0 0 300px;
    width: 300px;
    scroll-snap-align: start;
    background: var(--color-surface); /* Aseguramos fondo */
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.compact-carousel .shard-card:hover {
    border-color: var(--color-primary) !important;
    box-shadow: 0 5px 15px rgba(249, 115, 22, 0.15); /* Brillo naranja suave opcional */
    transform: translateY(-5px); /* Pequeña elevación táctica */
}

.compact-carousel .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 15px 20px 25px 20px; /* Más padding abajo */
    justify-content: flex-start;
}

/* Ajuste de altura del cuerpo para que quepa el texto */
.compact-carousel .shard-card .card-body {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Evita que se salga si es muy largo */
}

@media (max-width: 768px) {
    .compact-carousel .shard-card {
        height: auto; /* Dejar flexible en móvil o fijar algo menos */
        min-height: 500px;
    }
}

@media (min-width: 1024px) {
    .compact-carousel .shard-card {
        flex: 0 0 300px; width: 300px; /* PC: Compacto */
    }
}

/* 2. ESTILOS PARA LOS ENLACES DE LA TARJETA */
.card-visual-link {
    display: block;
    text-decoration: none;
    position: relative; /* Para el z-index del botón mapa */
}

.card-title-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.card-title-link:hover .card-title {
    color: var(--color-primary);
}

.carousel-controls-bottom {
    display: flex; justify-content: flex-end; gap: 15px; padding-right: 10px;
}

/* 4. ESTADO ACTIVO DEL BOTÓN BOOKMARK (Feedback Visual) */
/* Tu main.js añade la clase .added-active al botón cuando se guarda */
.bookmark-mision-btn.added-active {
    background: transparent !important;
    border: none !important;
    
    /* COLOR NARANJA CORPORATIVO */
    color: var(--color-primary) !important;
    opacity: 1;
    
    /* Efecto de "Luz" solo en el icono */
    filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.6));
    transform: scale(1.1);
}

/* Ajuste específico para el icono sólido */
.bookmark-mision-btn i {
    pointer-events: none; /* Evita conflictos de click en el icono SVG */
}

/* ============================================================ */
/* === FIX VISUAL: ELIMINAR CUADRADO Y LLENAR ESPACIO       === */
/* ============================================================ */

/* 1. ELIMINAR EL CUADRADO NARANJA (BULLET) */
.cyber-data-head::before {
    content: none !important;
    display: none !important;
}

/* Ajuste del icono para que no se pegue al borde */
.cyber-data-head i {
    margin-right: 5px;
    font-size: 1.1rem;
    /* Aseguramos que el icono tenga el color primario */
    color: var(--color-primary);
    /* Animación de latido sutil */
    animation: icon-pulse-subtle 3s infinite ease-in-out;
}

@keyframes icon-pulse-subtle {
    0%, 100% { opacity: 1; text-shadow: 0 0 0 rgba(249, 115, 22, 0); }
    50% { opacity: 0.8; text-shadow: 0 0 10px rgba(249, 115, 22, 0.6); }
}

/* 2. TEXTO CON MÁS CUERPO */
.cyber-data-body {
    font-size: 0.95rem; /* Un pelín más grande */
    line-height: 1.7;   /* Más aire entre líneas para ocupar espacio vertical */
    color: var(--color-text-secondary);
    opacity: 0.9;
    margin-bottom: 12px; /* Espacio antes del status */
}

/* 3. NUEVA LÍNEA DE ESTADO (Para rellenar visualmente) */
.tactical-status {
    font-family: var(--font-tactical, monospace); /* Fuente técnica */
    font-size: 0.7rem;
    color: var(--color-primary);
    letter-spacing: 2px;
    text-transform: uppercase;
    opacity: 0.7;
    display: block;
    border-top: 1px dashed rgba(255, 255, 255, 0.1);
    padding-top: 8px;
    width: fit-content;
}

/* 4. AJUSTE DE LAS CAJAS (PULSE BOX) */
.pulse-box {
    /* Quitamos cualquier borde agresivo si quedaba */
    border: none !important;
    border-left: 2px solid rgba(255, 94, 20, 0.3) !important;
    padding-left: 25px; /* Más indentación */
    padding-right: 10px;
    background: transparent;
    transition: all 0.3s ease;
}

.pulse-box:hover {
    border-left-color: var(--color-primary) !important;
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.05), transparent);
}

/* ======================================================= */
/* === TARJETAS TEMÁTICAS (ESTILO TÁCTICO AFILADO)     === */
/* ======================================================= */

.topic-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    width: 140px; 
    height: 180px; 
    padding: 15px 8px;
    
    background-color: var(--color-surface); 
    border: 1px solid var(--color-border);
    
    /* CAMBIO 1: Borde Afilado (Sharp) */
    border-radius: 2px; 
    
    text-decoration: none;
    position: relative; /* Necesario para las esquinas */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    /* Aseguramos que los pseudo-elementos se vean */
    overflow: visible; 
}

/* CAMBIO 2: Esquinas Marcadas (Corchetes Tácticos) */

/* Esquina Superior Izquierda */
.topic-card::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; /* Pegado al borde exterior */
    width: 12px; height: 12px;
    
    /* Solo bordes superior e izquierdo */
    border-top: 3px solid var(--color-primary); 
    border-left: 3px solid var(--color-primary);
    
    transition: all 0.3s ease;
    z-index: 2;
}

/* Esquina Inferior Derecha */
.topic-card::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 12px; height: 12px;
    
    /* Solo bordes inferior y derecho */
    border-bottom: 3px solid var(--color-primary);
    border-right: 3px solid var(--color-primary);
    
    transition: all 0.3s ease;
    z-index: 2;
}

/* Elementos Internos */
.topic-card__icon-wrapper {
    font-size: 2rem;
    color: var(--color-text-secondary); /* Gris en reposo */
    margin-bottom: 10px;
    transition: transform 0.3s ease, color 0.3s ease;
}

.topic-card__title {
    font-family: system-ui, -apple-system, sans-serif; 
    font-size: 0.85rem; 
    font-weight: 700;        
    line-height: 1.3;        
    letter-spacing: 0.5px;
    color: var(--color-text-primary); 
    text-transform: uppercase;
    margin: 5px 0 10px 0; 
    display: -webkit-box;
    -webkit-line-clamp: 3; 
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.topic-card__count {
    font-size: 0.7rem;
    color: var(--color-text-secondary);
    font-weight: 700;
    background: rgba(255,255,255,0.05);
    padding: 2px 8px;
    border-radius: 4px; /* Pequeño redondeo solo aquí */
}

/* CAMBIO 3: Efecto Hover (Iluminación) */
.topic-card:hover {
    transform: translateY(-5px);
    
    /* Borde completo se vuelve naranja */
    border-color: var(--color-primary);
    
    /* Iluminación (Glow) intensa */
    box-shadow: 0 0 20px rgba(249, 115, 22, 0.3), 
                0 0 5px rgba(249, 115, 22, 0.5) inset; 
    
    z-index: 10;
}

/* Animación de las esquinas al hacer hover */
.topic-card:hover::before,
.topic-card:hover::after {
    width: 25px; /* Los corchetes crecen */
    height: 25px;
    border-color: #fff; /* Destello blanco en las esquinas */
    box-shadow: 0 0 10px rgba(255,255,255,0.5); /* Brillo */
}

.topic-card:hover .topic-card__icon-wrapper {
    color: var(--color-primary);
    transform: scale(1.15);
    filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.6)); /* El icono brilla */
}

.topic-card:hover .topic-card__title {
    color: var(--color-primary);
}

/* ============================================================ */
/* === FIX ESPACIADO MÓVIL (ELIMINAR HUECOS VACÍOS)         === */
/* ============================================================ */

@media (max-width: 768px) {
    
    /* 1. SECCIÓN TEMÁTICAS (ICONOS ARRIBA) */
    .home-topics {
        /* Reducimos drásticamente el padding inferior */
        /* Antes era 3.5rem (~56px), ahora 1rem (16px) */
        padding-bottom: 15px !important; 
        border-bottom: none !important; /* Aseguramos que no haya línea */
    }

    /* 2. SECCIÓN DASHBOARD (OPERATIVA DE CAMPO) */
    .tactical-dashboard-section {
        /* Reducimos el padding superior para pegarla a la sección anterior */
        /* Antes era 60px, ahora 10px */
        padding-top: 10px !important; 
    }

    /* 3. TÍTULO VS CARRUSEL (El hueco entre "Sin Cabos Sueltos" y las fotos) */
    .dashboard-grid-wrapper {
        /* Reducimos el hueco del grid */
        gap: 15px !important; /* Antes 30px */
    }

    .dash-area-header {
        /* Reducimos el margen del título */
        margin-bottom: 5px !important; /* Antes 20px */
    }
    
    .cyber-agency-title {
        /* Ajuste fino del título para que no empuje tanto hacia abajo */
        margin-bottom: 0 !important;
        line-height: 1.1 !important;
    }
}

/* ======================================================= */
/* === FIX: HOVER SUTIL EN CARDS DE TEMÁTICAS          === */
/* ======================================================= */

/* 1. Estado Base de la Card */
.topic-card {
    position: relative;
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
    /* Aseguramos que no haya overflow raro */
    overflow: hidden; 
}

/* 2. Hover en la Card: Borde Naranja Suave y Elevación */
.topic-card:hover {
    border-color: rgba(249, 115, 22, 0.6); /* Naranja matizado (no chillón) */
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* 3. ELIMINAR LOS CUADRADOS BLANCOS (La clave) */
/* Forzamos que los adornos de las esquinas sean transparentes */
.topic-card:hover::before,
.topic-card:hover::after {
    background-color: transparent !important; /* Adiós cuadrado blanco */
    
    /* Si quieres mantener una marca sutil en la esquina (tipo L), usa bordes: */
    border-color: rgba(249, 115, 22, 0.3) !important; /* Naranja muy suave */
    
    /* Si eran cuadrados rellenos, quitamos el tamaño para que no molesten */
    width: 0; 
    height: 0;
    content: none; /* Opción nuclear: borrarlos del todo si molestan */
}

/* 4. Efecto de brillo interior suave (Opcional, queda muy bien) */
.topic-card:hover .topic-card__icon-wrapper {
    color: var(--color-primary);
    background: rgba(249, 115, 22, 0.1); /* Fondo naranja muy sutil detrás del icono */
    border-color: rgba(249, 115, 22, 0.3);
}

/* ======================================================= */
/* === ADAPTADOR SHARD-CARD PARA BUSCADOR (GRID)       === */
/* ======================================================= */

.travlia-grid {
    display: grid;
    /* Rejilla responsive: crea columnas de mínimo 320px */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

/* Sobrescribimos propiedades del carrusel para que funcione en Grid */
.travlia-grid .shard-card {
    width: 100% !important; /* Ocupar toda la celda */
    flex: none !important;
    height: 100%;           /* Altura completa para igualar filas */
    min-height: 560px;      /* Altura mínima visual */
    margin: 0;
}

/* Ajuste del botón mapa para que funcione con la lógica del buscador */
.shard-card .map-btn.js-open-tactical-map {
    z-index: 5; /* Asegurar que es clickable sobre el enlace */
}

/* =================================================================== */
/* === FILTROS ACORDEÓN (ESTILO GUIA.PHP)                          === */
/* =================================================================== */

/* 1. La Caja Contenedora (Estado Cerrado / Default) */
.filter-accordion {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border); /* Gris por defecto */
    border-radius: 12px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. La Cabecera (El Título Clicable) */
.filter-summary {
    padding: 1rem 1.2rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Orbitron', sans-serif; /* Tu fuente de títulos */
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-primary);
    list-style: none; /* Ocultar triángulo nativo feo */
    border-left: 4px solid transparent; /* Borde izquierdo invisible por defecto */
    transition: all 0.3s ease;
}

/* Ocultar marker en navegadores Webkit */
.filter-summary::-webkit-details-marker {
    display: none;
}

/* Icono de la flecha (Chevron) */
.filter-summary .chevron-icon {
    transition: transform 0.3s ease;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

/* 3. El Contenido (Checkboxes) */
.filter-content {
    padding: 1rem 1.2rem;
    border-top: 1px solid transparent;
    background: var(--color-bg); /* Fondo ligeramente distinto dentro */
}

/* --- ESTADO ABIERTO (OPEN) - LA MAGIA --- */

/* La caja se vuelve naranja (borde) */
.filter-accordion[open] {
    border-color: var(--color-primary); /* Naranja */
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.15); /* Brillo naranja sutil */
}

/* La cabecera se ilumina */
.filter-accordion[open] .filter-summary {
    background: rgba(249, 115, 22, 0.08); /* Fondo naranja muy suave */
    border-left-color: var(--color-primary); /* EL BORDE LATERAL IZQUIERDO */
    color: var(--color-primary); /* Texto naranja */
    border-bottom: 1px solid rgba(249, 115, 22, 0.2);
}

/* Rotar la flecha */
.filter-accordion[open] .filter-summary .chevron-icon {
    transform: rotate(180deg);
    color: var(--color-primary);
}

/* Ajustes para los items dentro (para que se alineen bien) */
.filter-options {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

/* =================================================================== */
/* === BUSCADOR V2: ESTILOS TÁCTICOS Y CORRECCIONES                === */
/* =================================================================== */

/* 1. INPUT SUPERIOR (ESTILO CYBERPUNK) */
.search-matrix-container {
    position: relative;
    width: 100%;
}
.tactical-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-primary);
    /* Clip-path para esquinas cortadas */
    clip-path: polygon(
        10px 0, 
        100% 0, 
        100% calc(100% - 10px), 
        calc(100% - 10px) 100%, 
        0 100%, 
        0 10px
    );
    transition: all 0.3s ease;
}
.tactical-input-wrapper:focus-within {
    background: rgba(249, 115, 22, 0.05);
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.2);
}

.tactical-input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    padding: 15px 15px 15px 50px; /* Espacio para el icono */
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem;
    outline: none;
    text-transform: uppercase;
}
.tactical-search-icon {
    position: absolute;
    left: 15px;
    color: var(--color-primary);
    font-size: 1.2rem;
    animation: pulse 2s infinite;
}

/* 2. BOTÓN "VER MÁS" (El del JS) */
.btn-expand-tactical {
    width: 100%;
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: var(--color-text-secondary);
    font-size: 0.75rem;
    padding: 8px;
    margin-top: 10px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.2s;
    font-family: var(--font-tactical); /* Orbitron */
}
.btn-expand-tactical:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(249, 115, 22, 0.1);
}
.hidden-filter-item {
    display: none !important;
}

/* 3. ZONA MUERTA (NO RESULTADOS) - ESTILO HUD ERROR */
.empty-state-hud {
    grid-column: 1 / -1; /* Ocupar todo el ancho */
    border: 1px solid rgba(239, 68, 68, 0.3); /* Rojo apagado */
    background: rgba(20, 0, 0, 0.4);
    padding: 40px;
    text-align: center;
    position: relative;
    margin-top: 20px;
}
.empty-state-hud::before {
    content: "NO_SIGNAL";
    position: absolute;
    top: 5px; right: 10px;
    font-family: 'Orbitron';
    font-size: 0.6rem;
    color: #ef4444;
}
.empty-icon {
    font-size: 3rem;
    color: #ef4444;
    margin-bottom: 15px;
    opacity: 0.8;
}
.empty-title {
    font-family: 'Orbitron', sans-serif;
    color: #ef4444;
    font-size: 1.5rem;
    margin-bottom: 10px;
}
.empty-desc {
    color: var(--color-text-secondary);
    font-size: 0.9rem;
    max-width: 400px;
    margin: 0 auto 20px auto;
}

/* 4. BARRA DE CONTADOR (ESTILO HUD) */
.results-counter-bar {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    border-bottom: 1px solid var(--color-primary);
    padding-bottom: 5px;
    margin-bottom: 20px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    color: var(--color-primary);
}

/* =================================================================== */
/* === FIX BUSCADOR, MODAL Y BOTONES (AÑADIR AL FINAL DE CORE.CSS) === */
/* =================================================================== */

/* 1. ESTILOS CYBERPUNK PARA EL BUSCADOR SUPERIOR */
.search-matrix-container {
    position: relative;
    width: 100%;
    margin-bottom: 2rem;
}
.tactical-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4); /* Fondo oscuro */
    border: 1px solid var(--color-primary); /* Borde Naranja */
    /* Recorte de esquinas táctico */
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    transition: all 0.3s ease;
}
.tactical-input-wrapper:focus-within {
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.2); /* Brillo al escribir */
    background: rgba(249, 115, 22, 0.05);
}
.tactical-input {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--color-text-primary);
    padding: 15px 15px 15px 50px; /* Espacio a la izquierda para el icono */
    font-family: 'Orbitron', sans-serif; /* Fuente tecnológica */
    font-size: 1rem;
    outline: none;
    text-transform: uppercase;
}
.tactical-search-icon {
    position: absolute;
    left: 15px;
    color: var(--color-primary);
    font-size: 1.1rem;
    pointer-events: none;
}

/* 2. BOTÓN "DESPLEGAR MÁS" (Pequeño y táctico) */
.btn-expand-tactical {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.2);
    color: var(--color-text-secondary);
    font-size: 0.7rem;
    padding: 8px;
    margin-top: 5px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: 700;
    transition: all 0.2s;
    font-family: 'Orbitron', sans-serif;
    display: block; /* Asegura que ocupe espacio */
}
.btn-expand-tactical:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: rgba(249, 115, 22, 0.1);
}
/* Clase obligatoria para ocultar items */
.hidden-filter-item {
    display: none !important;
}

/* 3. FIX MODAL ROTO AL FINAL (Lo ocultamos por defecto) */
.tactical-modal-overlay {
    display: none; /* <--- IMPORTANTE: Oculto por defecto */
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}
.tactical-modal-overlay.active {
    display: flex; /* Se muestra solo cuando tiene la clase active */
}

/* 4. ESTILO PARA "ZONA MUERTA" (Sin resultados) */
.empty-state {
    text-align: center;
    padding: 40px;
    border: 1px solid rgba(239, 68, 68, 0.3); /* Borde rojizo suave */
    background: rgba(20, 0, 0, 0.4);
    margin-top: 20px;
}
.empty-state h3 {
    color: #ef4444; /* Rojo error */
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 10px;
}
.empty-state p {
    color: #ccc;
    margin-bottom: 20px;
}

/* =================================================================== */
/* === FIX MODO CLARO: BUSCADOR Y ZONA MUERTA                      === */
/* =================================================================== */

/* 1. INPUT BUSCADOR SUPERIOR (LIGHT MODE) */
body.light-theme .tactical-input-wrapper {
    background: rgba(255, 255, 255, 0.9); /* Fondo blanco casi opaco */
    border-color: #ccc; /* Borde gris suave en lugar de naranja fuerte */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
body.light-theme .tactical-input-wrapper:focus-within {
    border-color: var(--color-primary); /* Naranja al enfocar */
    background: #fff;
}
body.light-theme .tactical-input {
    color: #333; /* Texto oscuro */
}
body.light-theme .tactical-input::placeholder {
    color: #888;
}
body.light-theme .tactical-search-icon {
    color: #666; /* Lupa gris oscura */
}

/* 2. ZONA MUERTA / SIN RESULTADOS (LIGHT MODE) */
body.light-theme .empty-state {
    background: rgba(255, 230, 230, 0.4); /* Fondo rojizo muy pálido */
    border-color: rgba(239, 68, 68, 0.2);
}
body.light-theme .empty-state h3 {
    color: #b91c1c; /* Rojo oscuro legible */
}
body.light-theme .empty-state p {
    color: #555; /* Gris oscuro para el texto descriptivo */
}
body.light-theme .empty-state .wire-btn {
    background: #fff;
    color: #333;
    border-color: #ccc;
}
body.light-theme .empty-state .wire-btn:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* =================================================================== */
/* === FIXES VISUALES: BUSCADOR, FILTROS Y BOTONES                 === */
/* =================================================================== */

/* 1. LA "X" DEL BUSCADOR (Formato Orange/Cyberpunk) */
#btn-clear-search {
    background: transparent;
    border: none;
    color: var(--color-primary) !important; /* Naranja forzado */
    font-size: 1.2rem;
    padding: 0 15px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    height: 100%;
}
#btn-clear-search:hover {
    color: #fff !important; /* Blanco al pasar el ratón */
    text-shadow: 0 0 8px var(--color-primary);
    transform: scale(1.1);
}
/* Ocultar nativo si existe */
#btn-clear-search.hidden { display: none; }

/* 2. BOTÓN "BORRAR TODO" (Modo Claro) */
body.light-theme .filter-chip.clear-all {
    background: #fee2e2 !important; /* Rojo muy pálido */
    color: #dc2626 !important;      /* Rojo oscuro */
    border: 1px solid #fca5a5 !important;
}
body.light-theme .filter-chip.clear-all:hover {
    background: #fecaca !important;
}

/* 3. TAMAÑO DE LETRA FILTROS (Más grandes) */
.filter-item label span {
    font-size: 1rem !important; /* Aumentado de 0.9rem */
    font-weight: 500;
    letter-spacing: 0.5px;
}
/* Ajuste para el checkbox también */
.filter-item input[type="checkbox"] {
    transform: scale(1.3) !important; /* Checkbox un poco más grande */
    margin-right: 12px !important;
}

/* 4. BOTÓN "CARGAR MÁS" (Siempre centrado y consistente) */
.load-more-container {
    width: 100%;
    display: flex;           /* Flexbox para centrar */
    justify-content: center; /* Centrado horizontal */
    margin-top: 3rem;
    margin-bottom: 3rem;
    clear: both;
}

/* ======================================================= */
/* === BOTÓN CARGAR MÁS (ESTILO TACTICAL GLASS)        === */
/* ======================================================= */

.btn-load-more-tactical {
    /* 1. Estética Cristal */
    background: rgba(255, 94, 20, 0.05) !important; /* Fondo casi transparente */
    border: 1px solid var(--color-primary) !important; /* Borde Naranja */
    color: var(--color-primary) !important;
    backdrop-filter: blur(4px); /* Efecto desenfoque */
    
    /* 2. Tipografía Táctica */
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
    
    /* 3. FORMA AFILADA (POLYGON) */
    border-radius: 0 !important; /* Adiós curvas */
    clip-path: polygon(
        15px 0, 
        100% 0, 
        100% calc(100% - 15px), 
        calc(100% - 15px) 100%, 
        0 100%, 
        0 15px
    );
    
    /* 4. Layout & Animación */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 50px; /* Más ancho para imponer presencia */
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 15px rgba(255, 94, 20, 0.1);
    margin-top: 20px;
}

/* HOVER: Se enciende el cristal */
.btn-load-more-tactical:hover {
    background: rgba(255, 94, 20, 0.15) !important;
    box-shadow: 0 0 30px rgba(255, 94, 20, 0.4); /* Glow intenso */
    transform: translateY(-2px);
    text-shadow: 0 0 8px rgba(255, 94, 20, 0.8);
    color: #fff !important; /* Texto blanco al pasar el ratón para máximo contraste */
}

/* FIX PARA MODO CLARO (Mantener la estética táctica pero legible) */
body.light-theme .btn-load-more-tactical {
    background: rgba(255, 255, 255, 0.6) !important; /* Un poco más opaco en blanco */
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}
body.light-theme .btn-load-more-tactical:hover {
    background: var(--color-primary) !important;
    color: #fff !important;
}

/* =================================================================== */
/* === BARRA DE ESTADO DEL RADAR (Resultados)                      === */
/* =================================================================== */
.results-info-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* Espaciado más generoso */
    padding: 20px 0; 
    margin-bottom: 30px; 
    border-bottom: 1px solid var(--color-primary);
    
    /* Tipografía uniforme */
    font-family: 'Orbitron', sans-serif;
    font-size: 1.1rem; /* Tamaño unificado y legible */
    letter-spacing: 1px;
    color: var(--color-primary); /* Color base naranja */
}

/* El número de resultados (Blanco en Dark, Oscuro en Light) */
.results-info-bar .radar-count {
    color: var(--color-text-primary); 
    font-weight: 700;
    margin: 0 5px;
}

/* El texto entre paréntesis (Mismo tamaño, color secundario) */
.results-info-bar .radar-total {
    color: var(--color-text-secondary);
    opacity: 0.9;
    margin-left: 10px;
    font-size: 1.1rem; /* Aseguramos que sea IGUAL al resto */
}

/* =================================================================== */
/* === Estilos Visual De-cluttering Hero [GUIA.PHP]                === */
/* =================================================================== */

/* Nuevo CSS para limpiar el Hero */

.report-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
    gap: 15px;
}

/* Iconos sociales limpios y agrupados a la izquierda */
.share-icons-minimal {
    display: flex;
    gap: 12px;
}
.share-icons-minimal a {
    color: rgba(255,255,255,0.5); /* Grisáceo por defecto */
    font-size: 1.1rem;
    transition: color 0.3s;
}
.share-icons-minimal a:hover {
    color: var(--color-primary); /* Se encienden al pasar ratón */
}

/* Grupo de botones a la derecha */
.tactical-actions-row {
    display: flex;
    gap: 10px;
}

/* Botón Mapa "Ghost" (El secreto para que no cargue) */
.btn-tactical-ghost {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: rgba(255,255,255,0.8);
    padding: 8px 15px;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s;
    /* Clip path para mantener estética táctica */
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
.btn-tactical-ghost:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Ajuste móvil: Ocultar texto "VER MAPA" si falta espacio */
@media (max-width: 480px) {
    .btn-tactical-ghost .desktop-text { display: none; }
    .btn-tactical-ghost { padding: 10px; } /* Se vuelve cuadrado solo icono */
    .report-actions { flex-wrap: wrap; }
    .tactical-actions-row { flex: 1; justify-content: flex-end; }
}

/* --- CONTENEDOR PRINCIPAL --- */
.report-actions {
    display: flex;
    flex-wrap: wrap; /* Para móviles */
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
    padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.15);
    gap: 20px;
}

/* --- A. ICONOS SOCIALES (Minimal) --- */
.share-icons-minimal {
    display: flex;
    align-items: center;
    gap: 12px;
}
.share-label-mini {
    font-size: 0.7rem;
    font-family: 'Orbitron', sans-serif;
    color: rgba(255,255,255,0.4);
    letter-spacing: 1px;
}
.share-icons-minimal a {
    color: rgba(255,255,255,0.6);
    font-size: 1.1rem;
    transition: all 0.3s ease;
}
.share-icons-minimal a:hover {
    color: var(--color-primary);
    transform: translateY(-2px);
}

/* --- B. GRUPO DE BOTONES UNIFICADOS --- */
.ops-group {
    display: flex;
    background: rgba(255,255,255,0.05); /* Fondo muy sutil para agruparlos */
    border-radius: 4px;
    padding: 2px;
    border: 1px solid rgba(255,255,255,0.1);
}

/* ESTILO BASE DEL BOTÓN (IGUAL PARA MAPA Y GUARDAR) */
.btn-tactical-op {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.9);
    font-family: 'Orbitron', sans-serif;
    font-size: 0.8rem;
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    position: relative;
}

/* Separador visual entre botones */
.btn-tactical-op:first-child {
    border-right: 1px solid rgba(255,255,255,0.1);
}

/* Hover: Efecto de encendido suave */
.btn-tactical-op:hover {
    background: rgba(255,255,255,0.1);
    color: var(--color-primary);
}

/* --- ESTADO ACTIVO (CUANDO LA MISIÓN ESTÁ GUARDADA) --- */
/* Tu JS añade la clase .added-active automáticamente */

.btn-tactical-op.added-active {
    background: var(--color-primary) !important; /* Se vuelve naranja sólido */
    color: #000 !important; /* Texto negro para contraste */
    font-weight: 700;
    box-shadow: 0 0 15px rgba(249, 115, 22, 0.4); /* Glow */
}

/* Cambiar texto e icono cuando está guardado */
/* Esto usa un truco CSS ::after para cambiar el texto sin JS extra */
.btn-tactical-op.added-active .op-text {
    display: none; /* Ocultamos "GUARDAR" */
}
.btn-tactical-op.added-active::after {
    content: "GUARDADA"; /* Mostramos "GUARDADA" */
}
.btn-tactical-op.added-active .icon-state::before {
    content: "\f02e"; /* Código del icono Bookmark Solid (FontAwesome) */
}

/* --- MOBILE --- */
@media (max-width: 500px) {
    .report-actions {
        flex-direction: column-reverse; /* Botones arriba, share abajo */
        align-items: stretch;
    }
    .ops-group {
        width: 100%;
    }
    .btn-tactical-op {
        flex: 1; /* Ocupan 50% cada uno */
        justify-content: center;
        padding: 12px;
    }
    .share-icons-minimal {
        justify-content: center;
        padding-bottom: 10px;
    }
}

/* =========================================
   TACTICAL DRAWER (THEME AWARE)
   ========================================= */

/* 1. Telón de fondo (Backdrop) */
.drawer-backdrop {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Mantenemos un oscuro semi-transparente siempre para dar foco, 
       incluso en modo claro */
    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(4px);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.drawer-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* 2. El Panel Deslizante (Heredando Colores) */
.drawer-panel {
    /* Layout */
    display: flex;
    flex-direction: column;
    position: fixed;
    bottom: 0; left: 0; width: 100%;
    
    /* Dimensiones */
    max-height: 85vh;
    min-height: 300px;
    height: auto;
    
    /* --- THEMING: AQUÍ ESTÁ LA MAGIA --- */
    background: var(--color-surface);     /* Usa tu gris oscuro o blanco puro */
    color: var(--color-text-primary);     /* Texto hereda el color principal */
    border-top: 1px solid var(--color-border); /* Borde sutil superior */
    
    /* Estética */
    border-radius: 20px 20px 0 0; /* Redondeado superior estilo iOS */
    box-shadow: var(--shadow-lg); /* Tu sombra grande definida en root */
    
    /* Animación */
    z-index: 99999;
    transform: translateY(102%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    
    /* Safe Area para iPhone X+ */
    padding-bottom: env(safe-area-inset-bottom);
}

.drawer-panel.active {
    transform: translateY(0);
}

/* 3. Zona de arrastre (Handle) */
.drawer-handle-zone {
    width: 100%;
    padding: 12px 0 8px 0;
    display: flex;
    justify-content: center;
    cursor: pointer;
}

.drawer-handle {
    width: 40px;
    height: 4px;
    /* Usamos el color de borde para que se vea bien en claro y oscuro */
    background: var(--color-border); 
    border-radius: 4px;
    opacity: 0.8;
}

/* 4. Cabecera */
.drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px 15px 20px;
    border-bottom: 1px solid var(--color-border); /* Línea separadora sutil */
}

.drawer-title {
    /* Usamos tu fuente táctica */
    font-family: var(--font-tactical); 
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-primary); /* Naranja Amanecer */
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-close-btn {
    background: none;
    border: none;
    color: var(--color-text-secondary); /* Gris técnico */
    font-size: 1.2rem;
    padding: 5px;
    cursor: pointer;
    transition: color 0.2s;
}

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

/* 5. Contenido Scrollable */
.drawer-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    /* Espacio extra al final para que no choque con la barra de navegación del móvil */
    padding-bottom: 80px; 
    -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------
   AJUSTES PARA ELEMENTOS DENTRO DEL DRAWER (KIT / LISTAS)
   --------------------------------------------------------- */

/* Módulos (Cajas del Kit) dentro del Drawer */
.drawer-content .wire-module {
    /* En lugar de fondo transparente, usamos el Background base 
       para crear contraste con la Surface del Drawer */
    background: var(--color-background); 
    border: 1px solid var(--color-border);
    margin-bottom: 15px;
    border-radius: var(--radius-sm);
    /* Usamos tu clip-path suave si quieres */
    /* clip-path: var(--clip-tactical-md); */ 
}

/* Títulos de módulos dentro del Drawer */
.drawer-content .wire-head {
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
}

.drawer-content .wh-stamp {
    background: var(--color-border);
    color: var(--color-text-secondary);
    font-family: var(--font-tactical);
}

/* Lista del Plan dentro del Drawer */
.drawer-plan-list li {
    border-color: var(--color-border) !important;
}

/* Texto genérico */
.drawer-content p {
    color: var(--color-text-primary);
}

/* --- TACTICAL PLANNER TOOLBAR --- */
.plan-tactical-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-surface); /* Fondo adaptable */
    padding: 10px 15px;
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
    margin-bottom: 10px;
}

.plan-tactical-actions {
    display: flex;
    gap: 8px;
}

.btn-tactical-tool {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    width: 36px;
    height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-tactical-tool:hover {
    background: var(--color-background);
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-tactical-tool.danger:hover {
    color: #ef4444;
    border-color: #ef4444;
}

/* --- ESTADO COMPLETADO (VERDE TÁCTICO) --- */
.plan-item-card.is-completed {
    border-left: 3px solid #22c55e !important;
    background: rgba(34, 197, 94, 0.05); /* Verde muy sutil */
    opacity: 0.7; /* Visualmente menos prioritario */
}

.plan-item-card.is-completed .plan-stop-title {
    text-decoration: line-through;
    color: var(--color-text-secondary);
}

.btn-check-action {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 5px;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.btn-check-action:hover,
.plan-item-card.is-completed .btn-check-action {
    color: #22c55e; /* Verde éxito */
}

/* --- MODAL DE CONFIRMACIÓN (Accesible) --- */
.vv-modal-backdrop {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7); backdrop-filter: blur(2px);
    z-index: 999999; display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transition: opacity 0.2s;
}
.vv-modal-backdrop.active { opacity: 1; visibility: visible; }

.vv-modal-dialog {
    background: var(--color-surface);
    border: 1px solid var(--color-primary);
    padding: 25px;
    width: 90%; max-width: 400px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    text-align: center;
    transform: scale(0.9); transition: transform 0.2s;
}
.vv-modal-backdrop.active .vv-modal-dialog { transform: scale(1); }

/* --- BOTÓN TÁCTICO DE CRISTAL (SIN REDONDEAR) --- */
.btn-tactical-glass {
    /* 1. Estética Cristal y Naranja */
    background: rgba(255, 94, 20, 0.05) !important; /* Fondo casi invisible */
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    backdrop-filter: blur(4px);
    
    /* 2. Tipografía */
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    
    /* 3. FORMA TÁCTICA (La clave: Cortes, no curvas) */
    border-radius: 0 !important; /* Cero redondeo */
    clip-path: polygon(
        15px 0, 
        100% 0, 
        100% calc(100% - 15px), 
        calc(100% - 15px) 100%, 
        0 100%, 
        0 15px
    );
    
    /* 4. Layout */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 15px 35px !important;
    width: auto !important; /* No ocupa todo el ancho */
    text-decoration: none !important;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-top: 30px;
}

/* Efecto Hover: Se ilumina sutilmente */
.btn-tactical-glass:hover {
    background: rgba(255, 94, 20, 0.15) !important;
    box-shadow: 0 0 20px rgba(255, 94, 20, 0.2);
    transform: translateY(-2px);
    text-shadow: 0 0 5px rgba(255, 94, 20, 0.5);
}

/* ========================================================= */
/* 💎 V-INTEL: DISEÑO TÁCTICO & CYBERPUNK (CONFINADO)        */
/* ========================================================= */

/* El botón flotante no afecta a otros botones */
#chatbot-btn-desk.central-trigger {
    position: fixed; bottom: 120px; right: 25px;
    background: #111; color: #fff;
    border: 1px solid rgba(255, 94, 20, 0.5);
    padding: 12px 24px; border-radius: 40px;
    font-family: var(--font-heading, sans-serif); font-size: 0.9rem; font-weight: 800;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 15px rgba(255,94,20,0.2);
    cursor: pointer; z-index: 9998; display: flex; align-items: center; gap: 10px;
    transition: all 0.3s ease;
}
#chatbot-btn-desk.central-trigger:hover { 
    transform: translateY(-5px); border-color: var(--color-primary);
    box-shadow: 0 15px 35px rgba(0,0,0,0.9), 0 0 25px rgba(255,94,20,0.4); 
}
@media (max-width: 768px) { #chatbot-btn-desk.central-trigger { display: none !important; } }

/* Confinamiento total de la ventana: NADA sale de #central-window */
#central-window.central-terminal {
    position: fixed; bottom: 180px; right: 25px;
    width: 380px; height: 600px; 
    background: #1a1a1a; /* Fondo sólido oscuro tipo terminal */
    border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px rgba(0,0,0,0.9), 0 0 20px rgba(255,94,20,0.1);
    display: flex; flex-direction: column; z-index: 9999;
    opacity: 0; pointer-events: none; transform: translateY(30px);
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); 
    overflow: hidden;
}
#central-window.central-terminal.is-active { opacity: 1; pointer-events: auto; transform: translateY(0); }

@media (max-width: 768px) {
    #central-window.central-terminal {
        width: 92%; height: 75vh;
        left: 50%; right: auto; bottom: 85px; 
        transform: translate(-50%, 30px); 
    }
    #central-window.central-terminal.is-active { transform: translate(-50%, 0); }
}

/* Header de la terminal */
#central-window .terminal-header {
    background: #0a0a0a; padding: 18px 20px; border-bottom: 1px solid rgba(255, 94, 20, 0.2);
    display: flex; justify-content: space-between; align-items: center;
}
#central-window .header-title { color: #fff; font-family: monospace; font-size: 0.9rem; font-weight: bold; letter-spacing: 1px; }
#central-window .status-dot { width: 8px; height: 8px; background: var(--color-primary, #f97316); border-radius: 50%; margin-right: 10px; display: inline-block; box-shadow: 0 0 8px var(--color-primary, #f97316); }
#central-window .terminal-close { background: none; border: none; color: #888; font-size: 1.2rem; cursor: pointer; transition: color 0.2s; }
#central-window .terminal-close:hover { color: var(--color-primary, #f97316); }

/* Cuerpo y Mensajes */
#central-window .terminal-body { padding: 20px; flex-grow: 1; overflow-y: auto; scrollbar-width: none; }
#central-window .log-line { margin-bottom: 15px; font-family: var(--font-body, sans-serif); font-size: 0.95rem; line-height: 1.5; color:#ccc; }
#central-window .log-line.bot { background: rgba(255,255,255,0.03); color: #fff; padding: 14px; border-radius: 4px 12px 12px 12px; border: 1px solid rgba(255,255,255,0.05); }
#central-window .log-line.user { background: var(--color-primary, #f97316); color: #000; font-weight: 700; padding: 12px 14px; border-radius: 12px 12px 4px 12px; align-self: flex-end; text-align: right; width: fit-content; margin-left: auto; box-shadow: 0 4px 15px rgba(255,94,20,0.2); }
#central-window .cyber-alert { background: rgba(239, 68, 68, 0.1) !important; border: 1px solid #ef4444 !important; color: #ef4444 !important; }
#central-window .animated-entry { animation: slideUpChat 0.3s ease forwards; }

@keyframes slideUpChat { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Botones de Opciones */
#central-window .terminal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 15px; }
#central-window .terminal-actions button {
    background: #111; border: 1px solid rgba(255,255,255,0.1); color: #fff;
    padding: 10px 14px; border-radius: 6px; font-size: 0.9rem; font-family: var(--font-body, sans-serif); cursor: pointer; text-align: left; transition: all 0.2s;
}
#central-window .terminal-actions button:hover { background: rgba(249, 115, 22, 0.1); border-color: var(--color-primary, #f97316); color: var(--color-primary, #f97316); transform: translateX(5px); }

/* Input Zone */
#central-window .terminal-input-zone { padding: 15px; background: #0a0a0a; border-top: 1px solid rgba(255, 94, 20, 0.2); display: flex; gap: 10px; align-items: center; }
#central-window .input-prefix { color: var(--color-primary, #f97316); font-family: monospace; font-size: 1.2rem; font-weight: bold; }
#central-window .terminal-input-zone input { flex-grow: 1; background: transparent; border: none; outline: none; color: #00ff00; font-family: monospace; font-size: 1rem; }
#central-window .terminal-input-zone input::placeholder { color: #555; }
#central-window .terminal-send { background: var(--color-primary, #f97316); color: #000; width: 40px; height: 40px; border-radius: 6px; border: none; cursor: pointer; font-size: 1.1rem; transition: transform 0.2s; }
#central-window .terminal-send:hover { transform: scale(1.1); }

/* --- TARJETAS PREMIUM (Estilo Mi Plan de Fuga) --- */
#central-window .premium-card {
    background: #222; border: 1px solid rgba(255,255,255,0.05); border-radius: 8px;
    overflow: hidden; margin-top: 15px; display: flex; flex-direction: column;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5); transition: transform 0.2s;
}
#central-window .premium-card:hover { transform: translateY(-3px); border-color: rgba(255,94,20,0.3); }
#central-window .premium-card-img { height: 140px; position: relative; }
#central-window .premium-card-img img { width: 100%; height: 100%; object-fit: cover; }
#central-window .premium-tag { position: absolute; top: 10px; left: 10px; background: #000; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; border: 1px solid var(--color-primary, #f97316); }
#central-window .premium-card-body { padding: 15px; }
#central-window .premium-card-body h4 { font-family: var(--font-heading, sans-serif); font-size: 1.05rem; margin-bottom: 6px; color: #fff; line-height: 1.2; text-transform: uppercase; }
#central-window .premium-card-body p { font-family: var(--font-body, sans-serif); font-size: 0.85rem; color: #aaa; margin-bottom: 15px; line-height: 1.4; }

#central-window .premium-card-actions { display: flex; gap: 8px; }
#central-window .btn-chic-primary {
    flex-grow: 1; background: var(--color-primary, #f97316); color: #000; text-align: center;
    padding: 10px; border-radius: 4px; font-family: var(--font-body, sans-serif); font-weight: 800; font-size: 0.85rem; text-decoration: none; text-transform: uppercase; transition: filter 0.2s;
}
#central-window .btn-chic-primary:hover { filter: brightness(1.2); }
#central-window .btn-chic-icon {
    width: 40px; height: 40px; background: transparent; border: 1px solid var(--color-primary, #f97316); color: var(--color-primary, #f97316);
    border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all 0.2s;
}
#central-window .btn-chic-icon:hover { background: var(--color-primary, #f97316); color: #000; }

/* --- ALINEACIÓN PERFECTA DE BOTONES DE OPCIONES (GRID) --- */
#central-window .terminal-actions { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); /* 2 Columnas exactas */
    gap: 8px; 
    margin-top: 15px; 
}
#central-window .terminal-actions button {
    background: #111; border: 1px solid rgba(255,255,255,0.1); color: #ccc;
    padding: 10px 12px; border-radius: 6px; font-size: 0.85rem; font-family: var(--font-body, sans-serif); 
    cursor: pointer; text-align: left; transition: all 0.2s; line-height: 1.3;
}
/* Si hay un botón impar suelto al final, que ocupe todo el ancho */
#central-window .terminal-actions button:last-child:nth-child(odd) {
    grid-column: span 2;
    text-align: center;
    background: rgba(249, 115, 22, 0.05);
    border-color: rgba(249, 115, 22, 0.3);
    color: var(--color-primary, #f97316);
}
#central-window .terminal-actions button:hover { 
    background: rgba(249, 115, 22, 0.15); border-color: var(--color-primary, #f97316); color: #fff; transform: translateY(-2px); 
}

/* --- TARJETAS PREMIUM (FLEXBOX ALINEADO) --- */
#central-window .premium-card {
    background: #1a1a1a; border: 1px solid rgba(255, 94, 20, 0.2); border-radius: 8px;
    overflow: hidden; margin-top: 15px; 
    display: flex; flex-direction: column; /* Flex para forzar el footer abajo */
    height: 100%; box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
#central-window .premium-card-img { height: 140px; position: relative; flex-shrink: 0; }
#central-window .premium-card-img img { width: 100%; height: 100%; object-fit: cover; }
#central-window .premium-tag { position: absolute; top: 10px; left: 10px; background: #000; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 0.7rem; font-weight: bold; border: 1px solid var(--color-primary, #f97316); }

#central-window .premium-card-body { 
    padding: 15px; 
    display: flex; flex-direction: column; flex-grow: 1; /* Esto empuja los botones al final */
}
#central-window .premium-card-body h4 { font-family: var(--font-heading, sans-serif); font-size: 1rem; margin-bottom: 6px; color: #fff; text-transform: uppercase; }
#central-window .premium-card-body p { font-family: var(--font-body, sans-serif); font-size: 0.85rem; color: #999; margin-bottom: 15px; line-height: 1.4; }

/* Botones alineados al fondo de la tarjeta */
#central-window .premium-card-actions { 
    margin-top: auto; /* Empuja el contenedor abajo del todo */
    display: flex; gap: 8px; 
}
#central-window .btn-chic-primary {
    flex-grow: 1; background: var(--color-primary, #f97316); color: #000; text-align: center;
    padding: 10px; border-radius: 4px; font-family: var(--font-subheading, sans-serif); font-weight: 800; font-size: 0.85rem; text-decoration: none; text-transform: uppercase; transition: filter 0.2s;
}
#central-window .btn-chic-icon {
    width: 40px; height: 40px; background: transparent; border: 1px solid var(--color-primary, #f97316); color: var(--color-primary, #f97316);
    border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: all 0.2s;
}
#central-window .btn-chic-icon:hover { background: var(--color-primary, #f97316); color: #000; }

/* ========================================================= */
/* --- TARJETAS PREMIUM (ALINEADAS AL ESTILO ATLAS.CSS) ---  */
/* ========================================================= */

#central-window .premium-card {
    background-color: var(--color-surface, #262C33);
    border: 1px solid var(--color-border, #343B42);
    border-radius: 10px; /* Heredado de .dash-card */
    overflow: hidden; 
    margin-top: 15px; 
    display: flex; flex-direction: column; 
    height: 100%; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.2s, border-color 0.2s;
}
#central-window .premium-card:hover { 
    transform: translateY(-3px); 
    border-color: var(--color-primary, #FF5E14); 
}

#central-window .premium-card-img { height: 140px; position: relative; flex-shrink: 0; background: #111; }
#central-window .premium-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tag visual inspirado en los overlay del mapa Atlas */
#central-window .premium-tag { 
    position: absolute; top: 10px; left: 10px; 
    background: rgba(30, 35, 40, 0.9); 
    color: #fff; padding: 4px 8px; border-radius: 4px; 
    font-family: var(--font-subheading, sans-serif);
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
    border-left: 3px solid var(--color-primary, #FF5E14); 
}

#central-window .premium-card-body { 
    padding: 15px; 
    display: flex; flex-direction: column; flex-grow: 1; 
}
#central-window .premium-card-body h4 { 
    font-family: var(--font-subheading, sans-serif); 
    font-size: 0.95rem; margin: 0 0 8px 0; 
    color: var(--color-text-primary, #F0F2F5); 
    text-transform: uppercase; font-weight: 700;
}
#central-window .premium-card-body p { 
    font-family: var(--font-body, sans-serif); 
    font-size: 0.85rem; color: var(--color-text-secondary, #C9D1D9); 
    margin: 0 0 15px 0; line-height: 1.4; 
}

/* --- BOTONERA TÁCTICA ATLAS --- */
#central-window .premium-card-actions { 
    margin-top: auto; 
    display: flex; gap: 10px; align-items: center; 
}

/* Botón principal (Estilo .btn-tactical) */
#central-window .btn-chic-primary {
    flex-grow: 1; 
    background-color: transparent; 
    border: 2px solid var(--color-primary, #FF5E14); 
    color: var(--color-primary, #FF5E14); 
    text-align: center;
    padding: 8px 12px; border-radius: 8px; 
    font-family: var(--font-subheading, sans-serif); 
    font-weight: 800; font-size: 0.8rem; 
    text-decoration: none; text-transform: uppercase; 
    transition: all 0.2s;
}
#central-window .btn-chic-primary:hover,
#central-window .btn-chic-primary:focus-visible { 
    background-color: var(--color-primary, #FF5E14); 
    color: #111417; 
    box-shadow: 0 4px 12px rgba(255,94,20,0.2);
    outline: none;
}

/* Botón Guardar Icono (Estilo .btn-icon de tabla Atlas) */
#central-window .btn-chic-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    background: transparent; 
    border: 2px solid var(--color-border, #343B42); 
    color: var(--color-text-secondary, #C9D1D9);
    border-radius: 4px; cursor: pointer; 
    display: inline-flex; align-items: center; justify-content: center; 
    font-size: 0.85rem; font-weight: 800; transition: all 0.2s;
}
#central-window .btn-chic-icon:hover,
#central-window .btn-chic-icon:focus-visible { 
    border-color: #FFB74D; /* Color Amber Atlas */
    color: #FFB74D; 
    box-shadow: 0 0 12px rgba(255,183,77,0.5);
    outline: none;
}
#central-window .btn-chic-icon .pulse-trigger {
    color: #FFB74D; /* Mantiene el color al activar la animación de guardado */
}

/* ========================================================= */
/* --- SOPORTE MODO CLARO (LIGHT THEME) PARA EL CHATBOT ---  */
/* ========================================================= */

.light-theme #central-window .premium-card {
    background-color: #FFFFFF;
    border-color: #CBD5E1;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.light-theme #central-window .premium-tag {
    background: rgba(255, 255, 255, 0.95);
    color: #0F172A;
    border-left-color: #C2410C;
}
.light-theme #central-window .premium-card-body h4 { color: #0F172A; }
.light-theme #central-window .premium-card-body p { color: #334155; }

.light-theme #central-window .btn-chic-primary {
    border-color: #C2410C;
    color: #C2410C;
}
.light-theme #central-window .btn-chic-primary:hover {
    background-color: #C2410C;
    color: #FFFFFF;
}

.light-theme #central-window .btn-chic-icon {
    border-color: #CBD5E1;
    color: #334155;
}
.light-theme #central-window .btn-chic-icon:hover {
    border-color: #B45309;
    color: #B45309;
    box-shadow: 0 0 12px rgba(180, 83, 9, 0.2);
}

/* CONFINAMIENTO DE LAS TARJETAS SHARD-CARD DENTRO DEL CHATBOT */
#central-window .shard-card { margin-top: 15px; width: 100%; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.4); }
#central-window .shard-card .card-visual { height: 140px; border-radius: 8px 8px 0 0; overflow: hidden; }
#central-window .shard-card .card-visual img { width: 100%; height: 100%; object-fit: cover; }
#central-window .shard-card .card-body { padding: 15px; }

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 999999;
    /* Asegura que no mueva el DOM al aparecer */
    transform: translateY(0); 
}