/* -*- coding: utf-8 -*- */
/* PUNICO V9.2.1 - css/tabula.css - TABVLA BELLVM PVNICVM - CLEAN UNIFICADO */
/* Paleta: #0a0a0a negro, #d4af37 dorado, #8b0000 rojo punico, #f5f1e8 pergamino - WCAG AA */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=EB+Garamond:ital,wght@0,400;0,700;1,400&family=Inter:wght@400;600&family=Almendra:wght@400;700&display=swap');

:root{
  --negro:#0a0a0a;
  --negro-2:#121212;
  --negro-3:#1e1a16;
  --dorado:#d4af37;
  --dorado-claro:#f0d27a;
  --dorado-oscuro:#8b7500;
  --rojo-punico:#8b0000;
  --rojo-claro:#a52a2a;
  --pergamino:#f5f1e8;
  --pergamino-2:#ede2c4;
  --marmol:#e8e6e1;
  --borde:#4a3b2a;
  --sombra:0 4px 20px rgba(0,0,0,0.6);
  --sombra-dorada:0 0 8px rgba(212,175,55,0.6);
}

/* RESET + BASE */
*{box-sizing:border-box}
html,body{margin:0; padding:0; min-height:100%}
body{
  background:var(--negro);
  color:var(--pergamino);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* TITULOS LAPIDARIA */
h1,.tabula-titulo,#titulo-principal{
  font-family:'Cinzel',serif;
  font-weight:900;
  letter-spacing:.25em;
  color:var(--dorado);
  text-shadow:0 2px 0 var(--negro),0 4px 10px rgba(212,175,55,.3);
}
h1{font-size:clamp(1.6rem,4vw,2.8rem); margin:0}
.header-merp{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px;
  background:linear-gradient(to bottom,#1a1a1a,var(--negro));
  border-bottom:2px solid var(--dorado);
  position:sticky; top:0; z-index:100;
}

/* TABS LEGIO / POENI / TABVLA / SENATVS / NOTA / REGVLA */
.tabs,.tab-bar{
  display:flex; gap:0; flex-wrap:wrap;
  border-bottom:2px solid var(--dorado);
  background:linear-gradient(to bottom,#1a1a1a,var(--negro));
}
.tabs button,.tab-bar button,.btn-tab{
  font-family:'Cinzel',serif; font-weight:700; letter-spacing:.12em;
  background:transparent; color:var(--marmol);
  border:none; border-bottom:3px solid transparent;
  padding:12px 18px; cursor:pointer; transition:all .2s;
  font-size:.8rem;
}
.tabs button:hover,.tab-bar button:hover,.btn-tab:hover{
  color:var(--dorado-claro); background:rgba(212,175,55,.08);
}
.tabs button.active,.tab-bar button.active,.btn-tab.active,.btn-token.active{
  color:#fff; border-bottom-color:var(--dorado);
  background:var(--rojo-punico) !important;
  box-shadow:inset 0 0 6px rgba(0,0,0,.5);
}

/* BOTONES JERARQUIA - FIX V9.2.1: huérfanos btn-oro */
.btn-oro,.btn-primario,#btn-horda,#btn-senado,.btn-tab{
  font-family:'Cinzel',serif; font-weight:700;
  background:linear-gradient(180deg,var(--dorado) 0%,var(--dorado-oscuro) 100%) !important;
  color:#12100e !important;
  border:1px solid var(--dorado-claro) !important;
  padding:6px 12px !important; cursor:pointer !important;
  text-shadow:0 1px 0 rgba(255,255,255,.3) !important;
  text-transform:uppercase; letter-spacing:.08em;
  transition:all .2s !important;
}
.btn-oro:hover,.btn-primario:hover{
  background:linear-gradient(180deg,var(--dorado-claro) 0%,var(--dorado) 100%) !important;
  box-shadow:var(--sombra-dorada) !important;
  transform:translateY(-1px);
}
.btn-secundario{
  font-family:'Inter',sans-serif;
  background:transparent; color:var(--marmol);
  border:1px solid #444; padding:8px 14px; cursor:pointer;
}

/* =========================================================================
   CONTENEDORES DE LA TABVLA HD - CORREGIDO V12.0.0
   ========================================================================= */

/* Contenedor estructural del mapa: Oculto por defecto en la grilla */
#contenedor-mapa {
  display: none; /* Se oculta de base para no dejar el hueco negro */
  width: 100% !important;
  height: 520px !important; 
  max-height: 65vh !important;
  border-top: 3px solid var(--dorado) !important;
  border-bottom: 3px solid var(--dorado) !important;
  background: var(--negro) !important;
  filter: sepia(.25) contrast(1.1);
}

/* Clase de activación que dispara tu botón dorado window.toggleMapa() */
#contenedor-mapa.activo {
  display: block !important;
}

/* Instancia interna del mapa Leaflet (Mantiene las dimensiones físicas obligatorias) */
#map, .mapa-container {
  width: 100% !important;
  height: 100% !important; /* Ocupa el 100% del contenedor Estructural */
  background: var(--negro) !important;
}

.leaflet-tile{filter:sepia(.4) !important}
.leaflet-container{background:var(--negro) !important}


/* MESA TACTICA + BESTIARIO GRID */
.mesa{
  display:grid; grid-template-columns:1fr 320px; gap:12px;
  padding:12px; background:var(--negro-2);
}
#mesa,#bestiario-container,.bestiario-grid{
  max-height:55vh; overflow-y:auto;
  background:linear-gradient(180deg,#1e1a16 0%,#12100e 100%);
  border:1px solid var(--borde); padding:8px;
}

/* FICHAS - FIX LEGIBILIDAD */
.ficha-mini,.ficha-bestiario,.bestiario-card-punico{
  background:linear-gradient(180deg,#2a241e 0%,var(--negro-3) 100%) !important;
  border:1px solid var(--borde) !important;
  color:var(--pergamino-2) !important;
  font-family:'Cinzel',serif !important;
  padding:6px; border-radius:3px; position:relative;
  cursor:pointer; transition:all .2s;
}
.ficha-mini:hover,.bestiario-card-punico:hover{
  border-color:var(--dorado) !important;
  box-shadow:0 0 6px rgba(212,175,55,.3) !important;
}
.faccion-tag{
  font-size:.55rem; padding:2px 6px; border-radius:2px;
  font-family:'Cinzel',serif; font-weight:700; color:#fff;
  display:inline-block; margin-bottom:4px;
}
.faccion-optimates{background:#d4af37; color:#000 !important}
.faccion-populares{background:#8c1c13}
.faccion-barcida{background:#1a3a5c}
.faccion-hannonida{background:#4a5a4a}
.horda-contador{
  position:absolute; top:4px; right:4px;
  background:var(--dorado); color:#000;
  font-size:.6rem; font-weight:900; padding:2px 5px; border-radius:10px;
}
.tope-historico{font-size:.5rem; color:#a09078; display:block; margin-top:3px}
.topado{opacity:.4; filter:grayscale(1)}

/* PANELES NOTA/REGVLA - LECTURA LARGA */
#panel-nota,#panel-regula,.panel-texto{
  font-family:'EB Garamond',serif; font-size:1.15rem; line-height:1.7;
  color:var(--pergamino); background:#121212;
  padding:28px; border-left:3px solid var(--dorado);
}

/* LOG Y CONSOLA JOC - SIEMPRE VISIBLE */
#log,#consola-joc,#log-consola{
  background:var(--negro) !important;
  color:var(--pergamino-2) !important;
  font-family:'Almendra',monospace !important;
  border:1px solid var(--borde) !important;
  max-height:200px !important; overflow-y:auto !important;
  padding:8px; font-size:.8rem; line-height:1.4;
  white-space:pre-wrap; word-break:break-word;
  z-index:10 !important;
}

/* SELECTS - WCAG AA CONTRASTE FIX AUDITORIA 100% */
select,input[type="number"],#transporte-selector,#clima-selector,#num-viajeros,#selector-escenario-historico{
  background-color:var(--negro-2) !important;
  color:var(--dorado-claro) !important;
  font-family:'Cinzel',serif !important; font-weight:700 !important;
  border:1px solid var(--dorado) !important;
  padding:5px 10px !important; border-radius:2px !important;
  font-size:.8rem;
}
select:focus,input[type="number"]:focus{
  outline:2px solid var(--dorado) !important;
  box-shadow:0 0 6px rgba(212,175,55,.4) !important;
}
select option{
  background-color:var(--negro-3) !important;
  color:var(--dorado-claro) !important;
  padding:6px !important;
}
select option:hover,select option:checked{
  background-color:var(--rojo-punico) !important;
  color:#fff !important;
}
select option:disabled{color:#666 !important}

/* MODAL RETRATO */
.modal-retrato{
  max-width:95vw; width:420px;
  background:var(--negro); border:2px solid var(--dorado); padding:0;
}
.retrato,.modal-retrato img,.inicial{
  width:100%; aspect-ratio:1; object-fit:cover;
  border:2px solid var(--dorado);
  background:radial-gradient(circle,#222,#000);
  box-shadow:var(--sombra);
}

/* TEMAS SENADO vs TABVLA */
body.tema-senado{background:var(--marmol) !important; color:#1e1a16 !important}
body.tema-senado .ficha-mini,body.tema-senado .ficha-bestiario,body.tema-senado .bestiario-card-punico{
  background:#fff !important; color:#1e1a16 !important; border-color:#8b4513 !important;
}
body.tema-senado #log,body.tema-senado #consola-joc{
  background:#12100e !important; color:var(--pergamino-2) !important;
}
body.tema-tabula{background:var(--negro)}

/* RESPONSIVE - FIX AUDITORIA 13" LAPTOP */
@media(max-width:980px){
  #contenedor-mapa{height:50vh !important; max-height:50vh !important}
  .mesa{grid-template-columns:1fr !important}
  #mesa,#bestiario-container{max-height:40vh !important}
  .tabs button,.tab-bar button{padding:10px 12px; font-size:.7rem}
  #panel-nota{padding:16px; font-size:1rem}
  .header-merp{flex-direction:column; gap:8px}
}
@media(max-width:600px){
  .tabs{overflow-x:auto; flex-wrap:nowrap}
  .btn-oro,.btn-primario{width:100%; margin:4px 0}
}

/* UTILIDADES */
.texto-dorado{color:var(--dorado-claro)}
small,.fuente{color:#bbb; font-size:.85em}
.oculto{display:none !important}

/* ================================================================= */
/* 👑 PARCHE DE SANIDAD VISUAL V9.2.1 - WCAG AA & RESPONSIVE COMPAT */
/* ================================================================= */

/* Garantiza contraste dorado/pergamino legible en cualquier navegador */
select, 
input[type="number"], 
#transporte-selector, 
#clima-selector, 
#num-viajeros, 
#selector-escenario-historico {
  background-color: #121212 !important;
  color: #f0d27a !important; /* Dorado claro de alto contraste */
  font-family: 'Cinzel', serif !important;
  font-weight: 700 !important;
  border: 1px solid #d4af37 !important;
  padding: 5px 10px !important;
  border-radius: 2px !important;
  font-size: 0.8rem !important;
}

select:focus, input[type="number"]:focus {
  outline: 2px solid #d4af37 !important;
  box-shadow: 0 0 6px rgba(212,175,55,0.4) !important;
}

select option {
  background-color: #1e1a16 !important;
  color: #f0d27a !important;
  padding: 6px !important;
}

/* Resaltado con la paleta oficial de Rojo Púnico */
select option:hover, 
select option:checked {
  background-color: #8b0000 !important;
  color: #ffffff !important;
}

/* Ajuste responsive crítico para Consolas de Operaciones en Laptops de 13" */
@media (max-width: 1200px) {
  .mesa {
    grid-template-columns: 1fr !important; /* Colapsa la grilla para evitar desbordamientos */
    gap: 12px !important;
  }
  #contenedor-mapa, #map, .mapa-container {
    height: 380px !important; /* Reduce la altura para mantener la consola visible en el viewport */
  }
}