/* Panel de administración y escáner de puerta.
 * Misma familia gótica monocroma del sitio, en versión sobria y operativa.
 * Colores: SOLO var(--...) de tokens.css (negro, noche, piedra, hierro,
 * ceniza, plata, hueso, cera, ok, error, aviso); tintes con color-mix. */

* { box-sizing: border-box; }
html { background: var(--negro); -webkit-text-size-adjust: 100%; }
body.panel {
  margin: 0; min-height: 100vh; background: var(--negro); color: var(--hueso);
  font: 400 1.0625rem/1.5 var(--serif-texto);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--hueso); text-underline-offset: .2em; }
:focus-visible { outline: 2px solid var(--cera); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif-romana); font-weight: 600; letter-spacing: .08em; margin: 0; }
h1 { font-size: clamp(1.25rem, 1rem + 1.4vw, 1.7rem); text-transform: uppercase; }
h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .14em; color: var(--plata); margin-bottom: .8rem; }
code, .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .92em; letter-spacing: .02em; }
.tenue { color: var(--ceniza); }
.capital { text-transform: capitalize; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vacio { color: var(--ceniza); text-align: center; padding: 1.2rem; font-style: italic; }
.visualmente-oculto, .fuera-de-pantalla {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rotulo { font: 500 .72rem/1.3 var(--serif-romana); letter-spacing: .3em; text-transform: uppercase; color: var(--ceniza); }
.intro { margin: -.4rem 0 1.2rem; max-width: 46rem; }
.migas { margin: 0 0 .4rem; font-size: .95rem; }
.migas a { color: var(--ceniza); text-decoration: none; }
.migas a:hover { color: var(--hueso); }

/* ---------- Barra superior y navegación ---------- */
.barra {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; padding-top: max(.7rem, env(safe-area-inset-top));
  background: var(--noche); border-bottom: 1px solid var(--hierro);
}
.barra__marca {
  font: 600 .9rem/1.1 var(--serif-romana); letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; color: var(--hueso);
}
.barra__marca small { display: block; font-size: .62rem; letter-spacing: .3em; color: var(--ceniza); margin-top: .15rem; }
.barra__usuario { position: relative; }
.barra__usuario summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
  padding: .35rem .6rem; border: 1px solid var(--hierro); border-radius: .3rem; font-size: .95rem;
}
.barra__usuario summary::-webkit-details-marker { display: none; }
.barra__menu {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20; min-width: 12rem;
  background: var(--piedra); border: 1px solid var(--hierro); border-radius: .4rem; padding: .4rem;
  display: grid; gap: .2rem;
}
.barra__menu a, .barra__menu button {
  display: block; width: 100%; text-align: left; padding: .55rem .7rem; border: 0; border-radius: .25rem;
  background: none; color: var(--hueso); font: inherit; text-decoration: none; cursor: pointer;
}
.barra__menu a:hover, .barra__menu button:hover { background: var(--hierro); }

.rol {
  font: 600 .6rem/1 var(--serif-romana); letter-spacing: .18em; text-transform: uppercase;
  padding: .25rem .4rem; border: 1px solid var(--hierro); border-radius: .2rem; color: var(--plata);
}
.rol--puerta { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 45%, var(--negro)); }

.nav {
  display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none;
  padding: .45rem .6rem; background: var(--noche); border-bottom: 1px solid var(--hierro);
  position: sticky; top: 0; z-index: 10;
}
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: 0 0 auto; padding: .5rem .75rem; border-radius: .3rem; text-decoration: none; white-space: nowrap;
  font: 500 .74rem/1 var(--serif-romana); letter-spacing: .12em; text-transform: uppercase; color: var(--ceniza);
}
.nav a:hover { color: var(--hueso); background: var(--piedra); }
.nav a[aria-current="page"] { color: var(--negro); background: var(--hueso); }

/* ---------- Contenido ---------- */
.contenido {
  width: min(100% - 2rem, 72rem); margin: 1.2rem auto 3rem;
  padding-bottom: env(safe-area-inset-bottom);
}
.cabeza {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
  margin-bottom: 1.1rem;
}
.cabeza--tarjeta { margin-bottom: .6rem; }
.cabeza--tarjeta h2 { margin: 0; }
.cabeza__sellos { display: flex; gap: .4rem; flex-wrap: wrap; }

.tarjeta {
  background: var(--noche); border: 1px solid var(--hierro); border-radius: .5rem;
  padding: 1rem; margin-bottom: 1rem;
}
.tarjeta--estrecha { max-width: 34rem; }
.tarjeta--media { max-width: 46rem; }   /* formularios largos: en desktop no se estiran a 72rem */
.tarjeta--centro { text-align: center; max-width: 30rem; margin-inline: auto; }
.tarjeta--peligro { border-color: color-mix(in srgb, var(--error) 40%, var(--negro)); }
.numero-grande { font: 600 3.5rem/1 var(--serif-romana); color: var(--ceniza); margin: .5rem 0; }
.rejilla-2 { display: grid; gap: 0 1rem; }
.rejilla-2 > *, .tarjeta { min-width: 0; }

/* ---------- Avisos (flash) ---------- */
.avisos { display: grid; gap: .5rem; margin-bottom: 1rem; }
.aviso {
  margin: 0 0 1rem; padding: .7rem .9rem; border-radius: .4rem; border: 1px solid var(--hierro);
  border-left-width: 4px; background: var(--piedra);
}
.avisos .aviso { margin: 0; }
.aviso--ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--negro)); }
.aviso--error { border-color: var(--error); background: color-mix(in srgb, var(--error) 10%, var(--negro)); }
.aviso--aviso { border-color: var(--aviso); background: color-mix(in srgb, var(--aviso) 9%, var(--negro)); }

.alerta-fraude {
  margin-bottom: 1rem; padding: .9rem 1rem; border-radius: .5rem;
  border: 2px solid var(--error); background: color-mix(in srgb, var(--error) 12%, var(--negro));
}
.alerta-fraude h2 { color: var(--error); margin-bottom: .4rem; }
.alerta-fraude ul { margin: 0; padding-left: 1.1rem; }
.alerta-fraude a { color: var(--error); font-weight: 500; }

/* ---------- Sellos y chips ---------- */
.sello {
  display: inline-block; padding: .28rem .55rem; border: 1px solid var(--ceniza); border-radius: .2rem;
  font: 600 .64rem/1 var(--serif-romana); letter-spacing: .14em; text-transform: uppercase; color: var(--plata);
  white-space: nowrap; vertical-align: middle;
}
.sello--validada { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, var(--negro)); background: color-mix(in srgb, var(--ok) 8%, var(--negro)); }
.sello--pendiente { color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 55%, var(--negro)); background: color-mix(in srgb, var(--aviso) 8%, var(--negro)); }
.sello--rechazada { color: var(--error); border-color: color-mix(in srgb, var(--error) 55%, var(--negro)); background: color-mix(in srgb, var(--error) 8%, var(--negro)); }
.chip {
  display: inline-block; padding: .15rem .45rem; border-radius: 1rem; background: var(--piedra);
  border: 1px solid var(--hierro); color: var(--plata); font-size: .78rem; vertical-align: middle; white-space: nowrap;
}
.chip--grande { font-size: .95rem; padding: .35rem .8rem; }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: .6rem 1.1rem; border: 1px solid var(--plata); border-radius: .35rem;
  background: var(--piedra); color: var(--hueso); cursor: pointer; text-decoration: none; text-align: center;
  font: 600 .74rem/1.1 var(--serif-romana); letter-spacing: .14em; text-transform: uppercase;
  transition: background .15s, color .15s, border-color .15s;
}
.boton:hover { background: var(--hierro); }
.boton:disabled { opacity: .45; cursor: not-allowed; }
.boton--primario { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }
.boton--primario:hover { background: var(--plata); border-color: var(--plata); }
.boton--linea { background: none; border-color: var(--hierro); }
.boton--linea:hover { border-color: var(--plata); background: var(--piedra); }
.boton--ok { background: var(--ok); border-color: var(--ok); color: var(--negro); }
.boton--ok:hover { background: color-mix(in srgb, var(--ok) 80%, var(--hueso)); }
.boton--peligro { background: none; border-color: var(--error); color: var(--error); }
.boton--peligro:hover { background: color-mix(in srgb, var(--error) 14%, var(--negro)); }
.boton--chico { min-height: 2.3rem; padding: .4rem .7rem; font-size: .66rem; }
.boton--ancho { width: 100%; }
.boton.copiado { border-color: var(--ok); color: var(--ok); }
.enlace { color: var(--ceniza); font-size: .95rem; }
.enlace:hover { color: var(--hueso); }
.en-linea { display: inline; margin: 0; }

/* ---------- Formularios ---------- */
.formulario { display: grid; gap: .9rem; }
.formulario fieldset { border: 0; margin: 0 0 .4rem; padding: 0; display: grid; gap: .9rem; }
.formulario legend {
  font: 600 .74rem/1 var(--serif-romana); letter-spacing: .2em; text-transform: uppercase; color: var(--ceniza);
  padding: 0 0 .7rem; margin-bottom: .2rem; border-bottom: 1px solid var(--hierro); width: 100%;
}
.campo { display: grid; gap: .3rem; }
.campo label, .campo .etiqueta { font-size: .95rem; color: var(--plata); }
.campo label small { color: var(--ceniza); }
/* Campos de texto: `:where()` deja fuera checkbox/radio sin subir la especificidad
   (así `.campo--error input` e `input[type="file"]` siguen ganando). Checkbox y radio
   tienen su propia regla abajo: NUNCA ancho completo ni aspecto de input de texto. */
input:where(:not([type="checkbox"], [type="radio"])), select, textarea {
  width: 100%; min-height: 2.75rem; padding: .55rem .7rem; border: 1px solid var(--hierro); border-radius: .35rem;
  background: var(--negro); color: var(--hueso); font: 400 1rem/1.3 var(--serif-texto);
}
textarea { min-height: 4.5rem; resize: vertical; }
input[type="file"] { padding: .45rem; font-size: .92rem; color: var(--plata); }
input[type="file"]::file-selector-button {
  margin-right: .7rem; padding: .35rem .7rem; border: 1px solid var(--hierro); border-radius: .3rem;
  background: var(--piedra); color: var(--hueso); font: inherit; cursor: pointer;
}
input:where(:not([type="checkbox"], [type="radio"])):focus, select:focus, textarea:focus { border-color: var(--plata); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--cera) 35%, transparent); }
input[type="checkbox"], input[type="radio"] {
  width: 1.15rem; height: 1.15rem; margin: 0; padding: 0; flex: none; vertical-align: middle;
  accent-color: var(--hueso); cursor: pointer;
}
select { cursor: pointer; }
.select-corto { width: auto; min-width: 9rem; max-width: 100%; }
.campo--error input, .campo--error select, .campo--error textarea { border-color: var(--error); }
.error-campo { color: var(--error); font-size: .92rem; }
.ayuda { color: var(--ceniza); font-size: .9rem; }
.ayuda--bloque { display: block; margin-top: .2rem; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .98rem; line-height: 1.35; color: var(--plata); cursor: pointer; }
.check input { margin-top: .12rem; }
.opciones { display: grid; gap: .45rem; }
.opciones--fila { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
.opcion {
  display: flex; gap: .6rem; align-items: center; padding: .65rem .8rem; border: 1px solid var(--hierro);
  border-radius: .35rem; cursor: pointer; background: var(--negro);
}
.opcion:has(input:checked) { border-color: var(--hueso); background: var(--piedra); }

.filtros {
  display: grid; gap: .7rem; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end;
  background: var(--noche); border: 1px solid var(--hierro); border-radius: .5rem; padding: .9rem; margin-bottom: 1rem;
}
.filtros .campo--busqueda { grid-column: 1 / -1; }
.filtros__acciones { grid-column: 1 / -1; display: flex; gap: 1rem; align-items: center; }
.filtros--una { grid-template-columns: 1fr auto; }
.filtros--una .campo--busqueda { grid-column: auto; }

/* ---------- Tablas (en el celular: filas como tarjetas) ---------- */
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .98rem; }
.tabla th {
  font: 600 .64rem/1.2 var(--serif-romana); letter-spacing: .14em; text-transform: uppercase; color: var(--ceniza);
  text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--hierro);
}
.tabla td { padding: .6rem; border-bottom: 1px solid var(--hierro); vertical-align: top; }
.tabla tbody tr:hover { background: color-mix(in srgb, var(--piedra) 70%, var(--negro)); }
.tabla tfoot th, .tabla tfoot td { border-top: 2px solid var(--plata); border-bottom: 0; font-weight: 500; color: var(--hueso); }
.tabla .codigo { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 600; white-space: nowrap; }
.tabla .sel { width: 2rem; }
.tabla--compras td[data-etiqueta="Entrada"], .tabla--compras td[data-etiqueta="Creada"] { white-space: nowrap; }
@media (max-width: 47.99rem) {
  .tabla th { padding: .5rem .35rem; letter-spacing: .08em; }
  .tabla td { padding: .5rem .35rem; }
}
.fila--pendiente td:first-child { box-shadow: inset 3px 0 0 var(--aviso); }
.fila--sin-socio td { color: var(--plata); font-style: italic; }
/* Celda de acciones: sigue siendo table-cell (un `display: flex` en el <td>
   la sacaba de la tabla y desalineaba bordes y columnas en desktop). */
.acciones-fila { text-align: right; white-space: nowrap; }
.acciones-fila > * + * { margin-left: .4rem; }

@media (max-width: 47.99rem) {
  .tabla--compras thead { display: none; }
  .tabla--compras, .tabla--compras tbody, .tabla--compras tr, .tabla--compras td { display: block; }
  .tabla--compras tr {
    position: relative; border: 1px solid var(--hierro); border-radius: .45rem; margin-bottom: .6rem;
    padding: .5rem .7rem; background: var(--noche);
  }
  .tabla--compras td { border: 0; padding: .2rem 0; }
  .tabla--compras td[data-etiqueta]::before {
    content: attr(data-etiqueta); display: inline-block; min-width: 6rem; color: var(--ceniza);
    font: 600 .6rem/1.6 var(--serif-romana); letter-spacing: .14em; text-transform: uppercase;
  }
  .tabla--compras td.num { text-align: left; }
  .tabla--compras td.sel { position: absolute; right: .7rem; top: .7rem; width: auto; padding: 0; }
  .tabla--compras td[data-etiqueta="Código"]::before { display: none; }
  .tabla--compras td[data-etiqueta="Código"] { font-size: 1.05rem; }
  .fila--pendiente td:first-child { box-shadow: none; }
  .tabla--compras tr.fila--pendiente { border-left: 3px solid var(--aviso); }
  /* Tipos y socios: cada fila es una ficha (en tabla, las acciones Editar/Borrar
     quedaban fuera de pantalla, detrás de un scroll horizontal). */
  .tabla--fichas thead { display: none; }
  .tabla--fichas, .tabla--fichas tbody, .tabla--fichas tr, .tabla--fichas td { display: block; }
  .tabla--fichas tr {
    border: 1px solid var(--hierro); border-radius: .45rem; margin-bottom: .6rem;
    padding: .55rem .75rem; background: var(--noche);
  }
  .tabla--fichas td { border: 0; padding: .15rem 0; }
  .tabla--fichas td.num { text-align: left; }
  .tabla--fichas td[data-etiqueta]::before {
    content: attr(data-etiqueta); display: inline-block; min-width: 6.5rem; color: var(--ceniza);
    font: 600 .6rem/1.6 var(--serif-romana); letter-spacing: .14em; text-transform: uppercase;
  }
  .tabla--fichas td[data-etiqueta="Nombre"]::before { display: none; }
  .tabla--fichas td[data-etiqueta="Nombre"] { font-size: 1.05rem; }
  .tabla--fichas .acciones-fila { text-align: left; white-space: normal; padding-top: .45rem; }
  .tabla--fichas .acciones-fila:empty { display: none; }
  /* Reporte por socio: cada socio es una fila-tarjeta con el nombre arriba y
     las 5 cifras en una grilla (en tabla, la columna % quedaba fuera de pantalla). */
  .tabla--reporte thead { display: none; }
  .tabla--reporte, .tabla--reporte tbody, .tabla--reporte tfoot { display: block; }
  .tabla--reporte tr {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .15rem .5rem;
    padding: .65rem 0; border-bottom: 1px solid var(--hierro);
  }
  .tabla--reporte td, .tabla--reporte tfoot th { display: block; border: 0; padding: 0; text-align: left; }
  .tabla--reporte td[data-etiqueta="Socio"], .tabla--reporte tfoot th { grid-column: 1 / -1; padding-bottom: .25rem; }
  .tabla--reporte td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tabla--reporte td.num::before {
    content: attr(data-etiqueta); display: block; color: var(--ceniza);
    font: 600 .56rem/1.6 var(--serif-romana); letter-spacing: .1em; text-transform: uppercase;
  }
  .tabla--reporte tfoot tr { border-top: 2px solid var(--plata); border-bottom: 0; }
}

/* ---------- Dashboard ---------- */
.cifras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.cifra {
  display: grid; gap: .25rem; padding: .9rem; border: 1px solid var(--hierro); border-radius: .5rem;
  background: var(--noche); text-decoration: none; color: var(--hueso);
}
a.cifra:hover { border-color: var(--plata); }
.cifra__valor { font: 600 clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem)/1 var(--serif-romana); font-variant-numeric: tabular-nums; }
.cifra__rotulo { color: var(--ceniza); font-size: .92rem; line-height: 1.25; }
.cifra--aviso { border-top: 3px solid var(--aviso); }
.cifra--aviso .cifra__valor { color: var(--aviso); }
.cifra--ok { border-top: 3px solid var(--ok); }
.cifra--ok .cifra__valor { color: var(--ok); }
.cifra--error { border-top: 3px solid var(--error); }
.cifras--compactas .cifra { padding: .7rem .8rem; }
.cifras--compactas .cifra__valor { font-size: 1.4rem; }
.cifra__valor small { font-size: .6em; color: var(--ceniza); }
.cupo-linea { margin: -.4rem 0 1rem; font-size: .95rem; }
.cupo-linea strong { font-family: var(--serif-romana); color: var(--hueso); }
.progreso { -webkit-appearance: none; appearance: none; width: 100%; height: .7rem; border: 0; border-radius: 1rem; background: var(--piedra); overflow: hidden; }
.progreso::-webkit-progress-bar { background: var(--piedra); border-radius: 1rem; }
.progreso::-webkit-progress-value { background: var(--plata); border-radius: 1rem; }
.progreso::-moz-progress-bar { background: var(--plata); border-radius: 1rem; }

/* Termómetro del cupo (A) */
.termometro__heroe { display: grid; gap: 1.4rem; }
.termometro__cifra { margin: 0; font: 500 clamp(3rem, 2.2rem + 4vw, 4.6rem)/1 var(--serif-romana); font-variant-numeric: tabular-nums; }
.termometro__cifra small { font-size: .36em; color: var(--ceniza); letter-spacing: .06em; text-transform: uppercase; }
.termometro__leyenda { margin: .5rem 0 0; color: var(--plata); }
.veredicto { border-left: 2px solid var(--cera); padding: .15rem 0 .15rem 1rem; }
.veredicto p { margin: 0; }
.veredicto .rotulo { margin-bottom: .4rem; }
.veredicto__frase { font: 600 1.02rem/1.4 var(--serif-romana); letter-spacing: .06em; }
.veredicto--tarde { border-left-color: var(--aviso); }
.veredicto--tarde .veredicto__frase { color: var(--aviso); }
.veredicto--sin_ventas { border-left-color: var(--hierro); }
.veredicto .veredicto__detalle { margin-top: .4rem; color: var(--plata); }
.fichas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 1.4rem;
  background: var(--hierro); border: 1px solid var(--hierro); border-radius: .4rem; overflow: hidden;
}
.ficha { display: grid; align-content: start; gap: .2rem; background: var(--noche); padding: .8rem .9rem; min-width: 0; }
.ficha__rotulo { font: 500 .64rem/1.3 var(--serif-romana); letter-spacing: .2em; text-transform: uppercase; color: var(--ceniza); }
.ficha strong { font: 500 1.6rem/1.15 var(--serif-romana); font-variant-numeric: tabular-nums; }
.ficha small { color: var(--ceniza); font-size: .88rem; line-height: 1.3; }
.leyenda { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .7rem; font-size: .92rem; color: var(--plata); }
.leyenda i { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; margin-right: .4rem; vertical-align: -.05rem; }
.leyenda__v { background: var(--validada); }
.leyenda__p { background: var(--pendiente); }
.leyenda .leyenda__marca { width: 2px; height: .95rem; border-radius: 0; background: var(--hueso); vertical-align: -.15rem; }

/* Barra apilada: segmentos con flex-grow (clases g-N, 0..100) y 2px de separación. */
.apilada { position: relative; }
.apilada__pista { display: flex; gap: 2px; height: .9rem; }
.apilada--grande { margin-top: 1.1rem; }
.apilada--grande .apilada__pista { height: 1.4rem; }
.apilada__seg, .apilada__resto { flex-basis: 0; min-width: 0; border-radius: 4px; }
.apilada__seg--v { background: var(--validada); }
.apilada__seg--p { background: var(--pendiente); }
.apilada--grande .apilada__resto { background: var(--piedra); }
.apilada__capa { position: absolute; inset: -.4rem 0; display: flex; pointer-events: none; }
.apilada__capa > span { flex-basis: 0; }
.apilada__capa .apilada__marca { flex: 0 0 2px; margin-left: -1px; margin-right: -1px; background: var(--hueso); }

/* Tablero por socio (C) */
.tablero { display: grid; gap: 1.6rem; }
.socios-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.socio-fila { display: grid; grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 2rem; gap: .6rem; align-items: center; }
.socio-fila__nombre { color: var(--plata); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .98rem; }
.socio-fila__total { text-align: right; font-family: var(--serif-romana); font-variant-numeric: tabular-nums; }
.socio-fila--resto .socio-fila__nombre, .socio-fila--resto .socio-fila__total { color: var(--ceniza); }
.socio-fila--resto .apilada { opacity: .6; }
.meta { display: grid; gap: 1rem; align-content: start; }
.meta .rotulo, .meta .fichas { margin: 0; }
.nota-pie { color: var(--ceniza); font-size: .9rem; margin: 0; }

/* Tarjeta plegable (ventas por día) */
.desplegable summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: .5rem; }
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::before { content: "▸"; color: var(--ceniza); }
.desplegable[open] summary::before { content: "▾"; }
.desplegable summary h2 { margin: 0; }
.desplegable[open] summary { margin-bottom: .8rem; }

/* flex-grow 0..100 (anchos de barras sin atributos style: CSP). */
.g-0 { flex-grow: 0; }
.g-1 { flex-grow: 1; }
.g-2 { flex-grow: 2; }
.g-3 { flex-grow: 3; }
.g-4 { flex-grow: 4; }
.g-5 { flex-grow: 5; }
.g-6 { flex-grow: 6; }
.g-7 { flex-grow: 7; }
.g-8 { flex-grow: 8; }
.g-9 { flex-grow: 9; }
.g-10 { flex-grow: 10; }
.g-11 { flex-grow: 11; }
.g-12 { flex-grow: 12; }
.g-13 { flex-grow: 13; }
.g-14 { flex-grow: 14; }
.g-15 { flex-grow: 15; }
.g-16 { flex-grow: 16; }
.g-17 { flex-grow: 17; }
.g-18 { flex-grow: 18; }
.g-19 { flex-grow: 19; }
.g-20 { flex-grow: 20; }
.g-21 { flex-grow: 21; }
.g-22 { flex-grow: 22; }
.g-23 { flex-grow: 23; }
.g-24 { flex-grow: 24; }
.g-25 { flex-grow: 25; }
.g-26 { flex-grow: 26; }
.g-27 { flex-grow: 27; }
.g-28 { flex-grow: 28; }
.g-29 { flex-grow: 29; }
.g-30 { flex-grow: 30; }
.g-31 { flex-grow: 31; }
.g-32 { flex-grow: 32; }
.g-33 { flex-grow: 33; }
.g-34 { flex-grow: 34; }
.g-35 { flex-grow: 35; }
.g-36 { flex-grow: 36; }
.g-37 { flex-grow: 37; }
.g-38 { flex-grow: 38; }
.g-39 { flex-grow: 39; }
.g-40 { flex-grow: 40; }
.g-41 { flex-grow: 41; }
.g-42 { flex-grow: 42; }
.g-43 { flex-grow: 43; }
.g-44 { flex-grow: 44; }
.g-45 { flex-grow: 45; }
.g-46 { flex-grow: 46; }
.g-47 { flex-grow: 47; }
.g-48 { flex-grow: 48; }
.g-49 { flex-grow: 49; }
.g-50 { flex-grow: 50; }
.g-51 { flex-grow: 51; }
.g-52 { flex-grow: 52; }
.g-53 { flex-grow: 53; }
.g-54 { flex-grow: 54; }
.g-55 { flex-grow: 55; }
.g-56 { flex-grow: 56; }
.g-57 { flex-grow: 57; }
.g-58 { flex-grow: 58; }
.g-59 { flex-grow: 59; }
.g-60 { flex-grow: 60; }
.g-61 { flex-grow: 61; }
.g-62 { flex-grow: 62; }
.g-63 { flex-grow: 63; }
.g-64 { flex-grow: 64; }
.g-65 { flex-grow: 65; }
.g-66 { flex-grow: 66; }
.g-67 { flex-grow: 67; }
.g-68 { flex-grow: 68; }
.g-69 { flex-grow: 69; }
.g-70 { flex-grow: 70; }
.g-71 { flex-grow: 71; }
.g-72 { flex-grow: 72; }
.g-73 { flex-grow: 73; }
.g-74 { flex-grow: 74; }
.g-75 { flex-grow: 75; }
.g-76 { flex-grow: 76; }
.g-77 { flex-grow: 77; }
.g-78 { flex-grow: 78; }
.g-79 { flex-grow: 79; }
.g-80 { flex-grow: 80; }
.g-81 { flex-grow: 81; }
.g-82 { flex-grow: 82; }
.g-83 { flex-grow: 83; }
.g-84 { flex-grow: 84; }
.g-85 { flex-grow: 85; }
.g-86 { flex-grow: 86; }
.g-87 { flex-grow: 87; }
.g-88 { flex-grow: 88; }
.g-89 { flex-grow: 89; }
.g-90 { flex-grow: 90; }
.g-91 { flex-grow: 91; }
.g-92 { flex-grow: 92; }
.g-93 { flex-grow: 93; }
.g-94 { flex-grow: 94; }
.g-95 { flex-grow: 95; }
.g-96 { flex-grow: 96; }
.g-97 { flex-grow: 97; }
.g-98 { flex-grow: 98; }
.g-99 { flex-grow: 99; }
.g-100 { flex-grow: 100; }

/* ---------- Detalle de compra ---------- */
.acciones-compra__botones { display: grid; gap: .8rem; }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1rem; margin: 0; }
.datos dt { color: var(--ceniza); font-size: .92rem; padding-top: .1rem; }
.datos dd { margin: 0; overflow-wrap: anywhere; }
.compartir { margin-bottom: 1rem; }
.compartir p { margin: 0 0 .4rem; }
.link-compra {
  padding: .55rem .7rem; border: 1px dashed var(--hierro); border-radius: .35rem; background: var(--negro);
  overflow-wrap: anywhere; font-size: .85rem; color: var(--plata);
}
.compartir__botones { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 0; }
.lista-entradas-admin { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.entrada-fila {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .6rem .7rem; border: 1px solid var(--hierro); border-radius: .4rem; background: var(--negro);
}
.entrada-fila > div:first-child { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.entrada-fila--usada { border-style: dashed; }
.entrada-fila__acciones { display: flex; flex-wrap: wrap; gap: .4rem; }
.visor-img { max-width: min(100%, 34rem); max-height: 70vh; margin: 0 auto; display: block; border: 1px solid var(--hierro); border-radius: .35rem; background: var(--hueso); }
.visor-pdf { width: 100%; height: 70vh; border: 1px solid var(--hierro); border-radius: .35rem; background: var(--hueso); }
.historial { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; font-size: .95rem; }
.historial li { padding-bottom: .55rem; border-bottom: 1px solid var(--hierro); overflow-wrap: anywhere; }
.historial li:last-child { border-bottom: 0; }

.plegable > summary {
  cursor: pointer; font: 600 .74rem/1.2 var(--serif-romana); letter-spacing: .14em; text-transform: uppercase;
  color: var(--plata); padding: .2rem 0; list-style-position: inside;
}
.plegable[open] > summary { margin-bottom: .8rem; }
.plegable--peligro > summary { color: var(--error); }

/* ---------- Usuarios: una tarjeta por usuario (grilla en desktop) ---------- */
.nuevo-usuario { max-width: 40rem; }
.nuevo-usuario__form { max-width: 30rem; }
.usuarios {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.usuario {
  display: grid; gap: .7rem; min-width: 0; padding: 1rem 1.1rem;
  background: var(--noche); border: 1px solid var(--hierro); border-radius: .5rem;
}
.usuario--inactivo { border-style: dashed; }
.usuario--inactivo .usuario__cabeza { opacity: .6; }
.usuario__cabeza { min-width: 0; }
.usuario__cabeza p { margin: 0; overflow-wrap: anywhere; }
.usuario__login { font-size: 1.05rem; color: var(--hueso); }
.usuario__nombre { color: var(--plata); }
.usuario__chips { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.usuario__panel { border-top: 1px solid var(--hierro); padding-top: .5rem; }
.usuario__panel[open] > summary { margin-bottom: .6rem; }
.permisos { display: grid; gap: .8rem; justify-items: start; }
.permisos > * { max-width: 100%; }
.permisos__rol { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.permisos__rol label { color: var(--plata); font-size: .95rem; }
.permisos__admin { display: grid; gap: .5rem; transition: opacity .15s; }
.permisos .check { white-space: nowrap; }
.permisos__promo { justify-self: stretch; }
.permisos .ayuda { margin: 0; }
/* Sin JS: con rol Puerta elegido la clave nueva se oculta y los permisos de admin
   se atenúan (si el navegador no soporta :has, todo queda visible con su ayuda). */
.permisos:has(select option[value="puerta"]:checked) .permisos__promo { display: none; }
.permisos:has(select option[value="puerta"]:checked) .permisos__admin { opacity: .45; }
.usuario__acciones {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem;
  border-top: 1px solid var(--hierro); padding-top: .5rem;
}
.usuario__acciones > form { margin: 0; margin-left: auto; }
.usuario__clave { flex: 1 1 12rem; min-width: 0; }
.usuario__clave > summary { padding: .6rem 0; }
.usuario__clave[open] { flex-basis: 100%; }   /* abierto: el form usa todo el ancho; Desactivar baja */
.usuario__clave[open] > summary { margin-bottom: .4rem; }
.usuario__clave-form { display: flex; flex-wrap: wrap; gap: .4rem; }
.usuario__clave-form input { flex: 1 1 10rem; width: auto; min-width: 0; }

.pestanas { display: flex; gap: .3rem; margin-bottom: 1rem; flex-wrap: wrap; }
.pestanas a {
  padding: .5rem .9rem; border: 1px solid var(--hierro); border-radius: 2rem; text-decoration: none; color: var(--ceniza);
  font: 500 .72rem/1 var(--serif-romana); letter-spacing: .12em; text-transform: uppercase;
}
.pestanas a[aria-current="page"] { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }
.paginas { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0; color: var(--ceniza); }

/* ---------- Login ---------- */
.panel--login { display: grid; place-items: center; min-height: 100vh; }
.panel--login .contenido { width: min(100% - 2rem, 24rem); margin: 0 auto; }
.login { text-align: center; padding: 2rem 0; }
.login__titulo { font-size: 1.7rem; letter-spacing: .1em; margin-bottom: .5rem; }
.login .rotulo { margin: 0 0 1.8rem; }
.login .formulario { text-align: left; }
.login__volver { margin-top: 1.6rem; }

/* ---------- Escáner de puerta ---------- */
.panel--escaner { overflow: hidden; }
.escaner { margin: 0; width: 100%; }
.escaner__app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: var(--negro); }
.escaner__barra {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .6rem .9rem; padding-top: max(.6rem, env(safe-area-inset-top));
  background: var(--noche); border-bottom: 1px solid var(--hierro);
}
.escaner__barra form { margin: 0; }
.escaner__volver {
  color: var(--ceniza); text-decoration: none; background: none; border: 0; cursor: pointer; padding: .4rem 0;
  font: 500 .7rem/1 var(--serif-romana); letter-spacing: .14em; text-transform: uppercase;
}
.escaner__contador { margin: 0; text-align: center; font-variant-numeric: tabular-nums; line-height: 1; }
.escaner__contador strong { font: 600 1.6rem/1 var(--serif-romana); color: var(--hueso); }
.escaner__contador span { color: var(--ceniza); font: 500 1.1rem/1 var(--serif-romana); }
.escaner__contador small { display: block; margin-top: .25rem; color: var(--ceniza); font: 500 .56rem/1 var(--serif-romana); letter-spacing: .24em; text-transform: uppercase; }
.escaner__visor { position: relative; flex: 1; min-height: 0; overflow: hidden; background: var(--negro); }
.escaner__lector { position: absolute; inset: 0; }
.escaner__lector video { width: 100% !important; height: 100% !important; object-fit: cover; }
.escaner__marco {
  position: absolute; left: 50%; top: 50%; width: min(72vw, 52vh); aspect-ratio: 1; transform: translate(-50%, -50%);
  pointer-events: none;
}
.escaner__marco i { position: absolute; width: 22%; height: 22%; border: 3px solid var(--hueso); }
.escaner__marco i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.escaner__marco i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.escaner__marco i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.escaner__marco i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.escaner__app--activa .escaner__marco i { border-color: var(--cera); }
.escaner__inicio {
  position: absolute; inset: auto 0 0; padding: 1.2rem 1rem 1.6rem; text-align: center; display: grid; gap: .9rem; justify-items: center;
  background: linear-gradient(transparent, var(--negro) 35%);
}
.escaner__inicio p { margin: 0; color: var(--plata); max-width: 22rem; }
.escaner__ayuda {
  margin: 0; padding: .6rem 1rem; padding-bottom: max(.6rem, env(safe-area-inset-bottom));
  font-size: .9rem; text-align: center; color: var(--ceniza); background: var(--noche); border-top: 1px solid var(--hierro);
}
.escaner__demo {
  position: fixed; left: .5rem; bottom: 3.2rem; z-index: 40; display: flex; gap: .5rem; font-size: .8rem;
  padding: .3rem .6rem; background: var(--piedra); border: 1px dashed var(--aviso); border-radius: .3rem; color: var(--aviso);
}
.escaner__demo a { color: var(--aviso); }

.resultado {
  position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem; padding: 2rem 1.4rem; text-align: center; cursor: pointer;
  background: var(--piedra); color: var(--hueso);
  animation: aparece .12s ease-out;
}
.resultado[hidden] { display: none; }
.resultado p { margin: 0; max-width: 30rem; }
.resultado__titulo { font: 600 clamp(2.4rem, 11vw, 4.2rem)/1 var(--serif-romana); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .8rem !important; }
.resultado__nombre { font: 500 clamp(1.5rem, 6vw, 2.2rem)/1.2 var(--serif-texto); }
.resultado__detalle { font-size: 1.3rem; }
.resultado__extra { font-size: 1.15rem; font-weight: 500; }
.resultado__codigo { font-size: 1rem; opacity: .75; margin-top: .6rem !important; }
.resultado__toque { position: absolute; bottom: max(1.2rem, env(safe-area-inset-bottom)); font: 500 .66rem/1 var(--serif-romana); letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
/* Colores a pantalla completa: se leen de lejos y con la mano en movimiento. */
.resultado--ok { background: var(--ok); color: var(--negro); }
.resultado--ya_usada, .resultado--invalida { background: var(--error); color: var(--negro); }
.resultado--no_validada, .resultado--error { background: var(--aviso); color: var(--negro); }
@keyframes aparece { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }

/* ---------- Pantallas más anchas ---------- */
@media (min-width: 48rem) {
  .barra { padding-inline: 1.5rem; }
  /* Desktop: las secciones pasan de línea en vez de cortarse (móvil: scroll). */
  .nav { padding-inline: 1.2rem; flex-wrap: wrap; overflow-x: visible; }
  .contenido { margin-top: 1.6rem; }
  .tarjeta { padding: 1.3rem 1.4rem; }
  .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .filtros { grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); }
  .filtros .campo--busqueda { grid-column: auto; }
  .filtros__acciones { grid-column: 1 / -1; }
  .filtros--una { grid-template-columns: 1fr auto; }
  .acciones-compra__botones { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .termometro__heroe { grid-template-columns: 1.2fr 1fr; align-items: end; gap: 2rem; }
  .fichas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fichas--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tablero { grid-template-columns: 1.4fr 1fr; gap: 2rem; }
  .socio-fila { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr) 2.2rem; }
  .cifras--compactas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 72rem) { .cifras:not(.cifras--compactas) { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .resultado { animation: none; } }
h1.mono { font-size: clamp(1.3rem, 1rem + 1.5vw, 1.8rem); letter-spacing: .06em; }
.ritmo { margin: 0 0 .8rem; }
.ritmo strong { font-family: var(--serif-romana); }
.tabla--dias .barra-col { width: 40%; vertical-align: middle; }