/* ============================================================================
 * layout.css — Layout principal y responsive multi-dispositivo
 * ----------------------------------------------------------------------------
 * Diseño diferente según dispositivo/orientación:
 *  - Móvil vertical    (< 640px, portrait)   : apilado, mapa dominante
 *  - Móvil horizontal  (< 820px, landscape) : mapa izq, panel dch compacto
 *  - Tablet vertical   (640-1024px, portrait): mapa + elevación + stats
 *  - Tablet horizontal (1024-1366px, landscape): 2 paneles laterales
 *  - Desktop           (> 1366px)           : 3 paneles (histórico, mapa, sombra)
 *
 * Atributos data en <html>:
 *   data-dispositivo="movil|tablet|desktop"
 *   data-orientacion="vertical|horizontal"
 * Actualizados por JS en resize/orientationchange.
 * ============================================================================ */

/* ----------------------------------------------------------------------------
 * LAYOUT BASE (común a todos los tamaños)
 * ---------------------------------------------------------------------------- */
.app {
  display: grid;
  grid-template-rows: var(--altura-barra-superior) 1fr auto;
  grid-template-areas:
    "barra-superior"
    "area-principal"
    "barra-inferior";
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  overflow: hidden;
  background-color: var(--color-fondo);
}

/* Barra superior */
.barra-superior {
  grid-area: barra-superior;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--space-3);
  background-color: var(--color-panel);
  border-bottom: 1px solid var(--color-borde-2);
  z-index: var(--z-barra-superior);
  gap: var(--space-2);
}
.barra-superior__izquierda,
.barra-superior__derecha {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.app-titulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.app-titulo__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  cursor: pointer;
}
.app-titulo__texto {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-texto);
  margin: 0;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Área principal */
.area-principal {
  grid-area: area-principal;
  display: grid;
  position: relative;
  overflow: hidden;
}

/* Barra inferior */
.barra-inferior {
  grid-area: barra-inferior;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-panel);
  border-top: 1px solid var(--color-borde-2);
  z-index: var(--z-barra-inferior);
  /* safe-area-inset para iPhone X+ */
  padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
}

/* Zona mapa: mapa ocupa 50% de la pantalla, stats debajo centrados */
.zona-mapa {
  position: relative;
  display: grid;
  grid-template-rows: 50vh 1fr;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

/* Paneles laterales (ocultos por defecto en móvil) */
.panel-historico,
.panel-sombra {
  display: none;
  flex-direction: column;
  background-color: var(--color-panel);
  overflow: hidden;
}
.panel-historico__cabecera,
.panel-sombra__cabecera,
.panel-sombra__desc {
  padding: var(--space-3);
}
.panel-historico__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--color-borde-2);
}
.panel-historico__cabecera h2 {
  font-size: var(--font-size-lg);
  margin: 0;
  color: var(--color-texto);
}
.panel-historico__acciones,
.panel-historico__filtro {
  padding: 0 var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.panel-sombra {
  padding: var(--space-3);
  gap: var(--space-3);
}
.panel-sombra__cabecera {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0;
}
.panel-sombra__cabecera h2 {
  font-size: var(--font-size-lg);
  margin: 0;
}
.panel-sombra__desc {
  padding: 0;
  font-size: var(--font-size-sm);
  color: var(--color-texto-2);
}

/* SOMBRA: sub-componentes */
.sombra-selector,
.sombra-intervalo,
.toggle-linea {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.sombra-selector label,
.sombra-intervalo label {
  font-size: var(--font-size-sm);
  color: var(--color-texto-2);
  font-weight: 500;
}
.sombra-comparativa {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  padding: var(--space-2);
  background-color: var(--color-fondo-3);
  border-radius: var(--radius-md);
}
.sombra-comparativa__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--color-panel);
}
.sombra-comparativa__item .icono { color: var(--color-texto-2); }
.sombra-comparativa__item--delante .icono { color: var(--boton-positivo-fondo); }
.sombra-comparativa__item--detras .icono { color: var(--boton-negativo-fondo); }
.sombra-comparativa__valor {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-texto);
  font-variant-numeric: tabular-nums;
}
.sombra-comparativa__etiqueta {
  font-size: var(--font-size-sm);
  color: var(--color-texto-2);
}

/* (Panel de elevación eliminado por solicitud del usuario) */

/* ----------------------------------------------------------------------------
 * MÓVIL VERTICAL  (< 640px, portrait)
 * Layout: barra sup | mapa (con stats flotando) | barra inf
 * Paneles laterales: ocultos, se abren como overlay
 * ---------------------------------------------------------------------------- */
@media (max-width: 640px), (max-width: 820px) and (orientation: portrait) {
  [data-dispositivo="movil"][data-orientacion="vertical"] .app,
  [data-dispositivo="tablet"][data-orientacion="vertical"] .app {
    grid-template-rows: var(--altura-barra-superior) 1fr auto;
  }

  /* Mapa ocupa todo el centro; stats flotan encima */
  [data-dispositivo="movil"][data-orientacion="vertical"] .zona-mapa,
  [data-dispositivo="tablet"][data-orientacion="vertical"] .zona-mapa {
    grid-template-rows: 1fr;
  }

  /* Panel stats: 2 columnas en móvil vertical */
  [data-dispositivo="movil"] .panel-stats {
    grid-template-columns: repeat(3, 1fr);
    width: calc(100% - 2 * var(--space-3));
    bottom: var(--space-2);
    font-size: var(--font-size-sm);
  }
  [data-dispositivo="movil"] .stat__valor { font-size: var(--font-size-lg); }
  [data-dispositivo="movil"] .stat__subvalor { font-size: 10px; }

  /* Barra inferior compacta: pre-ruta y botón grabar apilados */
  [data-dispositivo="movil"] .barra-inferior {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  [data-dispositivo="movil"] .pre-ruta {
    flex-direction: row;
    gap: var(--space-2);
  }
  [data-dispositivo="movil"] .controles-grabacion {
    justify-content: center;
  }

  /* Cuando se abre panel histórico en móvil, ocupa toda la pantalla como overlay */
  [data-dispositivo="movil"] .panel-historico--abierto,
  [data-dispositivo="movil"] .panel-sombra--abierto {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal-fondo);
    background-color: var(--color-panel);
  }
}

/* ----------------------------------------------------------------------------
 * MÓVIL HORIZONTAL  (< 820px, landscape)
 * Layout: barra sup | mapa (izq) + panel compacto (dch) | barra inf
 * ---------------------------------------------------------------------------- */
@media (max-width: 820px) and (orientation: landscape) {
  [data-dispositivo="movil"] .app {
    grid-template-rows: var(--altura-barra-superior) 1fr auto;
  }

  [data-dispositivo="movil"][data-orientacion="horizontal"] .zona-mapa {
    grid-template-rows: 1fr;
  }

  /* En landscape, panel stats puede ser lateral y más compacto */
  [data-dispositivo="movil"][data-orientacion="horizontal"] .panel-stats {
    grid-template-columns: repeat(2, 1fr);
    width: 180px;
    bottom: auto;
    top: var(--space-2);
    right: var(--space-2);
    left: auto;
    transform: none;
  }

  /* Pre-ruta más compacto en barra inferior */
  [data-dispositivo="movil"][data-orientacion="horizontal"] .pre-ruta {
    flex: 1;
  }
}

/* ----------------------------------------------------------------------------
 * TABLET VERTICAL (641-1024px, portrait)
 * Layout: barra sup | mapa grande + stats + elevación | barra inf
 * Paneles laterales: ocultos, se abren como overlay
 * ---------------------------------------------------------------------------- */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  [data-dispositivo="tablet"][data-orientacion="vertical"] .panel-stats {
    grid-template-columns: repeat(6, 1fr);
    width: min(95%, 820px);
  }
  [data-dispositivo="tablet"][data-orientacion="vertical"] .stat__valor {
    font-size: var(--font-size-xl);
  }
}

/* ----------------------------------------------------------------------------
 * TABLET HORIZONTAL (1024-1366px, landscape)
 * Layout: barra sup | panel histórico (izq) + zona mapa + panel sombra (dch) | barra inf
 * ---------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  [data-dispositivo="tablet"][data-orientacion="horizontal"] .area-principal {
    grid-template-columns: var(--ancho-panel-historico) 1fr var(--ancho-panel-sombra);
    grid-template-areas: "historico mapa sombra";
  }
  [data-dispositivo="tablet"][data-orientacion="horizontal"] .panel-historico {
    display: flex;
    grid-area: historico;
  }
  [data-dispositivo="tablet"][data-orientacion="horizontal"] .zona-mapa {
    grid-area: mapa;
  }
  [data-dispositivo="tablet"][data-orientacion="horizontal"] .panel-sombra {
    display: flex;
    grid-area: sombra;
  }
  [data-dispositivo="tablet"][data-orientacion="horizontal"] .panel-stats {
    width: min(85%, 700px);
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ----------------------------------------------------------------------------
 * DESKTOP (> 1366px)
 * Layout: barra sup | panel histórico (izq) + zona mapa + panel sombra (dch) | barra inf
 * Más ancho para paneles laterales
 * ---------------------------------------------------------------------------- */
@media (min-width: 1366px) {
  [data-dispositivo="desktop"] .area-principal {
    grid-template-columns: var(--ancho-panel-historico) 1fr var(--ancho-panel-sombra);
    grid-template-areas: "historico mapa sombra";
  }
  [data-dispositivo="desktop"] .panel-historico {
    display: flex;
    grid-area: historico;
  }
  [data-dispositivo="desktop"] .zona-mapa {
    grid-area: mapa;
  }
  [data-dispositivo="desktop"] .panel-sombra {
    display: flex;
    grid-area: sombra;
  }
  [data-dispositivo="desktop"] .panel-stats {
    width: min(75%, 720px);
    grid-template-columns: repeat(6, 1fr);
  }
  [data-dispositivo="desktop"] .stat__valor {
    font-size: var(--font-size-xxl);
  }

  /* En desktop, el botón Menú puede estar oculto (panel siempre visible) */
  [data-dispositivo="desktop"] #btn-menu {
    display: none;
  }
}

/* ----------------------------------------------------------------------------
 * OVERLAYS (paneles laterales como modales a pantalla completa)
 * ----------------------------------------------------------------------------
 * Ambos paneles (histórico y SOMBRA) se abren desde la izquierda,
 * ocupan toda la pantalla, y se muestran en primer plano.
 * ---------------------------------------------------------------------------- */
@media (max-width: 1365px) {
  /* Panel histórico: overlay a pantalla completa desde la izquierda */
  .panel-historico--abierto {
    display: flex !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    z-index: var(--z-modal-fondo);
    box-shadow: var(--shadow-lg);
    animation: panelEntraIzq 240ms ease-out;
    background-color: var(--color-panel);
  }

  /* Panel SOMBRA: overlay a pantalla completa desde la izquierda.
     Fondo blanco puro (sin tonos grises), igual que el histórico. */
  .panel-sombra--abierto {
    display: flex !important;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100%;
    z-index: var(--z-modal-fondo);
    box-shadow: var(--shadow-lg);
    animation: panelEntraIzq 240ms ease-out;
    background-color: #ffffff !important;
    color: #0f172a !important;
    overflow-y: auto;
    padding: var(--space-4);
  }
  /* Forzar colores blancos en el panel SOMBRA cuando está abierto como overlay */
  .panel-sombra--abierto h2,
  .panel-sombra--abierto p,
  .panel-sombra--abierto label,
  .panel-sombra--abierto span {
    color: #0f172a !important;
  }
  .panel-sombra--abierto .campo-select,
  .panel-sombra--abierto .campo-texto {
    background-color: #ffffff !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
  }
  .panel-sombra--abierto .sombra-comparativa {
    background-color: #f8fafc !important;
  }
  .panel-sombra--abierto .sombra-comparativa__item {
    background-color: #ffffff !important;
  }

  @keyframes panelEntraIzq {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
  }
}

/* ----------------------------------------------------------------------------
 * UTILIDADES
 * ---------------------------------------------------------------------------- */
.solo-escritorio { display: none; }
@media (min-width: 1366px) {
  .solo-escritorio { display: initial; }
  .solo-movil { display: none; }
}

/* Cuando la app está grabando, ocultar el banner de cookies */
.app[data-grabando="true"] .banner-cookies {
  display: none !important;
}

/* Imagen oculta si no existe (tolerancia) */
img:not([src]):not([srcset]) { display: none; }