/* Ajustes de la preview: rutas de los assets del kit + piezas que faltaban */
:root{
  --hero:url(../datos/tema/kit_hd/backgrounds/bg-light.webp);
  --hero-dark:url(../datos/tema/kit_hd/backgrounds/bg-dark.webp);
}
[data-tema="oscuro"]{--hero:url(../datos/tema/kit_hd/backgrounds/bg-dark.webp)}
.brand img{height:36px;width:36px;object-fit:contain;background:transparent;border-radius:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:.4rem}
.chip{padding:6px 13px;border:1px solid var(--border);border-radius:999px;font-size:.82rem;color:var(--text);
  background:rgba(20,40,80,.4);transition:var(--t)}
.chip:hover{background:var(--gold);color:#0B1020;border-color:var(--gold)}
.vacio-mini{color:var(--muted);font-size:.85rem;padding:.6rem 0;line-height:1.5}
.panel .row b{color:var(--gold)}
.panel .row:last-child{border-bottom:none}
.row .on{display:inline-flex;align-items:center;gap:6px}
.row img.av{border-radius:50%;width:24px;height:24px;object-fit:cover}
@media(max-width:800px){.nav ul{display:none}.hero{min-height:380px}}

/* iconos HD en las tarjetas (2K) */
.card .ic img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 4px 18px rgba(251,191,36,.45))}
.card .ic{display:flex;justify-content:center;margin-bottom:.4rem}
.brand img{filter:drop-shadow(0 0 10px rgba(251,191,36,.5))}

/* chips con su icono */
.chip{display:inline-flex;align-items:center;gap:7px}
.chip img{width:20px;height:20px;object-fit:contain}
.card .ic img{width:76px;height:76px}

/* ═══ la vista Inicio es la landing del kit, dentro de la app ═══ */
#sec-inicio{padding:0!important;margin:0!important}
#sec-inicio .hero{min-height:520px;margin:0}
#sec-inicio .wrap{margin-top:-3rem}
#sec-inicio .card,#sec-inicio .chip{font:inherit;cursor:pointer;text-align:center}
#sec-inicio .card{width:100%}
#sec-inicio .grid4>*{text-decoration:none}
#sec-inicio .panel h3{font-family:var(--serif)}
/* las pestañas de arriba con el aire del kit (cristal + dorado) */
.nav-kit{gap:.35rem;flex-wrap:wrap}
.nav-kit .pestana{
  background:transparent;border:1px solid transparent;color:var(--tinta-2);
  padding:7px 12px;border-radius:9px;font-size:.86rem;cursor:pointer
}
.nav-kit .pestana:hover{color:#FBBF24;border-color:rgba(251,191,36,.35)}
.nav-kit .pestana.activa{color:#FBBF24;border-color:rgba(251,191,36,.55);background:rgba(20,40,80,.45)}
.nav-kit .pestana img{width:18px;height:18px;filter:brightness(0) saturate(100%) invert(80%) sepia(55%) saturate(600%) hue-rotate(340deg)}

/* ═══ ACCESIBILIDAD: el dorado del kit (#FBBF24) no se lee sobre fondo claro ═══
   En tema claro, los TEXTOS dorados pasan a dorado oscuro (5:1). El dorado vivo se queda
   para bordes, iconos y botones, donde sí funciona. */
html[data-tema="claro"] .card h3,
html[data-tema="claro"] .panel h3,
html[data-tema="claro"] .brand,
html[data-tema="claro"] .hero h1{color:#8a6612!important}
html[data-tema="claro"] .nav-kit .pestana.activa,
html[data-tema="claro"] .nav-kit .pestana:hover{color:#8a6612!important;border-color:rgba(138,102,18,.5)!important}
html[data-tema="claro"] .row b{color:#8a6612!important}
html[data-tema="claro"] .chip:hover{background:#8a6612!important;color:#fff!important;border-color:#8a6612!important}

/* ═══ el menu del kit: una sola linea, con scroll si hace falta (nada de bloques) ═══ */
.nav-kit{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav-kit::-webkit-scrollbar{display:none}
.nav-kit .pestana{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav-kit .pestana img{width:16px;height:16px}
@media (max-width:1100px){.nav-kit .pestana{font-size:.78rem;padding:6px 9px}}

/* ══════════════════════════════════════════════════════════════════════════════════
   FONDO LIMPIO (orden de Zaubel: el fondo estaba horrible por capas acumuladas).
   Fuera el canvas de rombos, los velos y las texturas superpuestas: el fondo es el
   del kit, un color solido con un degradado suave. El arte vive SOLO en el hero.
   ══════════════════════════════════════════════════════════════════════════════════ */
/* OJO (29-09-2026): aqui se apagaba #red con display:none pensando en el canvas de rombos VIEJO,
   pero #red es el CIELO DE AETHER (fondo vivo, fondo-aether.js). Al apagarlo, al bajar la pagina se
   acababa el fondo y se veia el SVG del body (el "otro feo"). El cielo se MANTIENE. */
.velo{display:none!important}
body,.vista-app{
  background-image:none!important;
  background-color:transparent!important;
}
body{
  
}
html[data-tema="claro"] body{
  
}
/* las secciones: sin franjas de mapa detrás tapando media pantalla */
.seccion{background-image:none!important}

/* ═══ EL FONDO ES EL ARTE DEL CASTILLO (como en las referencias), no particulas ═══ */
body{
  background-image:linear-gradient(to bottom,rgba(11,16,32,.62) 0%,rgba(11,16,32,.86) 55%,#0B1020 100%),
                   url("../datos/tema/kit_hd/backgrounds/bg-dark.webp")!important;
  background-size:cover!important; background-position:center 22%!important;
  background-attachment:fixed!important; background-repeat:no-repeat!important;
}
html[data-tema="claro"] body{
  background-image:linear-gradient(to bottom,rgba(248,250,252,.72) 0%,rgba(248,250,252,.9) 55%,#F8FAFC 100%),
                   url("../datos/tema/kit_hd/backgrounds/bg-light.webp")!important;
}

/* ═══ FONDO AETHER DE AUREON (inventado con IA): eter azul y dorado sobre islas lejanas.
   Vivo con un zoom lentisimo (90 s) — nada de particulas ni canvas. ═══ */
body{
  background-image:linear-gradient(to bottom,rgba(11,16,32,.72) 0%,rgba(11,16,32,.86) 45%,rgba(11,16,32,.95) 78%,#0B1020 100%),
                   url("../datos/tema/fondo/aether-fondo.webp")!important;
  background-size:cover!important; background-position:center 30%!important;
  background-attachment:fixed!important; background-repeat:no-repeat!important;
}
html[data-tema="claro"] body{
  background-image:linear-gradient(to bottom,rgba(248,250,252,.82) 0%,rgba(248,250,252,.92) 55%,#F8FAFC 100%),
                   url("../datos/tema/fondo/aether-fondo.webp")!important;
}
@keyframes aureon-respira{0%{background-size:100%}50%{background-size:106%}100%{background-size:100%}}
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
  body{animation:aureon-respira 90s ease-in-out infinite}
}

/* ═══ BARRA SIN CORTES: 6 opciones + "Mas"; nada de scroll horizontal feo ═══ */
.nav-kit{flex-wrap:nowrap!important;overflow:visible!important}
.pestana-sec{display:none!important}
.mas-caja{
  position:absolute;top:calc(100% + 6px);right:12px;z-index:60;min-width:190px;
  background:rgba(11,16,32,.97);border:1px solid var(--border);border-radius:12px;
  padding:8px;display:grid;gap:2px;box-shadow:0 18px 44px rgba(0,0,0,.55);backdrop-filter:blur(10px);
}
html[data-tema="claro"] .mas-caja{background:rgba(255,255,255,.98)}
.mas-caja .pestana{display:flex!important;justify-content:flex-start;width:100%;text-align:left;border-radius:9px}
.mas-caja .pestana:hover{background:rgba(251,191,36,.12)}
.caret{font-size:.7rem;opacity:.8}
.mas{position:relative}
@media (max-width:1240px){ .caja-buscar{max-width:150px} }
@media (max-width:1080px){ .pestana{font-size:.78rem;padding:6px 9px} .nav-kit{gap:.15rem} }

/* ═══ BARRA LIMPIA (como la referencia): nada de textos que saturen ni elementos que se pisen ═══ */
.barra-sub{display:none!important}                 /* fuera "REGION EUROPA - SERVIDOR..." */
.latido{display:none!important}                    /* fuera "en vivo" */
.pastilla-rango{display:none!important}            /* fuera la pastilla larga de rango */
#tema-texto{display:none!important}                /* el boton de tema, solo el icono */
.barra,.barra *{min-width:0}                       /* que nada fuerce ancho minimo */
.barra{gap:12px!important;flex-wrap:nowrap!important;overflow:hidden}
.barra-marca{flex:0 0 auto!important}
.barra-titulo-img{height:30px!important;width:auto}
.caja-buscar{flex:0 1 190px!important;max-width:190px!important}
.caja-buscar input{min-width:0}
.pestanas{flex:1 1 auto!important;justify-content:center!important;min-width:0!important}
.barra-derecha{flex:0 0 auto!important;gap:8px!important}
#yo-nombre{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#salir{padding:7px 11px!important}
@media (max-width:1240px){
  .caja-buscar{flex:0 0 44px!important;max-width:44px}
  .caja-buscar input{display:none}
  .caja-buscar kbd{display:none}
}
@media (max-width:1020px){
  .pestana{padding:7px 9px!important}
  .pestana img{display:none}                      /* solo texto cuando va justo */
  #yo-nombre{display:none}
}

/* ═══ PULIDO DE MAQUETACION (del repaso visual: alturas, truncados, chips y respiros) ═══ */

/* 1) columnas a la misma altura (antes quedaban desiguales y dejaban huecos) */
.dos-columnas,.cols,.rejilla-3,.rejilla-tarjetas{display:grid;align-items:stretch}
.dos-columnas > *,.cols > *,.rejilla-3 > *{display:flex;flex-direction:column;height:100%}
.panel-caja{display:flex;flex-direction:column}
.panel-caja > .tabla-envoltura,.panel-caja > .lista-avisos,.panel-caja > .lista-movimientos{flex:1 1 auto}

/* 2) tablas: los nombres no se cortan y las cifras van a la derecha */
.tabla{table-layout:auto;width:100%}
.tabla td,.tabla th{vertical-align:middle}
.tabla td .nomb,.tabla td .tabla-datos span{white-space:normal;overflow-wrap:anywhere;line-height:1.25}
.tabla td.der,.tabla th.der{text-align:right;white-space:nowrap}

/* 3) respiro en los campos (antes el texto tocaba el borde) */
.campo input,.campo select,.campo textarea,.buscador{padding-left:13px!important}
.campo select{padding-left:11px!important}

/* 4) el mapa: todos los chips y botones de la barra lateral al mismo ancho */
.mapa-lado .chip,.mapa-lado button,.mapa-lado .campo{width:100%}
.mapa-lado .chip{justify-content:center}
.mapa-capas{display:grid;grid-template-columns:1fr;gap:6px}

/* 5) los contadores y tarjetas, alineados al mismo borde */
.rejilla-tarjetas{gap:14px}
.tarjeta{justify-content:flex-start}
.dato-grande,.valor{font-variant-numeric:tabular-nums}

/* 6) que ninguna caja quede con un hueco muerto abajo */
.caja-titulo + .vacio, .vacio{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}

/* ═══ GRID QUE NO DESBORDA (el panel se salia 257 px) ═══ */
.cols{display:grid!important;grid-template-columns:2fr 1fr;gap:1rem;min-width:0}
.cols > *,.panel,.card,.row,.row span,.lista-online{min-width:0}
.panel{overflow:hidden}
.row{display:flex!important;justify-content:space-between;gap:1rem;align-items:baseline}
.row > span{overflow-wrap:anywhere}
.row small{white-space:nowrap}
@media (max-width:820px){.cols{grid-template-columns:1fr}}

/* ═══ SIN HUECOS VERTICALES: cada panel con su altura natural (antes se estiraban y dejaban hueco) ═══ */
.cols{align-items:start!important}
.cols > section.panel{height:auto!important}
.dos-columnas{align-items:start!important}
.dos-columnas > .panel-caja{height:auto!important}
.rejilla-3{align-items:start!important}

/* ═══ BANCO DEL GREMIO ═══ */
#sec-banco .rejilla-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end;margin-bottom:14px}
#sec-banco .campo{display:flex;flex-direction:column;gap:5px;min-width:0}
#sec-banco .campo label{font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;opacity:.72}
#sec-banco .campo input,#sec-banco .campo select{width:100%}
#sec-banco .rejilla-form .boton{grid-column:1/-1;justify-self:start}
.fila-mov{display:grid;grid-template-columns:52px minmax(80px,1fr) 96px minmax(90px,1.4fr) auto 26px;
  gap:10px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--borde,rgba(251,191,36,.14))}
.fila-mov:last-child{border-bottom:0}
.mov-fecha,.mov-tipo{font-size:.78rem;opacity:.72}
.mov-quien{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mov-conc{font-size:.84rem;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mov-cant{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.mov-cant.pos{color:#7ee2a8}
.mov-cant.neg{color:#ff9d9d}
.mov-borrar{background:none;border:0;color:inherit;opacity:.4;cursor:pointer;font-size:1.1rem;line-height:1;padding:2px 6px;border-radius:6px}
.mov-borrar:hover{opacity:1;background:rgba(255,120,120,.16)}
.fila-prestamo{border:1px solid var(--borde,rgba(251,191,36,.16));border-radius:12px;padding:11px 13px;margin-bottom:9px}
.fila-prestamo.devuelto{opacity:.6}
.pre-cab{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.pre-cant{font-variant-numeric:tabular-nums;font-weight:700}
.pre-datos{display:flex;justify-content:space-between;gap:10px;font-size:.82rem;opacity:.84;margin-top:5px;flex-wrap:wrap}
.pre-dev b{color:#f0c869}
.pre-pie{display:flex;gap:9px;align-items:center;margin-top:9px;flex-wrap:wrap}
.pre-fecha{font-size:.76rem;opacity:.6}
.etiqueta-ok{font-size:.74rem;padding:2px 9px;border-radius:999px;background:rgba(120,220,160,.16);border:1px solid rgba(120,220,160,.4)}
.tabla-banco{width:100%}
.barra-ap{display:inline-block;width:100%;min-width:70px;height:7px;border-radius:999px;background:rgba(255,255,255,.09);overflow:hidden;vertical-align:middle}
.barra-ap i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#c99a2e,#f0c869)}
.neg{color:#ff9d9d}
.pos{color:#7ee2a8}
.vacio-caja{opacity:.62;font-size:.88rem;padding:10px 2px;margin:0}
.nota-caja{font-size:.82rem;opacity:.66;margin:-4px 0 10px}
.fila-botones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.boton-peligro{border-color:rgba(255,120,120,.5)!important;color:#ffb3b3!important}
.boton-pequeno{padding:5px 11px!important;font-size:.8rem!important}
.aviso-banco{margin-top:11px;padding:9px 13px;border-radius:10px;font-size:.86rem;
  background:rgba(120,220,160,.13);border:1px solid rgba(120,220,160,.35)}
.aviso-banco.malo{background:rgba(255,120,120,.13);border-color:rgba(255,120,120,.38)}
@media (max-width:760px){.fila-mov{grid-template-columns:1fr 1fr;gap:5px}.mov-conc{grid-column:1/-1}}

/* ═══ RETOQUES DEL BANCO (del repaso: campo estrecho, boton pegado, hueco muerto) ═══ */
#prestamo-form{grid-template-columns:minmax(170px,1.3fr) minmax(130px,1fr) minmax(120px,1fr) minmax(110px,1fr)}
#prestamo-form .campo input,#banco-form .campo input{min-width:0;width:100%}
.pre-pie{gap:12px}
.pre-pie .boton-pequeno{padding:7px 16px!important;font-size:.83rem!important}
#banco-movimientos,#banco-prestamos{flex:1 1 auto}
#sec-banco .panel-caja{overflow:visible}
@media (max-width:900px){#prestamo-form{grid-template-columns:1fr 1fr}}

/* ═══ TESORERIA DENTRO DEL ALMACEN ═══ */
.bloque-banco{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(251,191,36,.18)}
.cabecera-bloque{margin-bottom:14px}
.cabecera-bloque .caja-titulo{margin-bottom:6px}

/* ═══ BOTONES CON SU PROPIO FONDO (bug del 29-09: el navegador metia su gris rgb(240,240,240)
   a todo boton sin clase de color -> fondo blanco con letra clara, ilegible) ═══ */
.boton{background:rgba(255,255,255,.06);color:var(--tinta, #eaf1ff);border-color:var(--borde, rgba(251,191,36,.22))}
.boton:hover{background:rgba(255,255,255,.11)}
html[data-tema="claro"] .boton{background:rgba(12,24,44,.05);color:var(--tinta, #16233f)}
html[data-tema="claro"] .boton:hover{background:rgba(12,24,44,.1)}
/* los que ya tienen su color manda el suyo */
.boton-principal,.boton-secundario,.boton-fantasma,.boton-peligro{background-image:none}
.boton-principal{background:linear-gradient(180deg,#FDD766,#E0A21A)!important;color:#1a1204!important;border-color:#F6C85F!important}
.boton-peligro{background:rgba(255,120,120,.16)!important;color:#ffb3b3!important;border-color:rgba(255,120,120,.5)!important}
html[data-tema="claro"] .boton-peligro{background:rgba(200,30,30,.09)!important;color:#a01d1d!important;border-color:rgba(200,30,30,.42)!important}
/* botones, selects e inputs nunca con los colores del navegador */
button,select,input,textarea{font:inherit}
select,input[type=text],input[type=number],input[type=search]{background:var(--hundido,rgba(255,255,255,.05));color:var(--tinta,#eaf1ff)}
select option{background:#0d1626;color:#eaf1ff}
html[data-tema="claro"] select,html[data-tema="claro"] input[type=text],html[data-tema="claro"] input[type=number],html[data-tema="claro"] input[type=search]{background:#fff;color:#16233f}
html[data-tema="claro"] select option{background:#fff;color:#16233f}
.boton-mini{background:rgba(255,255,255,.05)}
html[data-tema="claro"] .boton-mini{background:rgba(12,24,44,.05);color:#16233f}

/* ═══ CLARO: LO OSCURO FIJO (bug del 29-09: el brindis y el HUD del mapa tenian fondo
   oscuro clavado con el texto del tema claro encima -> 1.06:1, no se leia nada) ═══ */
html[data-tema="claro"] .brindis{background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(243,246,251,.98))!important;
  color:#16233f!important;border-color:rgba(18,24,38,.2)!important;box-shadow:0 14px 34px rgba(18,24,38,.18)!important}
html[data-tema="claro"] .brindis b,html[data-tema="claro"] .brindis strong{color:#0f1c33!important}
html[data-tema="claro"] .brindis.malo{border-color:rgba(200,30,30,.42)!important;color:#7f1d1d!important}
html[data-tema="claro"] .mapa-hud{background:rgba(255,255,255,.94)!important;color:#334155!important;
  border-color:rgba(18,24,38,.18)!important}
html[data-tema="claro"] .mas-caja,html[data-tema="claro"] .desplegable{background:rgba(255,255,255,.98)!important;color:#16233f!important;
  border-color:rgba(18,24,38,.16)!important;box-shadow:0 18px 40px rgba(18,24,38,.16)!important}
html[data-tema="claro"] .barra-marca b,html[data-tema="claro"] .yo b{color:#0f1c33!important}

/* ═══ COLOR PROPIO EN LOS VACIOS Y ETIQUETAS (que no dependan de lo que haya detras) ═══ */
.vacio,.vacio-caja{color:var(--tinta-3,#8fa6bb)}
.campo label,.rejilla-form label,label{color:var(--tinta-2,#a9bedf)}
html[data-tema="claro"] .vacio,html[data-tema="claro"] .vacio-caja{color:#4b5b70}
html[data-tema="claro"] .campo label,html[data-tema="claro"] label{color:#334155}
/* y que ningun boton del navegador vuelva a colarse */
button{-webkit-appearance:none;appearance:none}

/* ═══ ALMACÉN MODULAR: modo edición del líder y sublíder ═══ */
.kori-barra-edicion{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:11px}
.kori-barra-nota{font-size:.78rem;opacity:.62}
.kori-barra-edicion .boton.activo{background:linear-gradient(180deg,#FDD766,#E0A21A)!important;color:#1a1204!important}
.kori-x{position:absolute;top:-9px;right:-9px;width:27px;height:27px;border-radius:50%;
  border:2px solid #fff;background:#e5484d;color:#fff;font-size:16px;font-weight:700;line-height:1;
  cursor:pointer;display:grid;place-items:center;z-index:6;padding:0;
  box-shadow:0 4px 12px rgba(0,0,0,.35);transition:transform .12s}
.kori-x:hover{transform:scale(1.15);background:#c62a2f}
.panel-caja.con-x,.bloque-banco.con-x,.tarjeta.con-x{position:relative}
.kori-x-fila{width:22px;height:22px;border-radius:50%;border:0;background:#e5484d;color:#fff;font-size:13px;
  line-height:1;cursor:pointer;margin-left:8px;flex:0 0 auto;display:inline-grid;place-items:center;padding:0;
  box-shadow:0 2px 8px rgba(0,0,0,.3)}
.kori-x-fila:hover{background:#c62a2f;transform:scale(1.12)}
.td-x{width:34px;text-align:center;padding:0 6px}
body.almacen-editando #sec-almacen .panel-caja,body.almacen-editando #sec-almacen .bloque-banco{
  outline:1px dashed rgba(251,191,36,.55);outline-offset:4px}
.fila-mov,.fila-prestamo{position:relative}
.kori-aviso{position:sticky;top:10px;z-index:9;padding:10px 15px;border-radius:11px;font-size:.86rem;
  background:rgba(120,220,160,.16);border:1px solid rgba(120,220,160,.4);opacity:0;transition:opacity .25s;pointer-events:none}
.kori-aviso.visible{opacity:1}
html[data-tema="claro"] .kori-aviso{background:rgba(30,140,80,.12);border-color:rgba(30,140,80,.35);color:#14532d}