/* ============================================================
   Chat con IA — la hoja del widget
   Prefijo `chatclub-` en todo selector y variables propias `--chatclub-*`
   (BR4.2 y ADR-009 de `reuso-entre-clubes`). El widget no lee ninguna
   variable del sitio ni usa ninguna clase del sitio: cada variable tiene su
   valor por defecto, declarado UNA vez en el bloque de abajo, y un club que
   no define nada ve el widget entero, nunca sin fondo. Cada club
   sobreescribe las que quiera desde su propia hoja, en `:root` o en
   `.chatclub-panel` y `.chatclub-fab`.

   Los valores por defecto son los que el widget tenia en el sitio del primer
   club, donde ya esta en uso: ese club se ve igual sin sobreescribir nada
   (BR11.1). Los colores viven SOLO en ese bloque, y `contraste.test.ts`
   recalcula desde ahi cada par de texto contra 4,5:1.
   ============================================================ */

/* Los valores por defecto, sobre `html`: el selector de elemento les deja la
   especificidad mas baja, asi que una declaracion del club en `:root` les gana
   aunque esta hoja se cargue despues, que es como se integra (anexada al final
   de la del club). */
html {
  --chatclub-ink: #191510;
  --chatclub-surface: #241e17;
  --chatclub-surface-2: #2c2419;
  --chatclub-edge: #3c3121;
  --chatclub-paper: #f4ead6;
  --chatclub-paper-dim: #b7a88e;
  --chatclub-brass: #cf9a4f;
  --chatclub-glass: rgba(30, 25, 19, 0.58);
  --chatclub-glass-strong: rgba(24, 20, 15, 0.78);
  --chatclub-glass-edge: rgba(244, 234, 214, 0.12);
  --chatclub-rl: 26px;
  --chatclub-rm: 16px;
  --chatclub-rs: 10px;
  --chatclub-nav-h: 78px;
  --chatclub-sidebar-w: 248px;
  --chatclub-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --chatclub-font-body:
    'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --chatclub-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --chatclub-panel-w: 380px;
  --chatclub-bubble-max: 78%;
  --chatclub-fab-size: 56px;
}

.chatclub-panel,
.chatclub-fab {
  font-family: var(--chatclub-font-body);
  color: var(--chatclub-paper);
}

/* ---------- P1: boton flotante ---------- */

.chatclub-fab {
  position: fixed;
  right: 16px;
  bottom: calc(var(--chatclub-nav-h) + 16px);
  width: var(--chatclub-fab-size);
  height: var(--chatclub-fab-size);
  border-radius: 999px;
  background: var(--chatclub-brass);
  color: var(--chatclub-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 45;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--chatclub-ink) 60%, transparent);
}
.chatclub-fab svg {
  width: 26px;
  height: 26px;
}
.chatclub-fab[aria-expanded='true'] {
  display: none;
}

/* ---------- el panel: hoja anclada abajo, la pagina del club sigue a la vista ---------- */

.chatclub-panel {
  position: fixed;
  inset: auto 0 0 0;
  /* `dvh` para que la barra del navegador no corte el pie; `vh` es la reserva
     para los navegadores viejos del parque, que no la entienden. */
  height: 78vh;
  height: 78dvh;
  z-index: 55;
  display: flex;
  flex-direction: column;
  max-width: none;
  padding: 0;
  border-radius: var(--chatclub-rl) var(--chatclub-rl) 0 0;
  background: var(--chatclub-glass-strong);
  /* Hasta `reuso-entre-clubes` el desenfoque venia de la clase `.modal-sheet`
     del sitio, que el panel llevaba. Ahora es del widget, con el mismo valor. */
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--chatclub-glass-edge);
}
.chatclub-panel[hidden] {
  display: none;
}

/* El panel se ubica adentro del area VISIBLE, que `embed/teclado.ts` publica
   en `--chatclub-vv-top` y `--chatclub-vv-height` mientras esta abierto: el teclado
   virtual achica el viewport visual y no el de layout, y anclado al fondo del
   layout el pie quedaria abajo del teclado. Con el teclado abierto, el panel
   ocupa toda el area visible. Sin las variables, las reservas dan la misma
   hoja de 78dvh anclada abajo; sin `dvh`, queda la declaracion de arriba. */
@supports (height: 1dvh) {
  .chatclub-panel {
    --chatclub-panel-h: min(78dvh, var(--chatclub-vv-height, 78dvh));
    top: calc(
      var(--chatclub-vv-top, 0px) + var(--chatclub-vv-height, 100dvh) - var(--chatclub-panel-h)
    );
    bottom: auto;
    height: var(--chatclub-panel-h);
  }
}

/* El velo detras de la hoja: tocarlo cierra el panel y el toque no llega a la
   pagina (`embed/widget.ts`). Transparente, para que la pagina se vea igual; un
   punto por debajo del panel y por encima de la barra y los modales del club. */
.chatclub-velo {
  position: fixed;
  inset: 0;
  z-index: 54;
  -webkit-tap-highlight-color: transparent;
}
.chatclub-velo[hidden] {
  display: none;
}

/* Con el panel tapando toda el area visible, `embed/teclado.ts` oculta la pagina
   del club: Safari de iOS 26 pinta debajo de sus barras flotantes una tajada de
   ella que ningun elemento fijo alcanza. `visibility` y no `display`: el layout
   de la pagina no cambia, asi que no salta su desplazamiento. */
.chatclub-pagina-tapada body > :not(.chatclub-panel) {
  visibility: hidden;
}

.chatclub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--chatclub-glass-edge);
}
.chatclub-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.chatclub-logo {
  display: block;
  width: 30px;
  height: 16px;
  flex-shrink: 0;
}
.chatclub-title {
  margin: 0;
  font-family: var(--chatclub-font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}
.chatclub-subtitle {
  margin: 2px 0 0;
  font-family: var(--chatclub-font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--chatclub-paper-dim);
}
.chatclub-close {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  font-size: 26px;
  line-height: 1;
  color: var(--chatclub-paper-dim);
}
.chatclub-close:hover {
  color: var(--chatclub-paper);
}

.chatclub-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 20px;
  gap: 12px;
}
.chatclub-thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---------- burbujas ---------- */

.chatclub-msg {
  max-width: var(--chatclub-bubble-max);
  padding: 12px 14px;
  border-radius: var(--chatclub-rm);
  border: 1px solid var(--chatclub-edge);
  font-size: 15px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chatclub-msg--bot {
  align-self: flex-start;
  background: var(--chatclub-surface);
}
.chatclub-msg--user {
  align-self: flex-end;
  background: var(--chatclub-brass);
  border-color: var(--chatclub-brass);
  color: var(--chatclub-ink);
}

/* ---------- P2: chips ---------- */

.chatclub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Hasta `reuso-entre-clubes` los chips llevaban la clase `.tab` del sitio, y su
   aspecto venia de ahi. Ahora es del widget, con los mismos valores. */
.chatclub-chip {
  flex-shrink: 0;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--chatclub-glass-edge);
  background: var(--chatclub-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--chatclub-paper-dim);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

/* ---------- P3: tarjetas ---------- */

.chatclub-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chatclub-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-content: center;
  column-gap: 14px;
  row-gap: 4px;
  padding: 10px;
  border-radius: var(--chatclub-rm);
  background: var(--chatclub-surface);
  border: 1px solid var(--chatclub-edge);
  font-size: 13px;
}
.chatclub-card-art {
  grid-row: span 2;
  display: block;
  width: 64px;
  aspect-ratio: 1;
  border-radius: var(--chatclub-rs);
  overflow: hidden;
  background: color-mix(in srgb, var(--chatclub-brass) 30%, var(--chatclub-surface-2));
}
.chatclub-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chatclub-card-title {
  align-self: end;
  font-family: var(--chatclub-font-display);
  font-weight: 700;
  font-size: 17px;
}
/* Un atributo del item (BR5.1): la clase comun, y el club le da estilo a cada
   clave con `.chatclub-card-attr--<clave>`. */
.chatclub-card-attr {
  align-self: start;
  color: var(--chatclub-paper-dim);
  font-family: var(--chatclub-font-mono);
  font-size: 11.5px;
}

/* ---------- tarjetas de gasto (U5 de MisGastosEnOrden, BR2.2 y BR2.3) ----------
   Una por gasto, con el ancho del hilo y sin ancho fijo: entra a 320 px. El
   estado se lee por el TEXTO; el borde solo acompana, con los colores de las
   variables del widget, que el club puede sobreescribir (ADR-009). */

.chatclub-gastos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chatclub-gasto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border-radius: var(--chatclub-rm);
  border: 1px solid var(--chatclub-edge);
  border-left-width: 4px;
  background: var(--chatclub-surface);
  color: var(--chatclub-paper);
  font-size: 14px;
  line-height: 1.4;
}
.chatclub-gasto p {
  margin: 0;
}
/* El monto, en una linea propia y con numeros tabulares. */
.chatclub-gasto-monto {
  font-family: var(--chatclub-font-display);
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chatclub-gasto-detalle {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  color: var(--chatclub-paper-dim);
  font-size: 13px;
}
/* La descripcion, de hasta 80 caracteres, corta por palabra y no se trunca. */
.chatclub-gasto-descripcion {
  overflow-wrap: break-word;
}
.chatclub-gasto-estado {
  color: var(--chatclub-paper-dim);
  font-size: 13px;
  font-weight: 600;
}
.chatclub-gasto--guardando {
  border-left-color: var(--chatclub-edge);
}
.chatclub-gasto--registrado {
  border-left-color: var(--chatclub-brass);
}
.chatclub-gasto--no-guardado {
  border-left-color: var(--chatclub-paper);
  border-left-style: dashed;
}
.chatclub-gasto--sin-confirmar {
  border-left-color: var(--chatclub-paper-dim);
  border-left-style: dotted;
}

/* ---------- botones de salida y reintento ---------- */

.chatclub-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--chatclub-rs);
  background: var(--chatclub-ink);
  border: 1px solid var(--chatclub-edge);
  color: var(--chatclub-paper);
  font-weight: 700;
  font-size: 14px;
}

/* ---------- P4a / P4b / P9: marco con texto y un boton ---------- */

.chatclub-frame {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
}
.chatclub-frame[hidden] {
  display: none;
}
.chatclub-frame-text {
  margin: 0;
  max-width: 32ch;
  font-size: 16px;
  line-height: 1.5;
}
.chatclub-frame .chatclub-btn {
  align-self: center;
}

/* ---------- P4a: el formulario del ingreso por ANI ---------- */

.chatclub-ingreso {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-top: 1px solid var(--chatclub-edge);
}
.chatclub-ingreso-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--chatclub-paper);
}
.chatclub-ingreso-pais {
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--chatclub-rs);
  background: var(--chatclub-ink);
  border: 1px solid var(--chatclub-edge);
  color: var(--chatclub-paper);
  font: inherit;
}
.chatclub-ingreso-pais:focus {
  border-color: var(--chatclub-brass);
  outline: none;
}
.chatclub-ingreso .chatclub-btn {
  align-self: stretch;
  justify-content: center;
  margin-top: 8px;
  background: var(--chatclub-brass);
  color: var(--chatclub-ink);
}
.chatclub-ingreso .chatclub-btn:disabled {
  opacity: 0.6;
}

/* ---------- T1: esperando respuesta ---------- */

.chatclub-wait {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--chatclub-paper-dim);
  font-size: 13px;
}
.chatclub-wait[hidden] {
  display: none;
}
.chatclub-dots {
  display: inline-flex;
  gap: 4px;
}
.chatclub-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--chatclub-brass);
  animation: chatclub-pulse 1.2s ease-in-out infinite;
}
.chatclub-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.chatclub-dot:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes chatclub-pulse {
  0%,
  80%,
  100% {
    opacity: 0.3;
  }
  40% {
    opacity: 1;
  }
}
/* Con la preferencia activa, el club ya frena toda animacion (styles.css:102).
   Los puntos cambian de opacidad en pasos: la informacion no depende del
   movimiento (A5). */
@media (prefers-reduced-motion: reduce) {
  .chatclub-dot {
    animation: none;
    opacity: 0.4;
  }
  .chatclub-dot:nth-child(2) {
    opacity: 0.7;
  }
  .chatclub-dot:nth-child(3) {
    opacity: 1;
  }
}

/* ---------- pie: campo, contador y cuota ---------- */

.chatclub-foot {
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--chatclub-glass-edge);
}
.chatclub-foot[hidden] {
  display: none;
}
.chatclub-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.chatclub-input {
  flex: 1;
  min-height: 44px;
  max-height: 140px;
  resize: none;
  padding: 12px 14px;
  border-radius: var(--chatclub-rs);
  background: var(--chatclub-ink);
  border: 1px solid var(--chatclub-edge);
  color: var(--chatclub-paper);
  font: inherit;
  outline: none;
}
/* El campo del numero tomaba estas tres de la regla `.modal-sheet input` del
   sitio hasta `reuso-entre-clubes`, cuando el panel dejo de llevar esa clase.
   Va despues de `.chatclub-input` para ganarle el relleno. */
.chatclub-ingreso-numero {
  width: 100%;
  padding: 14px;
  margin-bottom: 16px;
}
/* iOS amplia la pagina al enfocar un campo con letra de menos de 16 px, y no
   la vuelve a achicar. Con `.chatclub-panel` adelante le gana a una regla del
   sitio sobre `input` de una sola clase. */
.chatclub-panel .chatclub-input,
.chatclub-panel .chatclub-ingreso-pais {
  font-size: 16px;
}
.chatclub-input:focus {
  border-color: var(--chatclub-brass);
}
.chatclub-input:disabled {
  opacity: 0.6;
}
.chatclub-send {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--chatclub-rs);
  background: var(--chatclub-brass);
  color: var(--chatclub-ink);
  font-size: 20px;
  font-weight: 700;
}
.chatclub-send:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.chatclub-counter,
.chatclub-quota {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--chatclub-paper-dim);
}
.chatclub-counter {
  font-family: var(--chatclub-font-mono);
  text-align: right;
}
.chatclub-counter[hidden],
.chatclub-quota[hidden] {
  display: none;
}

/* ---------- desde 768 px: lateral, sin invadir la barra del club ---------- */

@media (min-width: 768px) {
  .chatclub-fab {
    bottom: 24px;
    right: 24px;
  }
  .chatclub-velo {
    display: none;
  }
  .chatclub-panel {
    inset: auto 24px 24px auto;
    width: var(--chatclub-panel-w);
    max-width: calc(100vw - var(--chatclub-sidebar-w) - 48px);
    height: min(640px, calc(100vh - 48px));
    border-radius: var(--chatclub-rl);
  }
}