:root{
  /* --- paleta oliva/negro de diseno-referencia (Paso 2) --- */
  --bg: #0d0e0c;
  --bg-raised: #151713;
  --surface: #111410;
  --surface-2: #151713;
  --border: #23251f;
  --border-soft: #1b1d18;
  --text: #e8e6dc;
  --text-dim: #8a8d85;
  --text-faint: #5f6259;
  --brass: #c9a24d;
  --brass-soft: #9c8455;
  --brass-bg: rgba(201,162,77,0.09);
  --good: #6fae7f;
  --good-bg: rgba(111,174,127,0.12);
  --warn: #d1a94f;
  --warn-bg: rgba(209,169,79,0.12);
  --bad: #c4645a;
  --bad-bg: rgba(196,100,90,0.12);
  --bar-track: #6c3c33;
  --bar-zone: #508c6d;
  --bar-marker: #d7d1c3;

  /* --- mesa (ya coincidía con esta paleta desde el Paso 1) --- */
  --mesa-bg: #20261f;
  --mesa-grid-line: rgba(255,255,255,0.05);
  --mesa-badge-ring: #11130f;
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg); color:var(--text); font-family:'Inter',sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',serif; font-weight:600; margin:0;}
.num{font-variant-numeric:tabular-nums;}
a{color:var(--brass);}

.shell{max-width:1320px;margin:0 auto;padding:28px 24px 80px;}
/* Tres zonas fijas en una grilla — la marca (izquierda), los parámetros del
   grupo (centro) y las utilidades: idioma, ajustes y estado Premium (derecha,
   separadas por una línea). Los parámetros viven en la columna elástica: si el
   ancho aprieta, sus cajas se acomodan en dos filas sin empujar la marca ni
   las utilidades. */
.topbar{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px 22px;
  background:var(--surface-2); margin:0 0 24px; padding:13px 20px; border-radius:10px; border:1px solid var(--border-soft);
}
.tb-brand{display:flex; align-items:center; padding-right:4px;}
.brand-logo{height:70px; width:auto; display:block;}

.tb-config{display:flex; gap:8px; flex-wrap:wrap; align-items:stretch; justify-content:flex-end; min-width:0;}

.tb-utils{
  display:flex; align-items:center; gap:10px;
  padding-left:22px; border-left:1px solid var(--border);
}

@media (max-width:720px){
  .topbar{grid-template-columns:1fr auto;}
  .tb-config{grid-column:1 / -1; order:3;}
}

.lang-toggle{display:flex; border:1px solid var(--border); border-radius:7px; overflow:hidden;}
.lang-btn{
  background:none; border:none; color:var(--text-faint); font-size:11px; font-weight:600;
  padding:5px 10px; cursor:pointer; font-family:inherit; letter-spacing:0.02em;
}
.lang-btn:not(.active):hover{color:var(--text-dim);}
.lang-btn.active{background:var(--brass); color:#1a1408;}

.cfg-box{background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:6px 12px; min-width:82px; display:flex; flex-direction:column; justify-content:center;}
.cfg-box label{display:block; font-size:9px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px;}
.cfg-box select{background:none; border:none; color:var(--text); font-size:12.5px; width:100%; cursor:pointer; font-family:inherit;}
.cfg-box select:focus{outline:none;}
.stepper{display:flex; align-items:center; gap:6px;}
.stepper button{width:16px; height:16px; background:none; border:none; color:var(--brass); font-size:13px; cursor:pointer; padding:0; line-height:1; flex-shrink:0;}
.stepper input{width:30px; background:none; border:none; color:var(--text); font-size:13px; text-align:center; padding:0; font-family:inherit;}
.stepper input:focus{outline:none;}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.stepper input[type=number]{-moz-appearance:textfield;}
.stepper-label{font-size:13px; color:var(--text); white-space:nowrap; min-width:0;}
#diffLabel{display:inline-block; width:82px; text-align:center;}
/* qty-ctl: stepper +/- para la cantidad de una ficha en la tarjeta de detalle de la mesa (#15) */
.qty-ctl{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:4px 10px;}
.qty-ctl button{background:none; border:none; color:var(--brass); font-size:14px; cursor:pointer; padding:0; line-height:1;}
.qty-ctl span{min-width:14px; text-align:center; font-size:13px; font-variant-numeric:tabular-nums;}

.layout{display:grid; grid-template-columns: 1fr 380px; gap:24px; align-items:start;}
@media (max-width: 980px){ .layout{grid-template-columns:1fr;} }

.panel{
  background:var(--surface); border:1px solid var(--border-soft); border-radius:11px;
  padding:16px 18px; margin-bottom:16px;
}
.panel h2{font-size:16px; margin-bottom:4px;}
.panel .sub{color:var(--text-faint); font-size:12.5px; margin-bottom:16px;}
.sticky{position:sticky; top:20px;}

.field label{display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px;}
.field input, .field select{
  width:100%; background:var(--bg-raised); border:1px solid var(--border);
  color:var(--text); padding:8px 10px; border-radius:4px; font-size:14px; font-family:inherit;
}
.field input:focus, .field select:focus{outline:none; border-color:var(--brass-soft);}

.toggle-row{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; color:var(--text-dim);}
.toggle-row input{accent-color:var(--brass);}

table.margins{width:100%; border-collapse:collapse; font-size:11px; white-space:nowrap;}
table.margins th{
  text-align:right; font-weight:500; color:var(--text-faint); font-size:9.5px;
  padding:4px; border-bottom:1px solid var(--border-soft);
}
table.margins th:first-child{text-align:left;}
table.margins td{padding:4px; text-align:right; border-bottom:1px solid var(--border-soft);}
table.margins td:first-child{text-align:left; color:var(--text-dim);}
table.margins tr:last-child td{border-bottom:none;}

/* --- bestiario: búsqueda + tabs de tipo + más filtros (Paso 2) --- */
.search-row{display:flex; gap:8px; margin-bottom:11px; flex-wrap:wrap; align-items:center;}
.search-row input[type=text]{
  flex:1; min-width:170px; background:var(--surface-2); border:1px solid var(--border);
  color:var(--text); border-radius:7px; padding:8px 11px; font-size:12.5px; font-family:inherit;
}
.btn-ghost{
  background:var(--surface); border:1px solid var(--border); color:var(--text-dim);
  border-radius:7px; padding:8px 13px; font-size:12px; cursor:pointer; white-space:nowrap; font-family:inherit;
}
.btn-ghost:hover{border-color:var(--brass-soft); color:var(--brass);}

.tabs{display:flex; gap:5px; overflow-x:auto; padding-bottom:9px; margin-bottom:9px; border-bottom:1px solid var(--border-soft);}
.tab{
  flex-shrink:0; background:none; border:none; color:var(--text-faint); padding:6px 4px;
  font-size:11px; cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent; font-family:inherit;
}
.tab:hover{color:var(--text-dim);}
.tab.active{color:var(--brass); border-bottom-color:var(--brass);}

.mf-toggles{grid-column:1/-1; display:flex; gap:16px; margin-top:8px; padding-top:10px; border-top:1px solid var(--border-soft); flex-wrap:wrap;}
.mf-toggles label{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-dim); cursor:pointer;}
.mf-toggles input{accent-color:var(--brass);}
.mf-toggles.standalone{border-top:none; padding-top:0; margin-top:0; margin-bottom:11px;}

.beast-table{border:1px solid var(--border-soft); border-radius:8px; overflow:hidden;}
.bt-body{max-height:480px; overflow-y:auto;}
.bt-row{
  display:grid; grid-template-columns: 1.8fr repeat(5,0.55fr) 0.8fr 0.5fr 0.6fr;
  gap:8px; align-items:center; padding:9px 12px; border-bottom:1px solid var(--border-soft);
  font-size:12.5px;
}
.bt-row:last-child{border-bottom:none;}
.bt-row:hover{background:var(--surface-2);}
.bt-row .bname{display:flex; align-items:center; gap:8px; min-width:0;}
.bt-row .bname img{width:22px; height:22px; border-radius:50%; flex-shrink:0;}
.bt-row .bname .bn-text{min-width:0;}
.bt-row .bn-name-row{display:flex; align-items:center; gap:4px; min-width:0;}
.bt-row .cname{color:var(--text); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.bt-row .csub{color:var(--text-faint); font-size:11px; display:block; margin-top:1px;}
.bt-row .stat{text-align:center; color:var(--text-dim); font-variant-numeric:tabular-nums;}
.bt-row .stat.na{color:var(--text-faint);}
.xf-cell{
  text-align:center; font-size:11px; cursor:pointer; border-radius:3px; padding:2px 4px;
  color:var(--text-faint); background:none; border:none; font-family:inherit;
}
.xf-cell:hover{background:var(--surface-2);}
.xf-cell.set{font-weight:600;}
.xf-cell.t-muybajo, .xf-cell.set.t-bajo{color:var(--text-faint);}
.xf-cell.set.t-medio{color:var(--warn);}
.xf-cell.set.t-alto, .xf-cell.set.t-muyalto, .xf-cell.set.t-extremo{color:var(--bad);}
.xf-cell .xf-reason-dot{font-size:8px; vertical-align:super;}
.xf-cell.inline{display:inline-block; text-align:left; padding:1px 5px; border:1px solid var(--border); margin:0 2px;}
.bt-head{
  display:grid; grid-template-columns: 1.8fr repeat(5,0.55fr) 0.8fr 0.5fr 0.6fr; gap:8px;
  padding:8px 12px; font-size:9.5px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.04em;
  border-bottom:1px solid var(--border-soft); background:var(--surface-2);
}
.bt-head span:not(:first-child){text-align:center;}
.bt-head span.sortable{cursor:pointer; user-select:none;}
.bt-head span.sortable:hover{color:var(--text-dim);}
.bt-head span.sortable.active{color:var(--brass);}
.bt-head span.sortable .arrow{font-size:9px; margin-left:2px;}

button{font-family:inherit; cursor:pointer;}
.btn-add{
  background:var(--brass); color:#1a1408; border:none; border-radius:4px;
  width:26px; height:26px; font-size:15px; line-height:1; font-weight:700;
}
.btn-add:hover{background:#d6ac63;}
.empty-note{padding:24px; text-align:center; color:var(--text-faint); font-size:13px;}

.load-more{padding:16px 12px 20px; display:flex; flex-direction:column; align-items:center; gap:9px;}
.load-more-count{color:var(--text-faint); font-size:12px;}

.btn-remove{background:none; border:none; color:var(--text-faint); font-size:16px; padding:0 4px;}
.btn-remove:hover{color:var(--bad);}

/* --- diagnóstico: Defensa/Ofensiva/Balance total (Paso 2) --- */
.eyebrow{font-size:10px; color:var(--text-faint); text-transform:uppercase; letter-spacing:0.07em; margin-bottom:3px;}
.status-icon-row{display:flex; gap:8px;}
.stat-card{flex:1; background:var(--surface-2); border-radius:8px; padding:10px 12px;}
.stat-card .sh{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-dim); margin-bottom:8px;}
.stat-card .sh .sh-label{display:flex; align-items:center;}
.stat-card .sh svg{width:14px; height:14px; stroke:var(--bad); margin-right:5px; flex-shrink:0;}
.stat-card .pct{font-weight:600; font-variant-numeric:tabular-nums;}

.bar-track{position:relative; height:8px; border-radius:4px; background:var(--bar-track); overflow:visible;}
.bar-zone{position:absolute; top:0; height:100%; background:var(--bar-zone); border-radius:2px;}
.bar-fill{position:absolute; left:0; top:0; height:100%; border-radius:4px; transition:width 0.2s ease;}
.bar-marker{position:absolute; top:-3px; width:2px; height:14px; background:var(--bar-marker); border-radius:1px; z-index:2;}

.balance-total{background:var(--surface-2); border-radius:8px; padding:11px 13px; margin-top:10px;}
.balance-total .sh{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-dim); margin-bottom:8px;}
.balance-total .pct{font-weight:600; font-variant-numeric:tabular-nums;}

.metric-nums{display:flex; justify-content:space-between; font-size:10px; color:var(--text-faint); margin-top:5px;}

.obs-header{display:flex; align-items:center; gap:8px; margin:16px 0 4px; padding-top:14px; border-top:1px solid var(--border-soft);}
.obs-header svg{width:15px; height:15px; stroke:var(--brass); flex-shrink:0;}
.obs-header .lbl{font-size:10.5px; color:var(--text-faint); display:block;}
.obs-header .count{font-size:13px; font-weight:600; color:var(--text);}

/* cada observación es su propio acordeón — comprimida por default (#13) */
.rec-item{padding:10px 0; border-bottom:1px solid var(--border-soft);}
.rec-item:last-child{border-bottom:none;}
.rec-title{
  display:flex; align-items:baseline; gap:6px; font-size:13px; font-weight:600;
  color:var(--text); cursor:pointer; user-select:none;
}
.rec-title .chev{color:var(--bad); font-weight:700; display:inline-block; transition:transform 0.15s ease;}
.rec-title.warn .chev{color:var(--warn);}
.rec-title.expanded .chev{transform:rotate(90deg);}
.rec-body{margin-top:4px;}
.rec-desc{font-size:11.5px; color:var(--text-dim); margin:0 0 0 15px; line-height:1.5;}
.rec-advice{margin:6px 0 0 15px; padding-left:16px; color:var(--text-dim); font-size:11.5px; line-height:1.6;}
.rec-advice li{margin-bottom:2px;}

/* tarjeta vertical de 5 líneas (#12): cabecera, estadísticas, X-Factor, descripción, botones */
.suggest-card{
  background:var(--surface-2); border:1px solid var(--border); border-radius:8px;
  padding:9px 11px; margin:8px 0 0;
}
.sc-head{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:3px;}
.sc-head .badge-mini{width:24px; height:24px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.sc-head .badge-mini img{width:100%; height:100%; display:block; border-radius:50%;}
.sc-head .sname{font-size:12.5px; color:var(--text); font-weight:600;}
.sc-head .scr{font-size:10.5px; color:var(--text-faint);}
.suggest-card .sc-badges{margin:1px 0 4px;}
.suggest-card .sstats{font-size:11px; color:var(--text-dim); margin-bottom:2px;}
.suggest-card .sxf{font-size:10.5px; color:var(--text-faint); margin-bottom:2px;}
.suggest-card .sdelta{font-size:11px; color:var(--text-faint); margin-bottom:2px;}
.suggest-card .suggest-actions{margin-top:5px;}

.more-info{
  margin-top:10px; padding:12px 14px; background:var(--bg-raised); border-radius:5px;
  border:1px solid var(--border-soft); font-size:12px;
}
.more-info .mi-section{margin-bottom:12px;}
.more-info .mi-section:last-child{margin-bottom:0;}
.more-info .mi-title{color:var(--text-dim); font-size:11px; text-transform:uppercase; letter-spacing:0.03em;}
.more-info .mi-title-row{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; gap:8px;}
.more-info .mi-row{display:flex; justify-content:space-between; padding:2px 0; color:var(--text-faint);}
.more-info .mi-row b{color:var(--text);}
.margins-scroll{overflow-x:auto;}
td.mi-actual{color:var(--text); font-weight:500;}

.status-banner{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:5px;
  font-size:13px; margin-bottom:18px; border:1px solid transparent;
}
.status-banner.good{background:var(--good-bg); color:var(--good); border-color:rgba(111,174,127,0.3);}
.status-banner.warn{background:var(--warn-bg); color:var(--warn); border-color:rgba(209,169,79,0.3);}
.status-banner.bad{background:var(--bad-bg); color:var(--bad); border-color:rgba(193,104,92,0.3);}
.status-banner .dot{width:8px; height:8px; border-radius:50%; background:currentColor; flex-shrink:0;}

.xf-alert{
  margin-top:14px; padding:10px 12px; border-radius:5px; background:var(--warn-bg);
  border:1px solid rgba(209,169,79,0.3); font-size:12px; color:var(--warn);
}
.suggest-actions{display:flex; gap:4px; flex-shrink:0;}
.btn-mini{
  background:var(--bg-raised); border:1px solid var(--border); color:var(--text-dim);
  border-radius:3px; padding:3px 8px; font-size:10.5px; white-space:nowrap;
}
.btn-mini:hover{border-color:var(--brass-soft); color:var(--brass);}
.btn-mini.primary{background:var(--brass); color:#1a1408; border-color:var(--brass); font-weight:600;}
.btn-mini.primary:hover{background:#d6ac63;}
.help-badges{margin-left:6px;}
.badge-help{font-size:9px; padding:1px 5px; border-radius:2px; margin-right:3px; font-weight:600;}
.badge-help.def{background:var(--good-bg); color:var(--good);}
.badge-help.off{background:var(--warn-bg); color:var(--warn);}

.conn-status{font-size:11px; padding:3px 8px; border-radius:3px; margin:-14px 0 18px;}
.conn-status.bad{color:var(--bad); background:var(--bad-bg);}

.btn-edit{
  background:none; border:none; color:var(--text-faint); font-size:12px; padding:0 2px;
  vertical-align:middle;
}
.btn-edit:hover{color:var(--brass);}
.modified-badge{color:var(--brass); font-size:10px; vertical-align:middle;}
.homebrew-badge{
  font-size:8.5px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--brass); border:1px solid rgba(209,169,79,0.4); border-radius:3px;
  padding:0 4px; vertical-align:middle; white-space:nowrap;
}
.btn-del{
  background:none; border:none; color:var(--text-faint); font-size:11px; padding:0 2px;
  vertical-align:middle; cursor:pointer;
}
.btn-del:hover{color:var(--bad);}

.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.55); display:flex;
  align-items:center; justify-content:center; z-index:100;
}
.modal{
  background:var(--surface); border:1px solid var(--border); border-radius:11px;
  padding:22px 24px; width:420px; max-width:92vw;
}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:2px;}
.modal-head h3{font-size:17px;}
.modal-sub{color:var(--text-faint); font-size:12px; margin-bottom:16px;}
.modal-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin-bottom:18px;}
.modal-grid .field input{width:100%;}
.field textarea{
  width:100%; background:var(--bg-raised); border:1px solid var(--border); color:var(--text);
  padding:8px 10px; border-radius:4px; font-size:13px; font-family:inherit; resize:vertical;
}
.modal-actions{display:flex; justify-content:space-between; align-items:center;}
.modal-hint{font-size:11px; color:var(--text-faint);}
.btn-primary{
  background:var(--brass); color:#1a1408; border:none; border-radius:7px;
  padding:7px 16px; font-size:13px; font-weight:600;
}
.btn-primary:hover{background:#d6ac63;}
.btn-secondary{
  background:none; border:1px solid var(--border); color:var(--text-dim); border-radius:7px;
  padding:7px 14px; font-size:13px; margin-right:8px;
}
.btn-secondary:hover{border-color:var(--text-faint); color:var(--text);}
.btn-secondary.danger{color:var(--bad); border-color:rgba(196,84,74,0.35);}
.btn-secondary.danger:hover{color:var(--bad); border-color:var(--bad);}
.modal-sm{width:340px;}
.btn-danger{
  background:var(--bad); color:#2a0d0a; border:none; border-radius:7px;
  padding:7px 16px; font-size:13px; font-weight:600;
}
.btn-danger:hover{background:#e8a09a;}

.xf-guide{
  margin:10px 0 14px; padding:14px 16px; background:var(--bg-raised); border-radius:5px;
  border:1px solid var(--border-soft); font-size:12px; max-height:340px; overflow-y:auto;
}
.xf-guide p{margin:0 0 10px; color:var(--text-dim); line-height:1.6;}
.xf-guide .xfg-cat{color:var(--brass); font-size:11px; text-transform:uppercase; letter-spacing:0.03em; margin:12px 0 5px;}
.xf-guide .xfg-cat:first-of-type{margin-top:0;}
.xf-guide .xfg-row{display:flex; justify-content:space-between; gap:10px; padding:2px 0; color:var(--text-faint);}
.xf-guide .xfg-row b{color:var(--text); font-weight:500; text-align:right; flex-shrink:0;}

.btn-link{
  background:none; border:none; color:var(--brass); font-size:12px; padding:0;
  text-decoration:none;
}
.btn-link:hover{text-decoration:underline;}

.margins input{
  width:46px; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:4px 5px; border-radius:5px; font-size:11.5px; text-align:right; font-family:inherit;
}
.margins input:focus{outline:none; border-color:var(--brass-soft);}
tr.overridden td:first-child{color:var(--brass);}

.more-filters{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; margin:4px 0 14px;
  padding:12px; background:var(--bg-raised); border-radius:5px; border:1px solid var(--border-soft);
}
.mf-row{display:grid; grid-template-columns:70px 1fr 1fr 20px; gap:6px; align-items:center;}
.mf-row label{font-size:11.5px; color:var(--text-dim);}
.mf-reset{
  background:none; border:none; color:var(--text-faint); cursor:pointer;
  font-size:14px; line-height:1; padding:2px; border-radius:4px; justify-self:center;
}
.mf-reset:hover{color:var(--brass);}
.mf-row input, .mf-row select{
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:5px 6px; border-radius:3px; font-size:12px; font-family:inherit; width:100%;
}

/* spin-box: mismo criterio para los 7 filtros de valores (#17) — una sola caja
   con flechas ▲▼ que solo aparecen al hover, en vez del spinner nativo del
   navegador (que varía de look según el browser/SO). Envuelve un <input> tipeable
   (AC/Ataque/DC/HP/DPR: rangos continuos) o un <span> de solo lectura (CR/X-Factor:
   listas discretas, se ciclan con las flechas) — mismo marcado, mismo estilo. */
.spin-box{
  background:var(--surface); border:1px solid var(--border); color:var(--text);
  padding:5px 6px; border-radius:3px; font-size:12px; font-family:inherit; width:100%;
  display:flex; align-items:center; gap:4px;
}
.spin-box > *:first-child{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.spin-box .placeholder{color:var(--text-faint);}
.spin-box input{background:none; border:none; color:inherit; font:inherit; padding:0; width:100%;}
.spin-box input::placeholder{color:var(--text-faint); opacity:1;}
.spin-box input:focus{outline:none;}
.spin-box input::-webkit-outer-spin-button, .spin-box input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.spin-box input[type=number]{-moz-appearance:textfield;}
.spin-box .spin-arrows{display:flex; flex-direction:column; flex-shrink:0; opacity:0; transition:opacity .12s ease;}
.spin-box:hover .spin-arrows{opacity:1;}
.spin-box .spin-arrows button{
  background:none; border:none; color:var(--text-faint); font-size:7px; line-height:1;
  padding:0; margin:0; cursor:pointer; height:8px;
}
.spin-box .spin-arrows button:hover{color:var(--brass);}

.stat.cr-over{color:var(--bad); font-weight:600;}
.cr-flag{font-size:9px; color:var(--bad);}

.warn-item{
  display:flex; gap:8px; padding:8px 10px; border-radius:5px; background:var(--bad-bg);
  color:var(--bad); font-size:12px; margin-bottom:8px; border:1px solid rgba(193,104,92,0.3);
}

.xp-box{
  margin-top:10px; padding:10px 12px; border-radius:5px; background:var(--bg-raised);
  border:1px solid var(--border-soft); font-size:12px;
}
.xp-box .row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:3px 0; color:var(--text-dim);}
.xp-box .row b{color:var(--text);}
.xp-box .tier-inline{font-weight:600;}
.xp-box .tier-inline.baja{color:var(--good);}
.xp-box .tier-inline.moderada{color:var(--warn);}
.xp-box .tier-inline.alta{color:var(--bad);}
.xp-box .tier{
  display:inline-block; padding:2px 8px; border-radius:3px; font-size:11px; font-weight:600;
}
.xp-box .tier.trivial{background:var(--surface-2); color:var(--text-faint);}
.xp-box .tier.baja{background:var(--good-bg); color:var(--good);}
.xp-box .tier.moderada{background:var(--warn-bg); color:var(--warn);}
.xp-box .tier.alta{background:var(--bad-bg); color:var(--bad);}

/* =====================================================================
   Mesa del encuentro (Paso 1) — fichas arrastrables. Namespace .mesa-*
   deliberado: no reutiliza nombres de clase ya usados arriba, para
   convivir sin chocar con el resto del frontend hasta el Paso 2, que
   migra todo a esta misma estética.
   ===================================================================== */
.mesa-meta{font-size:11px; color:var(--text-faint);}

/* Barra de acciones de la mesa (Fase 6a). El mensaje va al lado del botón y no
   en un cartel flotante: lo que tiene para decir ("no hay candidatas con estos
   filtros") es sobre el botón que acabás de tocar. */
.mesa-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:9px;}
.mesa-msg{font-size:11px; color:var(--text-faint); flex:1; min-width:120px;}
.mesa-msg.warn{color:var(--brass);}

/* Zoom de la mesa (Fase 6c). Cluster compacto − / % / +. El % es un botón:
   clickearlo vuelve a 100 %. Era Premium y pasó a la versión gratuita. */
.mesa-zoom{display:inline-flex; align-items:center; gap:2px;}
.mesa-zoom .mz-btn,
.mesa-zoom .mz-lbl{
  background:var(--surface); border:1px solid var(--border); color:var(--text-dim);
  border-radius:6px; height:26px; font-family:inherit; cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.mesa-zoom .mz-btn{width:26px; font-size:14px;}
.mesa-zoom .mz-lbl{min-width:44px; padding:0 6px; font-size:11px;}
.mesa-zoom .mz-btn:hover,
.mesa-zoom .mz-lbl:hover{border-color:var(--brass-soft); color:var(--brass);}

.mesa-board-outer{border:1px solid var(--border-soft); border-radius:6px; overflow:hidden;}
.mesa-board{
  position:relative; min-height:300px; padding:10px; overflow:hidden;
  background-color:var(--mesa-bg);
  background-image:
    linear-gradient(to right, var(--mesa-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--mesa-grid-line) 1px, transparent 1px);
  background-size:72px 72px;
}

/* Wrapper de zoom (Fase 6c). SOLO las fichas van acá adentro. transform:
   scale(z) con transform-origin al CENTRO: acercar/alejar deja fija la zona
   central de la mesa. La grilla (fondo de #mesaBoard) y el canvas de dibujo no
   se escalan por CSS — el zoom se les aplica por código — así cubren siempre
   todo el tablero y el trazo/grilla quedan a 1px sin importar el zoom. */
.mesa-scale{
  position:absolute; inset:0; transform-origin:50% 50%; pointer-events:none;
}
.mesa-scale > *{pointer-events:auto;}

/* Capa de dibujo (Fase 6b, Premium). Cubre el tablero por encima de las fichas.
   Deja pasar el puntero salvo con el lápiz activo, así mover fichas y dibujar no
   se pisan. Los trazos no se persisten. */
.mesa-draw-layer{
  position:absolute; top:0; left:0; width:100%; height:100%;
  z-index:4; pointer-events:none; touch-action:none;
}
.mesa-draw-layer.drawing{pointer-events:auto;}
.mesa-board.drawing{cursor:crosshair;}
#btnDrawToggle.active{border-color:var(--brass); color:var(--brass); background:var(--brass-bg);}

.mesa-token{position:absolute; cursor:grab; touch-action:none; user-select:none; z-index:1;}
.mesa-token:active{cursor:grabbing; z-index:6;}
.mesa-token .mesa-badge{
  width:56px; height:56px; border-radius:50%; position:relative;
  transform:translate(-50%,-50%);
}
.mesa-token .mesa-badge img{width:100%; height:100%; display:block; border-radius:50%;}
.mesa-token.player .mesa-badge{box-shadow:0 0 0 3px var(--mesa-bg), 0 0 0 5px var(--brass);}
.mesa-token.selected .mesa-badge{outline:2px dashed var(--brass); outline-offset:4px; border-radius:50%;}
/* PJ con valores propios (Fase 6d-4): anillo más marcado + un punto, para que
   se note de un vistazo cuál de las fichas mueve los Márgenes objetivo. */
.mesa-token.player.custom .mesa-badge{box-shadow:0 0 0 3px var(--mesa-bg), 0 0 0 5px var(--good);}
.mesa-token .mesa-pccustom{
  position:absolute; bottom:-2px; right:-2px; width:12px; height:12px; border-radius:50%;
  background:var(--good); border:2px solid var(--mesa-bg);
}
.mesa-token .mesa-capwarn{
  position:absolute; bottom:-4px; left:-4px; width:14px; height:14px; border-radius:50%;
  background:var(--bad); color:#1a0d0a; font-size:9px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:1.5px solid var(--mesa-bg);
}
.mesa-token .mesa-lbl{
  position:absolute; top:34px; left:0; transform:translateX(-50%); font-size:10px; color:var(--text);
  background:var(--bg-raised); border:1px solid var(--border); padding:2px 8px; border-radius:4px;
  white-space:nowrap; pointer-events:none;
}

/* grilla de íconos del modal de PJ (Fase 6d-4) */
.pc-icon-grid{display:flex; flex-wrap:wrap; gap:8px;}
.pc-icon{
  width:44px; height:44px; padding:3px; border-radius:50%; cursor:pointer;
  background:var(--bg-raised); border:1px solid var(--border); transition:0.15s;
}
.pc-icon img{width:100%; height:100%; display:block; border-radius:50%; object-fit:cover;}
.pc-icon:hover{border-color:var(--brass-soft);}
.pc-icon.on{border-color:var(--brass); box-shadow:0 0 0 2px var(--brass-bg);}
.pc-icon-actions{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap;}

.mesa-trash{
  position:absolute; bottom:10px; right:10px; width:34px; height:34px; border-radius:50%;
  background:var(--bg-raised); border:1px solid var(--border); color:var(--text-faint);
  display:flex; align-items:center; justify-content:center; transition:0.15s; z-index:5;
}
.mesa-trash.hover{background:#4a1f1c; color:#e8a09a; border-color:var(--bad);}
.mesa-trash:disabled{opacity:0.4; cursor:not-allowed;}

.mesa-empty-hint{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center;
  color:var(--text-faint); font-size:12px; pointer-events:none; max-width:220px;
}

.mesa-detail{border-top:1px solid var(--border-soft); margin-top:12px; padding-top:14px;}
.mesa-detail-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px;}
.mesa-detail-title{display:flex; align-items:center;}
.mesa-detail-title .mesa-badge-mini{width:34px; height:34px; margin-right:9px; flex-shrink:0;}
.mesa-detail-title .mesa-badge-mini img{width:100%; height:100%; display:block; border-radius:50%;}
.mesa-detail-title b{font-size:14px;}
.mesa-detail-title .sub{display:block; font-size:11px; color:var(--text-faint);}
.mesa-detail-stats{font-size:12px; color:var(--text-dim); margin-bottom:10px;}
.mesa-detail-actions{display:flex; gap:8px; flex-wrap:wrap;}

::-webkit-scrollbar{width:9px; height:9px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border); border-radius:5px;}

/* aviso de almacenamiento (Fase 2) — mismo lenguaje visual que .status-banner.warn,
   pero a lo ancho de la app y con su propio botón de cerrar */
.storage-notice{
  display:flex; align-items:flex-start; gap:10px;
  margin:0 0 12px; padding:10px 14px; border-radius:5px;
  background:var(--warn-bg); border:1px solid rgba(209,169,79,0.3);
  color:var(--warn); font-size:12.5px; line-height:1.45;
}
.storage-notice span{flex:1;}
.storage-notice button{
  background:none; border:none; color:var(--warn); cursor:pointer;
  font-size:16px; line-height:1; padding:0 2px; flex-shrink:0; opacity:.7;
}
.storage-notice button:hover{opacity:1;}

/* importar datos (Fase 4) — vive dentro de .modal, reusa sus botones */
#importModalBody{margin-bottom:18px; font-size:12.5px; color:var(--text-dim);}
.import-counts{
  display:flex; flex-direction:column; gap:3px; margin:0 0 12px;
  padding:10px 12px; background:var(--bg-raised); border-radius:5px; border:1px solid var(--border-soft);
}
.import-counts .ic-row{display:flex; justify-content:space-between; gap:10px;}
.import-counts .ic-row b{color:var(--text); font-variant-numeric:tabular-nums;}
.import-strategy{display:flex; flex-direction:column; gap:8px; margin-top:10px;}
.import-strategy button{
  text-align:left; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:7px; padding:9px 12px; font-family:inherit; font-size:13px;
}
.import-strategy button:hover{border-color:var(--brass-soft);}
.import-strategy button .is-sub{display:block; font-size:11px; color:var(--text-faint); margin-top:2px;}
.import-report .ir-line{color:var(--text); margin-bottom:8px;}
.import-report .ir-errors{margin:0; padding-left:16px; color:var(--bad); font-size:11.5px; line-height:1.6;}
.import-error{color:var(--bad);}

/* ---------------------------------------------------------- Premium (Fase 5) */
.icon-btn{
  background:none; border:1px solid var(--border); border-radius:7px;
  color:var(--text-faint); cursor:pointer; padding:4px 6px;
  display:inline-flex; align-items:center; line-height:0;
}
.icon-btn:hover{color:var(--brass); border-color:var(--brass-soft);}

/* Cartelito de la topbar: solo aparece cuando hay Premium. */
.premium-pill{
  display:inline-flex; align-items:center;
  padding:3px 9px; border-radius:20px; font-size:10.5px; font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase;
  background:var(--brass-bg); color:var(--brass); border:1px solid rgba(201,162,77,0.35);
}
.premium-pill.dev{
  background:var(--warn-bg); color:var(--warn); border-color:rgba(209,169,79,0.3);
  text-transform:none; letter-spacing:0;
}

.premium-state{
  margin:2px 0 14px; padding:11px 13px; border-radius:6px;
  background:var(--bg-raised); border:1px solid var(--border-soft);
}
.premium-state.on{background:var(--brass-bg); border-color:rgba(201,162,77,0.28);}
.premium-state .ps-head{font-weight:600; font-size:13.5px;}
.premium-state.on .ps-head{color:var(--brass);}
.premium-state .ps-sub{color:var(--text-dim); font-size:12.5px; margin-top:2px;}

.premium-features .pf-head{
  font-size:10px; color:var(--text-faint); text-transform:uppercase;
  letter-spacing:0.07em; margin-bottom:6px;
}
.premium-features .pf-row{
  display:flex; align-items:center; gap:8px; padding:3px 0; font-size:12.5px;
}
.premium-features .pf-row.off{color:var(--text-dim);}
.premium-features .pf-mark{width:16px; flex-shrink:0; text-align:center; font-size:11px;}
.premium-features .pf-row.on .pf-mark{color:var(--good);}

#premiumKeyInput{
  width:100%; background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  padding:8px 10px; border-radius:5px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px; line-height:1.45; resize:vertical; word-break:break-all;
}
#premiumKeyInput:focus{outline:none; border-color:var(--brass-soft);}

.premium-dev-hint{
  color:var(--text-faint); font-size:11.5px; line-height:1.45; margin:2px 0 0 22px;
}

.premium-msg{
  margin-top:9px; padding:8px 11px; border-radius:5px; font-size:12.5px; line-height:1.45;
}
.premium-msg.good{background:var(--good-bg); color:var(--good); border:1px solid rgba(111,174,127,0.3);}
.premium-msg.bad{background:var(--bad-bg); color:var(--bad); border:1px solid rgba(196,100,90,0.3);}
.premium-msg.info{background:var(--brass-bg); color:var(--brass); border:1px solid rgba(201,162,77,0.28);}

/* Un control bloqueado sigue visible y clickeable (el click abre Ajustes y
   explica por qué): apagarlo del todo dejaría a alguien sin saber que existe.
   El candado lo pone el CSS para no tener que tocarle el contenido al control. */
.premium-locked{opacity:.55;}
.premium-locked::after{content:'🔒'; font-size:10px; margin-left:5px; opacity:.85;}
.premium-locked:hover{opacity:.8;}