/* -*- coding: utf-8 -*- */
/* PUNICO V9.3.0 - css/tabula.css - LONDON DESIGN STANDARD [IMPERIAL / UCL COMPATIBLE] */
/* Enfoque: Brutalismo Científico + Elegancia Lapidaria Romana (Sin texturas ruidosas) */

@import url('https://googleapis.com');

:root {
  /* Paleta Cromática "Imperial Roman Tech" - Certificación WCAG AA */
  --negro-absoluto: #050505;
  --antracita-core:  #0d0e10;
  --antracita-card:  #15171c;
  --gris-borde:      #262930;
  --gris-subtil:     #4d515a;
  
  /* Tonos de Acento Historiográfico */
  --oro-imperial:    #c5a059; /* Dorado satinado, no chillón */
  --oro-brillante:   #e9ca91;
  --rojo-republica:  #8c1c13; /* El color de la túnica legionaria */
  --azul-adirim:     #1d3557; /* El azul marítimo de Cartago */
  --verde-terminal:  #81c784; /* Contraste óptimo para logs científicos */
  --blanco-marmol:   #f5f4f0;
  
  /* Tipografías por Jerarquía de Contenido */
  --font-lapidaria:  'Cinzel', serif;
  --font-ejecutiva:  'Plus Jakarta Sans', sans-serif;
  --font-data:       'JetBrains Mono', monospace;
}

/* Reset y Normalización de Alta Gama */
* { box-sizing: border-box; transition: background-color 0.2s ease, border-color 0.2s ease; }
html, body { margin: 0; padding: 0; min-height: 100vh; background-color: var(--negro-absoluto); }

body {
  color: var(--blanco-marmol);
  font-family: var(--font-ejecutiva);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* HEADER - Lapidaria Digital */
.header-merp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--negro-absoluto);
  border-bottom: 1px solid var(--gris-borde);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-merp h1 {
  font-family: var(--font-lapidaria);
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: 0.15em;
  color: var(--oro-imperial);
  margin: 0;
  text-transform: uppercase;
}

.header-merp h1 span {
  color: var(--blanco-marmol);
  font-weight: 500;
  letter-spacing: 0.05em;
}

/* BARRA DE CONTROL LOGÍSTICO (AGMEN & CLIMA) */
.barra-mapa {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 24px;
  background: var(--antracita-core);
  border-bottom: 1px solid var(--gris-borde);
  align-items: center;
}

.barra-mapa label {
  font-family: var(--font-lapidaria);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gris-subtil);
}

/* CONTENEDOR LEAFLET - Parchment Moderno */
#contenedor-mapa, #map, .mapa-container {
  width: 100% !important;
  height: 0;
  background: var(--negro-absoluto) !important;
  border-bottom: 1px solid var(--gris-borde);
}

#contenedor-mapa.activo {
  display: block;
  height: 520px !important;
  max-height: 60vh !important;
}

/* Desaturación elegante para mapas GIS históricos */
.leaflet-tile {
  filter: grayscale(0.8) contrast(1.2) invert(0.9) sepia(0.1) !important;
}

/* TERMINAL CIENTÍFICA DE EXPORTACIÓN (LOG) */
#log, .log, #consola-joc {
  background: #000000 !important;
  color: var(--verde-terminal) !important;
  font-family: var(--font-data) !important;
  font-size: 0.78rem !important;
  line-height: 1.5 !important;
  border: 1px solid var(--gris-borde) !important;
  border-radius: 4px !important;
  padding: 14px !important;
  max-height: 220px !important;
  overflow-y: auto !important;
  white-space: pre-wrap;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);
}

/* Personalización de la barra de desplazamiento (Scrollbar Londinense) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--negro-absoluto); }
::-webkit-scrollbar-thumb { background: var(--gris-borde); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--oro-imperial); }