/* ==========================================================================
   DELUXEZONE — Normativa
   Reglas de rendimiento que sigue esta hoja (para no perder FPS):
   1. blur (backdrop-filter) SOLO en la barra de arriba. Es lo que más cuesta.
   2. Las animaciones tocan solo transform y opacity. Nada de animar
      box-shadow, filter, width ni top.
   3. Las secciones ocultas usan content-visibility: el navegador ni las dibuja.
   4. Las partículas son 12 divs con CSS. Sin canvas, sin JS, sin timers.
   ========================================================================== */

/* ---------- 1. VARIABLES ---------- */
:root{
  --bg:#050505;
  --bg-alto:#0A0A11;
  --panel:#101019;
  --panel-alto:#16161F;
  --linea:#20202E;
  --linea-viva:#2E2A45;

  --tx:#EDEBF5;
  --tx-medio:#B4B1C9;
  --tx-suave:#83809B;

  --vio:#7B2EFF;
  --vio-claro:#A77BFF;
  --vio-tenue:rgba(123,46,255,.12);

  --rojo:#FF3350;            /* ban y sanción */
  --rojo-tenue:rgba(255,51,80,.11);
  --naranja:#FF8A2B;         /* se borra / se quita */
  --celeste:#3BA9FF;         /* jail */
  --ambar:#FFB020;           /* aviso */
  --rosa:#FF5CC8;            /* mute */
  --verde:#2ED573;           /* permitido */

  --r-chico:8px;
  --r:14px;
  --r-grande:22px;

  --ancho:1120px;
  --barra:60px;

  --fuente-titulo:"Chakra Petch","Segoe UI Semibold",system-ui,sans-serif;
  --fuente-texto:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  color-scheme:dark;
}

/* Modo claro: mismo esqueleto, otros valores. */
html[data-tema="claro"]{
  --bg:#F4F3F8;
  --bg-alto:#FFFFFF;
  --panel:#FFFFFF;
  --panel-alto:#F0EEF7;
  --linea:#DFDCEA;
  --linea-viva:#CFC7E8;

  --tx:#12121A;
  --tx-medio:#43405A;
  --tx-suave:#6C6885;

  --vio:#6218DB;
  --vio-claro:#7B2EFF;
  --vio-tenue:rgba(98,24,219,.09);
  --rojo:#D91232;
  --rojo-tenue:rgba(217,18,50,.06);
  --naranja:#C25A00;
  --celeste:#0B63B8;
  --rosa:#B0138A;
  --verde:#12864A;

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--fuente-texto);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  touch-action:manipulation;
}

/* El resplandor de fondo es una imagen fija, no un filtro: no cuesta nada. */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 82% -8%, rgba(123,46,255,.16), transparent 60%),
    radial-gradient(46rem 34rem at 8% 104%, rgba(123,46,255,.10), transparent 62%);
}
html[data-tema="claro"] body::before{
  background:
    radial-gradient(60rem 40rem at 82% -8%, rgba(123,46,255,.10), transparent 60%),
    radial-gradient(46rem 34rem at 8% 104%, rgba(123,46,255,.07), transparent 62%);
}

img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:var(--vio-claro);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--vio-claro);outline-offset:3px;border-radius:4px}

/* ---------- 2. PARTICULAS ---------- */
/* 12 divs, animacion solo de transform y opacity, compuesta por GPU. */
.particulas{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.particulas i{
  position:absolute;
  top:-6vh;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--vio-claro);
  opacity:0;
  will-change:transform,opacity;
  animation:caer linear infinite;
}
@keyframes caer{
  0%   {transform:translate3d(0,0,0);opacity:0}
  10%  {opacity:.55}
  90%  {opacity:.35}
  100% {transform:translate3d(1.4rem,112vh,0);opacity:0}
}
.particulas i:nth-child(1) {left:6%;  animation-duration:17s; animation-delay:0s}
.particulas i:nth-child(2) {left:14%; animation-duration:22s; animation-delay:3s;  width:2px;height:2px}
.particulas i:nth-child(3) {left:23%; animation-duration:19s; animation-delay:7s}
.particulas i:nth-child(4) {left:31%; animation-duration:25s; animation-delay:1s;  width:2px;height:2px}
.particulas i:nth-child(5) {left:42%; animation-duration:16s; animation-delay:9s}
.particulas i:nth-child(6) {left:51%; animation-duration:23s; animation-delay:5s;  width:4px;height:4px}
.particulas i:nth-child(7) {left:60%; animation-duration:20s; animation-delay:12s}
.particulas i:nth-child(8) {left:68%; animation-duration:18s; animation-delay:2s;  width:2px;height:2px}
.particulas i:nth-child(9) {left:77%; animation-duration:26s; animation-delay:8s}
.particulas i:nth-child(10){left:85%; animation-duration:21s; animation-delay:14s; width:2px;height:2px}
.particulas i:nth-child(11){left:92%; animation-duration:19s; animation-delay:4s}
.particulas i:nth-child(12){left:97%; animation-duration:24s; animation-delay:11s; width:2px;height:2px}

/* En pantallas chicas quedan 6: menos capas para pintar. */
@media (max-width:640px){
  .particulas i:nth-child(n+7){display:none}
}

/* ---------- 3. ESTRUCTURA ---------- */
.envoltorio{position:relative;z-index:2}

.contenedor{
  width:100%;
  max-width:var(--ancho);
  margin:0 auto;
  padding:0 18px;
}

/* ---------- 4. BARRA DE ARRIBA ---------- */
.barra{
  position:sticky;
  top:0;
  z-index:40;
  height:var(--barra);
  display:flex;
  align-items:center;
  gap:14px;
  padding:0 18px;
  background:rgba(5,5,5,.72);
  backdrop-filter:blur(14px);            /* el UNICO blur del sitio */
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linea);
}
html[data-tema="claro"] .barra{background:rgba(244,243,248,.78)}

.marca{display:flex;align-items:center;gap:10px;margin-right:auto;min-width:0}
.marca .logo{
  height:36px;
  width:auto;
  flex:0 0 auto;
  object-fit:contain;
}
.marca .nombre{
  font-family:var(--fuente-titulo);
  font-weight:700;
  font-size:16px;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.marca .nombre span{color:var(--vio-claro)}

/* navegacion de escritorio */
/* Va centrada en la barra y con forma de control, para que se note que
   son los botones que cambian de sección. */
.nav-escritorio{
  display:none;
  gap:3px;
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:14px;
  padding:4px;
}
.nav-escritorio button{
  padding:9px 20px;
  border-radius:10px;
  font-size:14.5px;
  font-weight:650;
  color:var(--tx-medio);
  white-space:nowrap;
  transition:color .16s ease,background-color .16s ease;
}
.nav-escritorio button:hover{color:var(--tx);background:var(--panel-alto)}
.nav-escritorio button[aria-selected="true"]{color:#fff;background:var(--vio)}
html[data-tema="claro"] .nav-escritorio button[aria-selected="true"]{color:#fff}

.acciones{display:flex;align-items:center;gap:8px;flex:0 0 auto}

/* Enlace que sale del sitio: lleva la flechita para que se note. */
.enlace-fuera{
  display:none;
  align-items:center;
  gap:6px;
  height:38px;
  padding:0 14px;
  border:1px solid var(--linea);
  border-radius:11px;
  background:var(--panel);
  color:var(--tx-medio);
  font-size:14px;
  font-weight:650;
  white-space:nowrap;
  transition:color .16s ease,border-color .16s ease;
}
.enlace-fuera:hover{color:var(--tx);border-color:var(--linea-viva);text-decoration:none}
.enlace-fuera .flecha{font-size:12px;opacity:.7}
.icono-btn{
  width:38px;height:38px;
  /* En fila, no en columna: si no, el atajo "/" cae debajo de la lupa. */
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--linea);
  border-radius:11px;
  background:var(--panel);
  color:var(--tx-medio);
  font-size:15px;
  transition:border-color .16s ease,color .16s ease;
}
.icono-btn:hover{border-color:var(--linea-viva);color:var(--tx)}
.icono-btn .atajo{
  display:none;
  font-size:11px;
  color:var(--tx-suave);
  border:1px solid var(--linea);
  border-radius:5px;
  padding:1px 5px;
  margin-left:7px;
}

/* ---------- 6. SECCIONES ---------- */
/* Sin JS se ven todas, una abajo de la otra. Con JS, de a una. */
.seccion{padding:0 0 40px}
body.js-ok .seccion{display:none}
body.js-ok .seccion.activa{display:block;animation:aparecer .2s ease-out}
body.js-ok .seccion:not(.activa){content-visibility:hidden}
@keyframes aparecer{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}}

/* Con la portada afuera, este encabezado es lo primero que se ve:
   por eso el título y la bajada van en grande. */
.encabezado-seccion{margin:26px 0 26px}
.encabezado-seccion .eyebrow{
  font-family:var(--fuente-titulo);
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--vio-claro);font-weight:600;
}
.encabezado-seccion h2{
  font-family:var(--fuente-titulo);
  font-size:clamp(2rem,7.5vw,3.2rem);
  line-height:1.04;
  letter-spacing:-.02em;
  text-transform:uppercase;
  margin:10px 0 14px;
}
.encabezado-seccion p{color:var(--tx-medio);margin:0;font-size:16.5px;line-height:1.6}

/* ---------- 7. PIEZAS ---------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;
  border:1px solid var(--linea);
  border-radius:999px;
  background:var(--panel);
  font-size:12.5px;
  font-weight:600;
  color:var(--tx-medio);
  white-space:nowrap;
}
.chip.vio{color:var(--vio-claro);border-color:var(--linea-viva);background:var(--vio-tenue)}

/* ETIQUETAS — solo se etiqueta la sanción concreta: ban, mute o jail.
   Todo lo demás no lleva etiqueta, ya lo dice el texto de la regla.
   El ban va relleno porque es el más grave. */
.chip.ban{
  color:#0B0B10;
  background:var(--rojo);
  border-color:var(--rojo);
}
html[data-tema="claro"] .chip.ban{color:#fff}
.chip.sancion{color:var(--rojo);  border-color:var(--rojo);  background:color-mix(in srgb,var(--rojo) 14%,transparent)}
.chip.mute{   color:var(--rosa);  border-color:var(--rosa);  background:color-mix(in srgb,var(--rosa) 14%,transparent)}
.chip.aviso{  color:var(--ambar); border-color:var(--ambar); background:color-mix(in srgb,var(--ambar) 14%,transparent)}
.chip.jail{   color:var(--celeste);border-color:var(--celeste);background:color-mix(in srgb,var(--celeste) 14%,transparent)}
/* Valor de recuperación: bordecito neutro, para que no se confunda con
   los colores que significan sanción. */
.chip.valor{
  color:var(--verde);
  border-color:var(--verde);
  background:color-mix(in srgb,var(--verde) 12%,transparent);
  font-weight:650;
  letter-spacing:0;
}
.chip.traspaso{
  color:var(--ambar);
  border-color:var(--ambar);
  background:color-mix(in srgb,var(--ambar) 12%,transparent);
  font-weight:650;
  letter-spacing:0;
}
.chip.permitido{color:var(--verde);border-color:var(--verde);background:color-mix(in srgb,var(--verde) 14%,transparent)}

.tarjeta{
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:var(--r-grande);
  padding:20px;
}

/* Los avisos son la pieza mas usada del sitio: barra de color a la izquierda. */
/* CÓMO SE PINTAN LOS AVISOS — vale también para los que se agreguen después:
   el color va SOLO en el borde de toda la caja y en el título de arriba.
   Adentro no se cambia nada: el fondo y el texto quedan como en el resto
   de la página. Nunca una rayita de color en un solo costado. */
.aviso{
  position:relative;
  border:1px solid var(--vio);
  border-radius:var(--r);
  background:var(--panel);
  padding:14px 16px;
  margin:16px 0;
}
.aviso .titulo-aviso{
  font-family:var(--fuente-titulo);
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--vio-claro);font-weight:600;
  margin-bottom:4px;
}
.aviso p{margin:0;color:var(--tx-medio);font-size:14.5px}
.aviso p strong{color:var(--tx)}

.aviso.peligro{border-color:var(--rojo)}
.aviso.peligro .titulo-aviso{color:var(--rojo)}

.aviso.ok{border-color:var(--verde)}
.aviso.ok .titulo-aviso{color:var(--verde)}

.aviso.dato{border-color:var(--ambar)}
.aviso.dato .titulo-aviso{color:var(--ambar)}

/* ---------- 8. REGLAS ---------- */
.sub-nav{
  display:flex;
  gap:7px;
  overflow-x:auto;
  padding-bottom:10px;
  margin-bottom:20px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.sub-nav::-webkit-scrollbar{display:none}
.sub-nav button{
  flex:0 0 auto;
  padding:8px 15px;
  border:1px solid var(--linea);
  border-radius:999px;
  background:var(--panel);
  font-size:13.5px;
  font-weight:600;
  color:var(--tx-suave);
  transition:color .16s ease,border-color .16s ease,background-color .16s ease;
}
.sub-nav button[aria-selected="true"]{
  color:#fff;
  background:var(--vio);
  border-color:var(--vio);
}
html[data-tema="claro"] .sub-nav button[aria-selected="true"]{color:#fff}

.grupo-reglas{display:none}
.grupo-reglas.activa{display:block}
body:not(.js-ok) .grupo-reglas{display:block;margin-bottom:26px}

/* Una regla: codigo a la izquierda, texto a la derecha. El codigo sirve
   para que el staff diga "te sancionaron por la COM-04". */
.regla{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:14px;
  padding:15px 0;
  border-bottom:1px solid var(--linea);
}
.regla:last-child{border-bottom:0}
.regla.oculto{display:none}
.sub-nav.oculto{display:none}
/* Mientras se busca se ven todos los grupos que tengan resultados. */
.grupo-reglas.buscando{display:block}
.regla .codigo{
  font-family:var(--fuente-titulo);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--vio-claro);
  padding-top:2px;
}
.regla .codigo .fecha{
  display:block;
  margin-top:4px;
  font-family:var(--fuente-texto);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:0;
  line-height:1.35;
  color:var(--tx-suave);
  font-variant-numeric:tabular-nums;
}
/* Título de la regla con su sanción al lado. En pantalla chica la sanción
   baja debajo del título en vez de apretarlo. */
.regla .cabecera-regla{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin:0 0 5px;
  flex-wrap:wrap;
}
.regla h4{
  margin:0;
  font-size:15.5px;
  font-weight:650;
  letter-spacing:-.01em;
}
.regla .sanciones{display:flex;flex-wrap:wrap;gap:5px;flex:0 0 auto}
.regla .sanciones .chip{font-size:11.5px;padding:3px 9px}
.regla p{margin:0;color:var(--tx-medio);font-size:14.5px}
.regla .ejemplos{
  list-style:none;
  margin:9px 0 0;
  padding:0;
}
.regla .ejemplos li{
  position:relative;
  padding-left:16px;
  color:var(--tx-suave);
  font-size:13.5px;
  line-height:1.5;
}
.regla .ejemplos li::before{
  content:"";
  position:absolute;
  left:2px;top:.62em;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--vio);
}
.regla p a{color:var(--vio-claro);font-weight:600}
.regla .etiquetas{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}

/* ---------- 9. ITEMS ILEGALES ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}

.buscador-items{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--linea);
  border-radius:var(--r);
  background:var(--panel);
  padding:0 14px;
  margin-bottom:14px;
}
.buscador-items input{
  flex:1;
  border:0;background:none;
  color:var(--tx);
  font:inherit;
  padding:13px 0;
  outline:none;
}
.buscador-items input::placeholder{color:var(--tx-suave)}

/* Panel con la regla única, arriba de la lista. */
.panel-regla{margin-bottom:16px}
.prohibiciones-grandes{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin:12px 0 0;
}
/* Los avisos van todos juntos al final de la sección. */
.seccion > .aviso:first-of-type{margin-top:26px}
.prohibiciones-grandes .chip{
  justify-content:center;
  font-size:13.5px;
  padding:9px 10px;
}

/* Una tarjeta por categoría, igual que el menú del juego. */
.rejilla-cats{display:grid;grid-template-columns:1fr;gap:12px}

.cat{
  background:var(--panel);
  border:1px solid var(--linea);
  border-radius:var(--r);
  padding:16px;
}
.cat.oculto{display:none}

.cabecera-cat{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.cabecera-cat h4{
  font-family:var(--fuente-titulo);
  margin:0 0 4px;
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase;
}

.casillero{
  width:52px;height:52px;flex:0 0 auto;
  border-radius:var(--r-chico);
  background:var(--panel-alto);
  border:1px solid var(--linea-viva);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.04);
  display:grid;place-items:center;
  font-size:24px;
  line-height:1;
}

/* El número es el mismo que en el menú del juego, así que no se recalcula
   cuando se filtra: va escrito en el HTML. */
.lista-items{list-style:none;margin:0;padding:0}
/* Cada fila es una grilla de columnas fijas, así los precios quedan
   alineados entre sí y no escalonados según el largo del nombre. */
.lista-items li{
  display:grid;
  grid-template-columns:22px minmax(0,1fr) 7.4rem 6.4rem;
  align-items:center;
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid var(--linea);
  font-size:14.5px;
  color:var(--tx);
}
.lista-items li .nombre{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-items .hueco{display:block}
#listaClientes .lista-items li{grid-template-columns:22px minmax(0,1fr) auto}
.lista-items li:last-child{border-bottom:0}
.lista-items li.oculto{display:none}
.lista-items .n{
  flex:0 0 auto;
  width:22px;
  font-family:var(--fuente-titulo);
  font-size:11.5px;
  font-weight:700;
  color:var(--tx-suave);
  font-variant-numeric:tabular-nums;
}
.lista-items li.resaltado{color:var(--vio-claro)}
.lista-items li .chip{
  justify-self:start;
  font-size:10.5px;
  padding:2px 8px;
  white-space:nowrap;
}
@media (max-width:560px){
  .lista-items li{
    grid-template-columns:22px minmax(0,1fr);
    row-gap:5px;
  }
  .lista-items li .chip{grid-column:2;justify-self:start}
  .lista-items .hueco{display:none}
}

/* Nota corta abajo del título de una categoría. */
.cabecera-cat .nota-cat{
  margin:4px 0 0;
  font-size:13px;
  color:var(--tx-suave);
}

.sin-resultados{
  display:none;
  text-align:center;
  padding:40px 20px;
  color:var(--tx-suave);
  border:1px dashed var(--linea);
  border-radius:var(--r);
}
.sin-resultados.visible{display:block}

/* ---------- 10. TABLAS ---------- */
.envoltorio-tabla{
  overflow-x:auto;
  border:1px solid var(--linea);
  border-radius:var(--r);
  -webkit-overflow-scrolling:touch;
}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--linea)}
th{
  font-family:var(--fuente-titulo);
  font-size:11.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tx-suave);
  background:var(--panel-alto);
  font-weight:600;
  white-space:nowrap;
}
tr:last-child td{border-bottom:0}
td{color:var(--tx-medio)}
td strong{color:var(--tx);font-weight:650}

/* ---------- 11. DESPLEGABLES ---------- */
details{
  border:1px solid var(--linea);
  border-radius:var(--r);
  background:var(--panel);
  margin:12px 0;
  overflow:hidden;
}
summary{
  padding:14px 16px;
  font-weight:650;
  font-size:15px;
  cursor:pointer;
  list-style:none;
  display:flex;align-items:center;gap:10px;
}
summary::-webkit-details-marker{display:none}
summary::before{
  content:"+";
  font-family:var(--fuente-titulo);
  color:var(--vio-claro);
  font-size:17px;
  width:14px;
}
details[open] summary::before{content:"–"}
details .cuerpo-detalle{padding:0 16px 16px;color:var(--tx-medio);font-size:14.5px}

/* ---------- 12. BUSCADOR GENERAL ---------- */
.capa-buscador{
  position:fixed;
  inset:0;
  z-index:60;
  display:none;
  padding:14vh 18px 18px;
  background:rgba(2,2,4,.72);
}
.capa-buscador.abierta{display:block}
.caja-buscador{
  max-width:620px;
  margin:0 auto;
  background:var(--bg-alto);
  border:1px solid var(--linea-viva);
  border-radius:var(--r-grande);
  overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.caja-buscador input{
  width:100%;
  border:0;
  border-bottom:1px solid var(--linea);
  background:none;
  color:var(--tx);
  font:inherit;
  font-size:16px;
  padding:16px 18px;
  outline:none;
}
.resultados{max-height:52vh;overflow-y:auto;padding:6px}
.resultados button{
  display:block;width:100%;text-align:left;
  padding:11px 13px;
  border-radius:10px;
  transition:background-color .12s ease;
}
.resultados button:hover,.resultados button.marcado{background:var(--panel-alto)}
.resultados .r-donde{
  font-family:var(--fuente-titulo);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--vio-claro);
}
.resultados .r-titulo{font-size:14.5px;font-weight:600;margin-top:2px}
.resultados .r-texto{font-size:13px;color:var(--tx-suave);margin-top:2px}
.resultados .vacio{padding:24px;text-align:center;color:var(--tx-suave);font-size:14px}

/* ---------- 13. PIE ---------- */
.pie{
  border-top:1px solid var(--linea);
  padding:26px 0 calc(var(--barra) + 30px);
  color:var(--tx-suave);
  font-size:13.5px;
}
.pie strong{color:var(--tx-medio)}

/* ---------- 14. BARRA DE ABAJO (MOVIL) ---------- */
.nav-movil{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:50;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:rgba(5,5,5,.94);
  border-top:1px solid var(--linea);
  padding-bottom:env(safe-area-inset-bottom);
}
html[data-tema="claro"] .nav-movil{background:rgba(244,243,248,.96)}
.nav-movil button,
.nav-movil a{
  padding:9px 4px 8px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:10.5px;
  font-weight:600;
  color:var(--tx-suave);
  letter-spacing:.02em;
}
.nav-movil button .ic,
.nav-movil a .ic{font-size:18px;line-height:1}
.nav-movil button[aria-selected="true"]{color:var(--vio-claro)}
.nav-movil a{text-decoration:none}
.nav-movil a:hover{text-decoration:none}

/* ---------- 15. ESCRITORIO ---------- */
@media (min-width:860px){
  .nav-escritorio{display:flex}
  .enlace-fuera{display:inline-flex}
  /* Tres columnas iguales a los costados: así la navegación queda justo al medio
     sin importar cuánto ocupen el logo y los botones de la derecha. */
  .barra{display:grid; grid-template-columns:1fr auto 1fr; align-items:center}
  .marca{margin-right:0}
  .nav-escritorio{justify-self:center}
  .acciones{justify-self:end}
  .nav-movil{display:none}
  .pie{padding-bottom:34px}
  .icono-btn .atajo{display:inline}
  .icono-btn.con-atajo{width:auto;padding:0 12px}
  .rejilla-cats{grid-template-columns:1fr 1fr}
  .prohibiciones-grandes{grid-template-columns:repeat(3,1fr)}
  #listaClientes .lista-items.doble{columns:2;column-gap:26px}
  #listaClientes .lista-items.doble li{break-inside:avoid}
  .regla{grid-template-columns:78px 1fr}
  .contenedor{padding:0 26px}
}

/* ---------- 16. RESPETAR PREFERENCIAS ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  html{scroll-behavior:auto}
  .particulas{display:none}
}

/* ---------- 17. IMPRESION ---------- */
@media print{
  .barra,.nav-movil,.particulas,.capa-buscador,.sub-nav,.filtros,.buscador-items{display:none !important}
  body{background:#fff;color:#000}
  .seccion,.grupo-reglas{display:block !important}
  .tarjeta,.item,.aviso{break-inside:avoid}
}