/* Nanuc Club — estilos propios sobre el theme glass (no tocar theme.css). */

/* Tarjeta de socio (proporción tarjeta física). SIEMPRE negra — es la
   identidad de la tarjeta, como en las wallets — con el patrón de
   rombos de marca desvaneciéndose hacia la derecha. */
.tarjeta-club {
  position: relative;
  border-radius: 26px;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 1.586;
  background: #050505;
  border: none;
}
.tarjeta-club::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../img/tarjeta-fondo.png") right center / cover no-repeat;
  opacity: .55;
}
.tarjeta-cara {
  position: relative; z-index: 1;
  height: 100%;
  padding: 12px 26px 22px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.tarjeta-logo { height: 95px; width: auto; filter: invert(1); }
/* En celular la tarjeta es más angosta: logo un 30% más chico. */
@media (max-width: 640px) {
  .tarjeta-logo { height: 66px; }
}
/* El nombre y el RUT se centran verticalmente con la palabra CLUB del
   logo (que queda al centro del bloque del logo). */
.tarjeta-cabeza { display: flex; justify-content: space-between;
                  align-items: center; }
.tarjeta-titular { text-align: right; }
.tarjeta-nombre { font-size: 17px; color: #fff; }
.tarjeta-rut { font-size: 12.5px; color: rgba(255, 255, 255, .65);
               font-variant-numeric: tabular-nums; margin-top: 2px; }
.tarjeta-saldo {
  font-size: clamp(44px, 12vw, 62px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1;
}
.tarjeta-rotulo { font-size: 15px; color: #fff; margin-top: 6px; }

/* ── Number pop-in (skill transitions-dev/02) ────────────────────────
   Los números del portal (saldo de la tarjeta e historia) entran
   dígito a dígito desde abajo con desenfoque; los dos últimos llegan
   escalonados. */
:root {
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
}
@keyframes t-digit-pop-in {
  0% {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}
.t-digit-group { display: inline-flex; align-items: baseline; }
.t-digit { display: inline-block; will-change: transform, opacity, filter; }
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit { animation: none !important; }
}

/* ── Error state shake (skill transitions-dev/12) ────────────────────
   Campo mal ingresado o código incorrecto: el campo se sacude con
   rebote, el borde pasa a rojo y vuelve solo a la normalidad (o al
   tipear). Se dispara con window.sacudirError (js/sacudida.js). */
:root {
  --shake-distance: 6px;
  --shake-overshoot: 4px;
  --shake-dur-a: 80ms;
  --shake-dur-b: 60ms;
  --shake-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --revert-hold: 3000ms;
  --revert-dur: 280ms;
}
.form-input { transition: border-color 150ms ease-out; }
/* Safari iOS ignora el ancho de input[type=date] y usa su tamaño
   intrínseco (desborda la pantalla): forzarlo como los demás campos. */
.form-input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.form-input.is-error {
  border-color: #E0402E;
  transition: border-color var(--revert-dur) ease-out;
}
.form-input.is-shaking {
  will-change: transform;
  animation: t-input-shake calc(
      var(--shake-dur-a) * 2 + var(--shake-dur-b) * 2
    ) linear;
}
@keyframes t-input-shake {
  0%     { transform: translateX(0);                                animation-timing-function: var(--shake-ease); }
  28.57% { transform: translateX(var(--shake-distance));            animation-timing-function: var(--shake-ease); }
  57.14% { transform: translateX(calc(var(--shake-distance) * -1)); animation-timing-function: var(--shake-ease); }
  78.57% { transform: translateX(var(--shake-overshoot));           animation-timing-function: var(--shake-ease); }
  100%   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .form-input.is-shaking { animation: none !important; transform: none !important; }
}

/* ── Shimmer text (skill transitions-dev/15) ─────────────────────────
   Destello de marca para textos-enlace («Únete gratis al club»,
   «Ingresa a tu cuenta»): la base va en crema y una banda de brillo la
   recorre. Puro CSS: el texto se duplica en data-text. */
:root {
  --shimmer-dur: 2000ms;
  --shimmer-base: rgba(246, 241, 232, .75);
  --shimmer-highlight: #fff;
  --shimmer-band: 400%;
  --shimmer-ease: linear;
}
.t-shimmer {
  position: relative;
  display: inline-block;
  color: var(--shimmer-base);
}
.t-shimmer::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    90deg,
    transparent          0%,
    transparent         40%,
    var(--shimmer-highlight) 50%,
    transparent         60%,
    transparent        100%
  );
  background-size: var(--shimmer-band) 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t-shimmer var(--shimmer-dur) var(--shimmer-ease) infinite;
}
@keyframes t-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .t-shimmer::before { animation: none !important; }
}

/* ── Skeleton loader and reveal (skill transitions-dev/14) ───────────
   Los paneles del portal montan con esqueleto pulsante y el contenido
   real entra con cross-fade + cross-blur (js en portal.html). El
   esqueleto vive DENTRO del panel (mismo slot: el panel pone fondo y
   radios), y el contenido son los hijos reales del panel. */
:root {
  --pulse-dur: 1000ms;
  --pulse-count: 1;
  --pulse-min: 0.5;
  --reveal-dur: 400ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
}
.t-skel { position: relative; }
/* El glare del tilt maneja su propia opacidad: queda fuera del swap. */
.t-skel > :not(.t-skel-skeleton):not(.t-tilt-glare) {
  opacity: 0;
  filter: blur(var(--reveal-blur));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter  var(--reveal-dur) var(--reveal-ease);
}
.t-skel.is-revealed > :not(.t-skel-skeleton):not(.t-tilt-glare) {
  opacity: 1; filter: blur(0);
}
.t-skel-skeleton {
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; pointer-events: none;
  display: flex; flex-direction: column; justify-content: center;
  gap: 14px; padding: 24px;
  opacity: 1; filter: blur(0);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter  var(--reveal-dur) var(--reveal-ease);
}
.t-skel.is-revealed .t-skel-skeleton {
  opacity: 0;
  filter: blur(var(--reveal-blur));
}
.t-skel-skeleton i {
  display: block; height: 14px; border-radius: 7px;
  background: rgba(14, 40, 30, .12);
}
.t-skel-skeleton i:nth-child(1) { width: 40%; }
.t-skel-skeleton i:nth-child(2) { width: 85%; }
.t-skel-skeleton i:nth-child(3) { width: 65%; }
/* En la tarjeta negra las barras son claras. */
.tarjeta-club .t-skel-skeleton i { background: rgba(255, 255, 255, .1); }
/* El pulso vive en las barras, no en el esqueleto (su opacidad queda
   libre para el cross-fade). */
.t-skel-skeleton.is-pulsing > i {
  animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
}
@keyframes t-skel-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: var(--pulse-min); }
}
@media (prefers-reduced-motion: reduce) {
  .t-skel > :not(.t-skel-skeleton), .t-skel-skeleton {
    transition: none !important;
  }
  .t-skel-skeleton.is-pulsing > i { animation: none !important; }
}

/* ── Card hover tilt (skill transitions-dev/19) ──────────────────────
   La tarjeta de socio se inclina en 3D hacia el cursor con un brillo
   que lo sigue. Solo mouse: en táctil se deja el scroll tranquilo
   (js en portal.html). */
:root {
  --tilt-perspective: 1000px;
  --tilt-return: 1000ms;
  --tilt-return-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-follow: 400ms;
  --tilt-follow-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tilt-glare-opacity: 0.32;
  --tilt-glare-fade: 300ms;
  --tilt-glare-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.t-tilt-card {
  transform:
    perspective(var(--tilt-perspective))
    rotateX(var(--tilt-rx, 0deg))
    rotateY(var(--tilt-ry, 0deg));
  transform-style: preserve-3d;
  transition: transform var(--tilt-return) var(--tilt-return-ease);
  will-change: transform;
}
.t-tilt-card.is-tilting {
  transition: transform var(--tilt-follow) var(--tilt-follow-ease);
}
.t-tilt-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle 95px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.48), rgba(255,255,255,0.06) 52%, rgba(255,255,255,0) 84%),
    radial-gradient(circle 200px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.22), rgba(255,255,255,0.04) 58%, rgba(255,255,255,0) 78%),
    radial-gradient(circle 360px at var(--tilt-gx, 50%) var(--tilt-gy, 50%),
      rgba(255,255,255,0.10), rgba(255,255,255,0) 88%);
  transition: opacity var(--tilt-glare-fade) var(--tilt-glare-ease);
}
.t-tilt.is-hover .t-tilt-glare { opacity: var(--tilt-glare-opacity); }
@media (prefers-reduced-motion: reduce) {
  .t-tilt-card { transform: none !important; transition: none !important; }
}

/* ── Checkbox check (skill transitions-dev/25) ───────────────────────
   La casilla llena su fondo y el check se dibuja trazándose; al
   desmarcar revierte rápido. El input nativo queda oculto pero sigue
   siendo el estado real (form y teclado intactos). */
:root {
  --check-box: 150ms;
  --check-draw: 350ms;
  --check-delay: 0ms;
  --check-uncheck: 150ms;
  --check-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --check-len: 15;   /* getTotalLength() del path ≈ 14.4 */
}
.consentimiento-item input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.t-check {
  flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 6px; border: 2px solid var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition:
    background   var(--check-box) var(--check-ease),
    border-color var(--check-box) var(--check-ease),
    box-shadow   var(--check-box) var(--check-ease);
}
.t-check svg { width: 13px; height: 13px; display: block; }
.t-check svg path {
  fill: none; stroke: #0e281e; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--check-len);
  stroke-dashoffset: var(--check-len);
  transition: stroke-dashoffset var(--check-uncheck) var(--check-ease);
}
input[type="checkbox"]:checked + .t-check {
  background: #FFD59D; border-color: #FFD59D;
}
input[type="checkbox"]:checked + .t-check svg path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--check-draw) var(--check-ease) var(--check-delay);
}
input[type="checkbox"]:focus-visible + .t-check {
  box-shadow: 0 0 0 3px rgba(255, 213, 157, .4);
}
@media (prefers-reduced-motion: reduce) {
  .t-check, .t-check svg path { transition: none !important; }
}

/* ── Icon swap (skill transitions-dev/09) ────────────────────────────
   Dos íconos apilados en la misma celda que se intercambian con fundido,
   desenfoque y escala (hamburguesa ↔ X del portal). */
:root {
  --icon-swap-dur: 250ms;
  --icon-swap-blur: 2px;
  --icon-swap-start-scale: 0.25;
  --icon-swap-ease: ease-in-out;
}
.t-icon-swap { position: relative; display: inline-grid; }
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  transition:
    opacity   var(--icon-swap-dur) var(--icon-swap-ease),
    filter    var(--icon-swap-dur) var(--icon-swap-ease),
    transform var(--icon-swap-dur) var(--icon-swap-ease);
  will-change: opacity, filter, transform;
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="a"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="b"] {
  opacity: 1; filter: blur(0); transform: scale(1);
}
.t-icon-swap[data-state="a"] .t-icon[data-icon="b"],
.t-icon-swap[data-state="b"] .t-icon[data-icon="a"] {
  opacity: 0; filter: blur(var(--icon-swap-blur));
  transform: scale(var(--icon-swap-start-scale));
}
@media (prefers-reduced-motion: reduce) {
  .t-icon-swap .t-icon { transition: none !important; }
}

/* Historial de movimientos */
.mov-lista { display: flex; flex-direction: column; }
.mov-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--hairline, rgba(39,39,39,.08));
}
.mov-item:last-child { border-bottom: none; }
.mov-detalle { min-width: 0; }
.mov-titulo { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.mov-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.mov-puntos {
  font-size: 14.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mov-puntos.positivo { color: var(--green-deep, #1f8c0e); }
.mov-puntos.negativo { color: var(--red-deep, #cf2c18); }
/* Canje de cupón: muestra el código, sin puntos (no mueve saldo). */
.mov-puntos.cupon { color: var(--muted); font-size: 12px;
                    letter-spacing: .5px; font-weight: 500; }

/* Paginación simple */
.paginacion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  font-size: 12.5px;
  color: var(--muted);
}

/* Entrada del código de 6 dígitos */
.input-codigo {
  text-align: center;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 10px;
  font-variant-numeric: tabular-nums;
}

/* Barra superior del portal */
.portal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-bottom: 16px;
}

/* Panel admin — contenido pegado a la izquierda junto al panel lateral
   (no centrado), igual que la consola del ERP. La topbar (#glass-top) se
   deja a ancho completo aparte: sus iconos van al extremo derecho. El
   body es flex column, por eso align-self controla el eje horizontal. */
/* El contenido LLENA el área disponible junto al panel lateral (como la
   consola del POS), en vez de flotar como columna angosta centrada. El
   body.gside-on ya reserva el espacio del panel con su padding-left; aquí
   solo quitamos el tope de ancho y los márgenes automáticos para que el
   contenido ocupe todo el ancho restante. */
body.admin-panel main.page {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
/* En pantalla angosta, padding más chico para aprovechar el ancho. */
@media (max-width: 720px) {
  body.admin-panel main.page { padding-left: 16px; padding-right: 16px; }
}

.admin-head {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 6px 0 26px;
  flex-wrap: wrap;
}
.admin-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.admin-nav-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
  padding: 9px 16px;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.admin-nav-link:hover { color: var(--ink); }
.admin-nav-link.active { color: var(--ink); font-weight: 600; background: rgba(39, 39, 39, .07); }
[data-theme="dark"] .admin-nav-link.active { background: rgba(255, 255, 255, .09); }
.admin-nav-exit { margin-left: 8px; color: var(--muted-2); }
.admin-nav-exit:hover { color: var(--red-deep); }

/* Grilla de indicadores del resumen: 3 columnas, angosta a 2 y luego 1 */
.kpi-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kpi-grid { grid-template-columns: 1fr; } }

/* Aviso flotante no bloqueante (guardado de campañas, envío de pruebas) */
.admin-toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  z-index: 500;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.admin-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.admin-toast.error { background: var(--red-deep); }
/* En dark --ink se invierte a superficie clara (misma regla que .btn-primary). */
[data-theme="dark"] .admin-toast { color: #141414; }
[data-theme="dark"] .admin-toast.error { color: #fff; }

/* Casillas de consentimiento del registro (T&C v2.2) */
.consentimiento { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; }
.consentimiento-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.consentimiento-item input { margin-top: 3px; flex: none; }

/* Documentos legales publicados en club.nanuc.cl */
.doc-contenido { font-size: 13.5px; line-height: 1.62; color: var(--ink-soft); }
.doc-contenido h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin: 30px 0 10px;
}
.doc-contenido h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 22px 0 8px;
}
.doc-contenido p { margin: 0 0 11px; }
.doc-contenido ul, .doc-contenido ol { margin: 0 0 13px; padding-left: 20px; }
.doc-contenido li { margin-bottom: 5px; }
.doc-contenido strong { color: var(--ink); font-weight: 600; }
.doc-contenido .doc-meta { color: var(--muted); font-size: 12.5px; }
.doc-contenido table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 12.5px; }
.doc-contenido th, .doc-contenido td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--hairline);
}

/* Automatizaciones */
.auto-list { display: flex; flex-direction: column; gap: 14px; }
.auto-asunto { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.token-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.token-list code {
  background: var(--hairline);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 12.5px;
  color: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Botones de acción en fila (Editar / Activar / Eliminar): el form solo
   envuelve al botón, así que con display:contents el botón pasa a ser hijo
   directo del contenedor flex y se alinea con los enlaces hermanos. Además
   se anula el margin-top que el theme aplica a los botones de envío dentro
   de formularios (ahí sí desalineaba). El form sigue enviándose igual. */
.page-actions form { display: contents; }
/* Filas horizontales de formulario (.filters = barra de crear/buscar;
   .page-actions = acciones de tarjeta): el botón va EN LÍNEA con el input
   o los enlaces hermanos. El theme le da margin-top:28px al último .btn de
   un form (pensado para forms verticales, para separar el botón de los
   campos), y ahí sí desalinea. Se anula con mayor especificidad que la
   regla `form > .btn:last-child` del theme. */
.filters > .btn:last-child,
.page-actions form > .btn:last-child { margin-top: 0; }

/* Botón de wallet */
.wallet-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }

/* Misiones y cupones */
.mision-frase { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.5; margin-top: 4px; }
.cupon-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--ink);
}
.badge.vencido { background: rgba(245, 158, 11, .14); color: var(--amber-deep); }
[data-theme="dark"] .badge.vencido { color: var(--amber); }
.mision-progreso { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.barra-riel { flex: 1; height: 8px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.barra-relleno { height: 100%; border-radius: 999px; background: var(--ink); }
.progreso-num { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Selector de audiencia (campañas y misiones) ──────────────────────── */
.aud { font-family: var(--font, Inter, sans-serif); }
.aud-filtros { display: flex; flex-wrap: wrap; gap: 12px 14px; margin-bottom: 12px; align-items: flex-end; }
.aud-campo { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.aud-campo > span { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #82827c); }
.aud-nota { font-size: 12.5px; color: var(--muted-2, #a6a69f); padding: 9px 0; }
.aud .aud-reg { min-width: 200px; }
.aud-dd { position: relative; }
.aud-dd-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; min-width: 150px;
  border: 1px solid var(--hairline); background: var(--glass, rgba(255,255,255,.6));
  border-radius: var(--r-sm, 12px); padding: 9px 12px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--ink); text-align: left;
}
.aud-dd-btn > span { color: var(--muted, #82827c); }
.aud-dd-btn > b { font-weight: 600; margin-left: auto; }
.aud-dd-btn > i { font-style: normal; color: var(--muted-2); transition: transform .15s ease; }
.aud-dd.abierto .aud-dd-btn > i { transform: rotate(180deg); }
.aud-dd-btn:hover { border-color: var(--muted-2, #a6a69f); }
.aud-dd-panel {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%;
  display: none; flex-direction: column; gap: 2px; padding: 8px;
  background: var(--glass-strong, #fff); border: 1px solid var(--hairline);
  border-radius: var(--r-sm, 12px); box-shadow: var(--shadow-pop);
  max-height: 260px; overflow: auto; white-space: nowrap;
}
.aud-dd.abierto .aud-dd-panel { display: flex; }
.aud-dd-op { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.aud-dd-op:hover { background: var(--hairline); }
.aud-dd-op input, .aud-check { accent-color: var(--green, #29bf12); width: 16px; height: 16px; cursor: pointer; margin: 0; }
.aud-resumen {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--r-sm, 12px);
  background: var(--lime, #e3f380); color: var(--lime-deep, #5a6414);
  font-size: 13px; margin-bottom: 10px;
}
.aud-resumen b { font-size: 20px; font-variant-numeric: tabular-nums; }
.aud-tabla-caja { border: 1px solid var(--hairline); border-radius: var(--r-sm, 12px); overflow: hidden; }
.aud-tabla-scroll { max-height: 420px; overflow: auto; }
.aud-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.aud-tabla th, .aud-tabla td { text-align: left; padding: 8px 12px; white-space: nowrap; }
.aud-tabla thead th {
  position: sticky; top: 0; z-index: 1; background: var(--glass-strong, rgba(255,255,255,.92));
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #82827c);
  border-bottom: 1px solid var(--hairline);
}
.aud-tabla tbody tr { border-bottom: 1px solid var(--hairline); }
.aud-tabla tbody tr:last-child { border-bottom: none; }
.aud-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
.aud-col-check { width: 40px; text-align: center; }
.aud-vacio { padding: 22px; text-align: center; color: var(--muted, #82827c); font-size: 13px; }
.aud-pag { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--hairline); background: var(--glass, rgba(255,255,255,.4)); }
.aud-pag-info { font-size: 12.5px; color: var(--muted, #82827c); font-variant-numeric: tabular-nums; }
.aud-pag-b { border: 1px solid var(--hairline); background: var(--glass-strong, #fff); color: var(--ink); border-radius: var(--r-pill, 999px); padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.aud-pag-b:disabled { opacity: .4; cursor: default; }
.aud-pag-b:not(:disabled):hover { border-color: var(--muted-2); }
[data-theme="dark"] .aud-dd-btn, [data-theme="dark"] .aud-pag-b { background: rgba(255,255,255,.06); }
[data-theme="dark"] .aud-dd-panel { background: #23231f; }
[data-theme="dark"] .aud-dd-op:hover { background: rgba(255,255,255,.08); }
[data-theme="dark"] .aud-tabla thead th { background: #23231f; }
[data-theme="dark"] .aud-pag { background: rgba(255,255,255,.03); }
[data-theme="dark"] .aud-resumen { background: rgba(227,243,128,.14); color: var(--lime, #e3f380); }

/* Audiencia — filtros progresivos (chips) */
.aud-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.aud-dims { display: flex; flex-wrap: wrap; gap: 10px; }
.aud-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--hairline); background: var(--glass, rgba(255,255,255,.55)); border-radius: var(--r-pill, 999px); padding: 5px 6px 5px 12px; }
.aud-chip-lb { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #82827c); }
.aud-chip-x { border: none; background: var(--hairline); color: var(--ink-soft); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1; }
.aud-chip-x:hover { background: var(--red, #f4442e); color: #fff; }
.aud-ubic { display: inline-flex; align-items: center; gap: 8px; }
.aud-ubic .aud-reg { min-width: 190px; padding: 7px 10px; }
.aud-com-slot { display: inline-flex; align-items: center; }
.aud-add-btn { border-style: dashed; color: var(--ink-soft); border-radius: var(--r-pill, 999px); padding: 9px 16px; }
.aud-dims, .aud-add { display: flex; align-items: center; }
.aud-chip { min-height: 42px; box-sizing: border-box; }
[data-theme="dark"] .aud-chip { background: rgba(255,255,255,.06); }
[data-theme="dark"] .aud-chip-x { background: rgba(255,255,255,.12); }

/* Acciones de fila alineadas y consistentes (listas del panel) */
.acciones { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.acciones form { margin: 0; display: inline-flex; }
.acciones .btn, .acciones form > .btn:last-child { margin-top: 0; }
.page-actions form { margin: 0; }
.btn.btn-small.danger:hover { border-color: var(--red, #f4442e); color: var(--red, #f4442e); }