/* -*- coding: utf-8 -*- */
/* PUNICO V9.2.1 - css/estilos.css - MESA MERP JOC 1989 + HEROES - CLEAN UNIFICADO */
/* Este va CON tabula.css - No duplicar :root negro/dorado - usa variables compartidas */
@import url('https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400&family=Cinzel+Decorative:wght@700&family=Metamorphous&display=swap');

:root{
  /* Solo extras que no están en tabula.css */
  --fondo:#060504;
  --fondo2:#12100e;
  --fondo3:#1a1612;
  --pergamino2:#e8d9b0;
  --borde2:#2b1f14;
  --borde3:#5a4a2f;
  --oro5:#ffd700;
  --oro-glow:0 0 12px rgba(212,175,55,.6);
  --rojo-bermellon:#8c1c13;
  --texto:#ede2c4;
  --texto-tinta:#1a140e;
  --roma:#8c1c13;
  --cartago:#1d3557;
  --topado:#ff4444;
}

/* BASE - FIX V8.1 background-image none + size 100% que rompia Leaflet */
*{box-sizing:border-box; scrollbar-width:thin; scrollbar-color:var(--borde, #8a6d3b) var(--fondo)}
body{
  margin:0; padding:20px;
  background:#0a0a0a;
  background-image:radial-gradient(circle at center, #211910 0%, #0a0704 100%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:var(--texto);
  font-family:'Almendra',serif;
  min-height:100vh;
}
body.sin-marco{
  background-image:radial-gradient(circle at center, #211910 0%, #0a0704 100%) !important;
}

/* HEADER MERP */
.header-merp{
  background:linear-gradient(180deg,#1e1a16 0%,#12100e 100%);
  border-bottom:3px double var(--borde2);
  padding:14px 22px;
  display:flex; justify-content:space-between; align-items:center;
  max-width:1150px; margin:0 auto; width:100%;
}
.header-merp h1{
  margin:0; font-family:'Cinzel Decorative',serif;
  font-size:1.6rem; letter-spacing:5px; color:var(--texto);
}
.header-merp h1 span{color:var(--oro, #d4af37)}

/* MESA 3 COLUMNAS - FIX 520px */
.mesa{
  display:grid; grid-template-columns:320px 1fr 380px;
  gap:18px; padding:16px; max-width:1150px;
  margin:15px auto 0; width:100%;
}
.columna-izq,.columna-centro,.columna-der{
  background:linear-gradient(180deg,rgba(26,20,16,.96),rgba(15,13,9,.98));
  border:2px solid var(--borde2); padding:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.7);
}

/* SELECTOR HEROES - TARJETAS TACTILES */
.selector-heroes{
  display:flex !important; gap:14px; overflow-x:auto;
  padding:10px 5px; flex-wrap:nowrap; scrollbar-width:thin;
}
.tarjeta-tactil-pj{
  width:105px; height:135px; flex-shrink:0; position:relative; overflow:hidden;
  background:radial-gradient(circle at center, #211910 0%, #0d0a06 100%);
  border:2px solid var(--borde2); cursor:pointer; transition:all .25s;
}
.tarjeta-tactil-pj:hover{
  transform:scale(1.05) translateY(-3px);
  border-color:var(--oro5) !important;
  box-shadow:0 8px 20px rgba(212,175,55,.3) !important;
}
.activo-heráldico{border:3px solid var(--oro, #d4af37) !important; box-shadow:0 0 20px var(--oro, #d4af37) !important}
.objetivo-target{outline:2px solid #ff3333 !important; box-shadow:0 0 18px #a6241b !important}

/* FICHA PERGAMINO */
.ficha{
  background-color:var(--pergamino, #f5f1e8);
  color:var(--texto-tinta); padding:24px;
  border:6px double var(--borde2);
  box-shadow:0 15px 35px rgba(0,0,0,.8);
  min-height:560px; max-height:85vh; overflow-y:auto;
  font-family:'EB Garamond',serif;
}

/* LOG CONSOLA */
.log{
  background:#030302; border:2px solid var(--borde2);
  padding:16px; margin-top:12px;
  font-size:.85rem; min-height:140px; max-height:220px;
  overflow-y:auto; color:#d4b483;
  font-family:'Almendra',monospace; white-space:pre-wrap;
}

/* BESTIARIO GRID - PÚNICO */
#bestiario-grid,.bestiario-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; width:100%}
#bestiario-politico-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px}

/* ESCENARIO SELECTOR V9.1 */
.escenario-selector{
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px;
  padding:8px; background:rgba(0,0,0,0.4); border:1px solid var(--borde2)
}
.escenario-selector button{
  flex:1; min-width:80px;
  background:linear-gradient(135deg,#1a1612,#12100e);
  border:1px solid var(--borde3); color:var(--texto);
  padding:8px 6px; font-family:'Metamorphous',serif;
  font-size:.7rem; cursor:pointer; text-transform:uppercase;
  transition:all .2s;
}
.escenario-selector button.activo{
  background:var(--oro, #d4af37); color:#000;
  font-weight:900; border-color:var(--oro5); box-shadow:var(--oro-glow);
}
.escenario-selector button:hover{border-color:var(--oro, #d4af37)}
.escenario-info{
  background:linear-gradient(135deg,rgba(212,175,55,0.1),rgba(0,0,0,0.3));
  border-left:4px solid var(--oro, #d4af37);
  padding:8px 10px; margin-bottom:10px;
  font-size:.78rem; line-height:1.4;
}
.escenario-info b{color:var(--oro5)}

/* FACCION TAGS */
.faccion-tag{
  display:inline-block; font-size:.65rem; padding:2px 6px;
  border-radius:2px; font-weight:900; letter-spacing:1px; margin-right:4px;
  font-family:'Cinzel',serif;
}
.faccion-roma{background:var(--roma); color:#fff}
.faccion-cartago{background:var(--cartago); color:#fff}
.faccion-mercenario{background:#3a2e26; color:var(--oro, #d4af37)}

/* TOPE HISTORICO POLIBIO */
.tope-historico{
  font-size:.7rem; color:var(--oro, #d4af37);
  border:1px dashed var(--borde, #8a6d3b);
  padding:2px 5px; display:inline-block; margin-top:4px;
  font-family:'Cinzel',serif;
}
.tope-historico.agotado{
  background:var(--topado); color:#fff;
  border-color:var(--topado); animation:parpadeo 1s infinite;
}
.bestiario-card-punico{
  background:linear-gradient(135deg,#2a1f0f,#1a1207);
  border:1px solid var(--borde3);
  padding:8px; font-size:.8rem; position:relative; transition:all .2s;
}
.bestiario-card-punico:hover{border-color:var(--oro, #d4af37); transform:translateY(-2px)}
.bestiario-card-punico.topado{opacity:0.4; filter:grayscale(1); pointer-events:none}
.bestiario-card-punico.topado::after{
  content:'TOPE POLIBIO ALCANZADO';
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(-15deg);
  background:var(--topado); color:#fff; font-weight:900;
  font-size:.7rem; padding:3px 8px; letter-spacing:1px;
  font-family:'Cinzel',serif;
}
.horda-contador{
  position:absolute; top:5px; right:5px;
  background:var(--oro, #d4af37); color:#000;
  font-weight:900; font-size:.75rem; width:22px; height:22px;
  border-radius:50%; display:flex; align-items:center;
  justify-content:center; box-shadow:0 2px 5px #000;
}

/* MODAL RETRATO */
#modal-retrato{
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.88); z-index:99999;
  align-items:center; justify-content:center; cursor:zoom-out;
}

/* BOTONES - COMPAT CON tabula.css */
.btn-oro{
  background:linear-gradient(135deg,var(--oro, #d4af37),#a17d16);
  color:#000; border:1px solid #70560f;
  padding:13px 10px; font-weight:900; cursor:pointer;
  letter-spacing:1.5px; text-transform:uppercase;
  font-family:'Metamorphous',serif; transition:all .2s;
}
.btn-oro:hover{filter:brightness(1.15); transform:translateY(-1px)}
.btn-tab{
  background:#2a221c; border:1px solid var(--borde3);
  color:var(--texto); padding:10px; cursor:pointer;
  font-family:'Cinzel',serif; transition:all .2s;
}
.btn-tab:hover{background:#3a2e26; border-color:var(--oro, #d4af37)}
.btn-tab.active{background:var(--roma) !important; color:#fff !important; border-color:var(--oro, #d4af37) !important}

/* GRID HEROES INTERNO */
.grid-heroes{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.grid-heroes button{
  background:#1e1814; border:1px solid var(--borde3);
  color:var(--texto); padding:12px; cursor:pointer;
  font-family:'Almendra',serif; transition:all .2s;
}
.grid-heroes button.seleccionado{outline:2px solid var(--oro, #d4af37); background:#3a2e26}

/* PANEL DAÑO */
.panel-dano{
  background:linear-gradient(135deg,#1f1410,#2a1812);
  border:2px solid var(--rojo, #8a1a1a); padding:12px; margin-top:12px;
}
.estado-badge{
  display:inline-block; font-size:.65rem; padding:3px 8px;
  border-radius:2px; margin-right:4px; font-weight:900;
  font-family:'Metamorphous',serif;
}
.estado-badge.aturdido{background:#d49300; color:#000}
.estado-badge.sangrando{background:var(--rojo-bermellon); color:#fff}
.estado-badge.muerto{background:#3d0505; color:#ff3333}

/* ANIMACIONES */
@keyframes parpadeo{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes pulsoPunico{0%,100%{filter:drop-shadow(0 0 2px rgba(212,175,55,.4))}50%{filter:drop-shadow(0 0 12px rgba(212,175,55,.8))}}

/* RESPONSIVE V9.2.1 - FIX 13" */
@media(max-width:980px){
  .mesa{grid-template-columns:1fr}
  .header-merp{position:relative; flex-direction:column; gap:10px}
  body{padding:10px}
}
@media(max-width:600px){
  .selector-heroes{gap:8px}
  .tarjeta-tactil-pj{width:85px; height:115px}
  #bestiario-grid{grid-template-columns:1fr 1fr}
}