/* ============================================================
   COMPONENTS — botones, inputs, badges, combos, chips, cards
============================================================ */

/* Grid y cards */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(16px, 2vw, 20px);
}
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: clamp(20px, 2.5vw, 26px);
}
.card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.card-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--c-bg);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-accent);
  flex-shrink: 0;
}
.card-icon svg { width: 20px; height: 20px; }
.card h2 { font-size: var(--fs-md); font-weight: 700; color: var(--c-primary); letter-spacing: -.1px; }
.card-desc { color: var(--c-muted); font-size: var(--fs-sm); margin-bottom: 20px; }

/* Formularios */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--c-primary);
  margin-bottom: 6px;
}
.input, .textarea, .select {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--fs-md);
  color: var(--c-primary);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: #4b5563;
  border-width: 2px;
  box-shadow: none;
}
.textarea { resize: vertical; min-height: 100px; }

.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* Botones */
.btn {
  padding: 11px 20px;
  font-size: var(--fs-sm);
  font-weight: 400;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: none;
  min-height: 44px;
  flex: 1 1 auto;
}
.btn:active { transform: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--c-surface-dark); color: #ffffff; border-color: var(--c-surface-dark); }
/* Sin hover — el botón rojo no cambia de color al pasar el mouse */
.btn-secondary { background: var(--c-surface); color: var(--c-primary); border-color: var(--c-border); }
.btn-outline {
  background: transparent;
  color: var(--c-primary);
  border: 1px solid var(--c-border);
}

.icon-btn {
  position: relative;
  width: 38px; height: 38px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-muted);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--c-bg); color: var(--c-primary); }
.icon-btn svg { width: 19px; height: 19px; }

.icon-dot {
  position: absolute;
  top: 9px; right: 10px;
  width: 7px; height: 7px;
  background: var(--c-surface-dark);
  border-radius: 50%;
  border: 2px solid var(--c-surface);
}

/* Ghost button (acciones en headers de paneles) */
.ghost-btn {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  cursor: pointer;
  color: var(--c-muted);
  transition: background .15s, color .15s, border-color .15s;
}
.ghost-btn:hover:not(:disabled) {
  background: var(--c-bg);
  color: var(--c-primary);
  border-color: #b8c0cc;
}
.ghost-btn:disabled { opacity: .45; cursor: not-allowed; }
.ghost-btn svg { width: 15px; height: 15px; }

/* Combo premium (dropdown custom) */
.combo { position: relative; }
.combo-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  color: var(--c-primary);
  text-align: left;
  transition: border-color .15s, box-shadow .15s;
}
.combo-trigger:hover { border-color: var(--c-surface-dark); }
.combo.open .combo-trigger { border-color: var(--c-surface-dark); }
.combo-text {
  flex: 1;
  font-size: var(--fs-sm);
  font-weight: 400;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--c-primary);
}
.combo-chev {
  width: 16px; height: 16px;
  color: var(--c-muted);
  transition: transform .2s;
  flex-shrink: 0;
}
.combo.open .combo-chev { transform: rotate(180deg); }

/* ---------- El selector de consulta abre como cuadro flotante ----------
   Antes se desplegaba hacia abajo, pegado al campo. Con catalogos largos
   la lista tapaba media pagina, empujaba el resto del formulario fuera
   de la vista y en celular quedaba a medias contra el borde inferior.
   Centrado sobre un velo se lee de una vez y no depende de cuanto
   espacio quede por debajo del campo.

   Sigue siendo el mismo elemento y la misma clase `.combo.open`: no hace
   falta un modal aparte ni marcado nuevo, solo cambia donde se coloca. */
.combo-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(520px, calc(100vw - 32px));
  max-height: min(70vh, 540px);
  background: var(--c-surface);
  /* El filete que recorta el cuadro contra el velo. Va bastante mas
     oscuro que --c-border (#DCDCDC): ese gris esta pensado para separar
     cajas sobre fondo claro y aqui, contra el blanco del propio cuadro,
     no se veia. Es el mismo #a4b1b9 que ya recorta la tarjeta del
     acceso, asi que no se inventa un gris nuevo.
     Lleva `!important` porque base.css quita el borde a todos los
     paneles de la aplicacion en bloque. */
  border: 1px solid #a4b1b9 !important;
  border-radius: 14px;
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Sin barra de desplazamiento a la vista. Se desliza con el dedo o con
     la rueda; la barra metia una franja gris pegada al borde redondeado
     y ensuciaba el cuadro. El scroll sigue funcionando igual. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  opacity: 0;
  visibility: hidden;
  /* Entra creciendo un pelo desde el centro. El desplazamiento y la
     escala van en la misma propiedad, asi que los dos valores del
     `translate` se repiten en los dos estados: quitar uno descolocaria
     el cuadro media pantalla. */
  transform: translate(-50%, -50%) scale(.97);
  transition: opacity .18s ease,
              transform .18s cubic-bezier(.16, 1, .3, 1),
              visibility .18s;
  z-index: 601;
}
.combo.open .combo-panel {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

/* El velo. Es un pseudoelemento del propio `.combo` para no tener que
   crear ni destruir un nodo cada vez. Va en `fixed`, asi que cubre la
   ventana entera aunque su padre mida cuatro dedos.

   Ojo al cerrar: un clic aqui llega al JS con `e.target` apuntando a
   `.combo` —los pseudoelementos no son elementos—, asi que la condicion
   de cierre no puede preguntar por `.combo.contains()`; pregunta por el
   boton y por el panel. */
.combo.open::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(20, 29, 28, .48);
  z-index: 600;
  animation: comboVelo .18s ease both;
}
@keyframes comboVelo {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.combo-panel::-webkit-scrollbar { display: none; }

.combo-option {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 12px;
  cursor: pointer;
  transition: background .12s;
}
/* Un pelo de aire entre opciones. Pegadas, la lista se lee como un
   bloque macizo y cuesta distinguir donde acaba una y empieza la
   siguiente. Un pixel basta: mas y la lista se estira de mas a lo alto
   y obliga a deslizar antes de tiempo. */
.combo-option + .combo-option { margin-top: 1px; }
.combo-option:hover { background: #f4f5f5; }

/* La elegida y la que esta bajo el raton se distinguen, y las dos en
   gris: el color se reserva para lo que hay que mirar, y aqui no hace
   falta. Antes usaban el MISMO gris y era imposible saber cual estaba
   marcada — al pasar el raton por encima de cualquier otra, las dos se
   veian igual. La diferencia la hacen ahora dos cosas a la vez: la
   elegida va un tono mas honda y en negrita. */
.combo-option.selected {
  background: #eceeee;
}
.combo-option.selected .combo-opt-text {
  font-weight: 700;
  color: #141d1c;
}

.combo-opt-text {
  flex: 1;
  /* En caja alta y con peso 500 la lista parecia un menu de sistema y
     ademas rompia dos reglas del proyecto: aqui solo se usan los pesos
     400 y 700, y nada de cuerpo por debajo de 15px en los paneles.
     En caja normal y a 15px se lee de un vistazo y de lejos. */
  font-size: 15px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--c-primary);
  letter-spacing: 0;
}

/* Encabezado de grupo en el combo (subcategoria) */
.combo-group-header {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--c-accent);
  text-transform: uppercase;
  border-top: 1px solid var(--c-border);
  /* Aire por arriba y por abajo del filete: el encabezado tiene que
     separar dos grupos, y pegado al de arriba parecia el pie del grupo
     anterior en vez de la cabecera del siguiente. */
  margin: 8px 0 1px;
  padding: 10px 14px 5px;
  pointer-events: none;
  user-select: none;
}
.combo-group-header:first-child {
  border-top: none;
  margin-top: 0;
}

/* Opciones bloqueadas: grises y con candado al hover */
.combo-option.is-locked { opacity: .55; }
.combo-option.is-locked .combo-opt-text { color: var(--c-muted); }
.combo-option.is-locked::after {
  content: '';
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='11' width='16' height='10' rx='2'/><path d='M8 11V7a4 4 0 0 1 8 0v4'/></svg>") no-repeat center / contain;
  color: var(--c-muted);
  margin-left: 8px;
  flex-shrink: 0;
}

/* Badge 'Gratis' al costado de las 3 opciones sin costo */
.combo-opt-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #8fc72e;
  color: #ffffff;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-left: 10px;
  flex-shrink: 0;
}

/* Badges */
.credits-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  background: var(--c-surface-dark);
  color: #ffffff;
  font-size: var(--fs-sm);
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.credits-badge > svg { display: none; }
.credits-badge svg { display: inline-block; }
.credits-success { background: var(--c-surface-dark); color: #ffffff; }
.credits-badge.is-premium {
  background: #f5f5f5;
  color: #141d1c;
}

/* Combo group header (separador de módulos en dropdown) */
.combo-group {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--c-muted);
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 10px 12px 4px;
  pointer-events: none;
}
.combo-group:first-child { padding-top: 4px; }

/* Status chip */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-empty { background: #f1f3f6; color: #6b7785; }
.status-empty .status-dot { background: #9aa3ae; }
.status-ok { background: #f5f5f5; color: #141d1c; }
.status-ok .status-dot { background: var(--c-surface-dark); animation: pulse 1.5s ease-in-out infinite; }
.status-loading { background: #f5f5f5; color: #141d1c; }
.status-loading .status-dot { background: var(--c-surface-dark); animation: pulse 1s ease-in-out infinite; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ============================================================
   Toasts — notificaciones flotantes (esquina inferior derecha)
============================================================ */
.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: calc(100vw - 40px);
}
.toast {
  pointer-events: auto;
  min-width: 260px;
  max-width: 380px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-accent);
  border-radius: 12px;
  box-shadow: none;
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-sm);
  color: var(--c-primary);
  animation: toast-in .28s cubic-bezier(.2, .8, .2, 1);
}
.toast.toast-leaving { animation: toast-out .22s ease forwards; }
.toast-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-accent);
}
.toast-icon svg { width: 18px; height: 18px; }
.toast-body { flex: 1; line-height: 1.45; }
.toast-body strong { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: 1px; }
.toast-body span { color: var(--c-muted); font-size: var(--fs-sm); }
.toast-close {
  width: 22px; height: 22px;
  background: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--c-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toast-close:hover { background: var(--c-bg); color: var(--c-primary); }
.toast-close svg { width: 14px; height: 14px; }

.toast.toast-success { border-left-color: var(--c-success); }
.toast.toast-success .toast-icon { color: var(--c-success); }
.toast.toast-error { border-left-color: var(--c-danger); }
.toast.toast-error .toast-icon { color: var(--c-danger); }
.toast.toast-warning { border-left-color: var(--c-warning); }
.toast.toast-warning .toast-icon { color: var(--c-warning); }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes toast-out {
  to { opacity: 0; transform: translateX(18px); }
}

/* ============================================================
   Skeletons — placeholders animados de carga
============================================================ */
.skeleton {
  background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: skeleton-pulse 1.3s ease-in-out infinite;
  border-radius: 8px;
  display: block;
}
.skeleton-line { height: 12px; margin-bottom: 8px; }
.skeleton-line.sk-short { width: 40%; }
.skeleton-line.sk-medium { width: 70%; }
.skeleton-line.sk-full { width: 100%; }
.skeleton-block { height: 120px; border-radius: 12px; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
@keyframes skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   Empty states — pantallas vacías con icono + mensaje
============================================================ */
.empty-state {
  text-align: center;
  padding: 40px 24px;
  color: var(--c-muted);
}
.empty-state h3 {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--c-primary);
  margin: 0 0 6px;
}
.empty-state p {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin: 0 auto 18px;
  max-width: 360px;
  line-height: 1.5;
}
.empty-state .btn { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }

/* ============================================================
   Input validation — estados visuales
============================================================ */
.input.is-valid,
.input.is-invalid {
  border-color: var(--c-border) !important;
  box-shadow: none !important;
}
.field-hint {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  margin-top: 6px;
  min-height: 16px;
}
.field-hint.is-error { color: var(--c-danger); }
.field-hint.is-ok { color: var(--c-success); }

@media (min-width: 768px) {
  .input, .textarea, .select { font-size: var(--fs-sm); padding: 9px 12px; }
  .btn { flex: 0 0 auto; padding: 10px 18px; min-height: auto; font-size: var(--fs-sm); }
}
@media (max-width: 480px) {
  .grid { grid-template-columns: 1fr; }
  .form-actions .btn { flex: 1 1 100%; }
  .toast-container { left: 12px; right: 12px; bottom: 12px; }
  .toast { min-width: 0; max-width: none; }
}
@media (max-width: 640px) {
  .combo-text { font-size: var(--fs-sm); }
  /* En celular no baja de 15px: es el cuerpo del cuadro flotante y se
     lee con el telefono en la mano. */
  .combo-opt-text { font-size: 15px; }
}

/* ==========================================================
   Botón flotante de WhatsApp — soporte al cliente
   Píldora con ícono oficial + texto, pulso sutil de atención
========================================================== */
.wa-fab {
  position: fixed;
  bottom: 80px;
  right: 24px;
  z-index: 450;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Verde WhatsApp (#25D366). Es un color semantico, no de la paleta de
     marca: identifica el canal de un vistazo, igual que el amarillo de la
     cartera. El logo va en blanco, como en la propia app de WhatsApp. */
  background: #25D366;
  color: #ffffff;
  border: none;
  border-radius: 50%;
  text-decoration: none;
  /* Solo el fondo cambia. El boton NO se mueve: footer.js llego a
     desplazarlo para esquivar el pie y eso se retiro, asi que aqui no
     hay ningun `transform` que suavizar. Si se vuelve a anadir movimiento
     habra que reponer tambien su transicion. */
  transition: background var(--t-fast);
}
.wa-fab:hover { background: #1da851; }
.wa-fab-icon {
  width: 33px;
  height: 33px;
  flex-shrink: 0;
}

/* ── Lista de opciones del FAB ──
   Se abre encima del botón. Cada opción escribe al bot pidiendo ya
   esa opción, para que el cliente no tenga que elegir dos veces.
   En claro, con los mismos tokens que el resto de la interfaz. */
.wa-menu {
  position: fixed;
  bottom: 152px;
  right: 24px;
  z-index: 451;
  width: 268px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
}
.wa-menu[hidden] { display: none; }

.wa-menu-titulo {
  margin: 0;
  padding: 8px 10px 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Lista limpia: sin discos de colores, sin fondos por fila. Las opciones se
   separan con un filete de un pixel y el color aparece solo al pasar por
   encima. Antes cada fila llevaba un circulo verde numerado y el conjunto
   parecia un teclado, no un menu de ayuda. */
.wa-menu-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 10px;
  border-radius: 8px;
  background: transparent;
  color: var(--c-text);
  font-size: var(--fs-sm);
  font-weight: 400;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.wa-menu-opcion + .wa-menu-opcion {
  border-top: 1px solid var(--c-border);
  border-radius: 8px;
}
.wa-menu-opcion:hover { background: var(--c-bg); }

.wa-menu-txt { flex: 1; min-width: 0; }

.wa-menu-flecha {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--c-muted);
  opacity: .5;
  transition: opacity var(--t-fast), transform var(--t-fast);
}
.wa-menu-opcion:hover .wa-menu-flecha {
  opacity: 1;
  transform: translateX(2px);
}

/* La ultima lleva a una persona: se marca en negrita, no con otro color. */
.wa-menu-opcion.es-asesor .wa-menu-txt { font-weight: 700; }

/* En escritorio el menú es un desplegable pegado al botón: no lleva fondo
   ni botón de cerrar, que se sale con un clic fuera o con Escape. */
.wa-backdrop,
.wa-menu-cerrar,
.wa-menu-asa { display: none; }

@media (max-width: 768px) {
  .wa-fab {
    width: 59px;
    height: 59px;
    /* Sube, y sube CONTANDO la barra del sistema.

       Estaba en 16px secos. Ese valor venia de alinearlo con el CTA
       «Obten tu reporte», que ya no flota —vive dentro de la caja de
       busqueda—, asi que no queda nada con lo que alinearse. Y a 16px
       el boton caia sobre la barra de gestos de los telefonos sin
       marco: se veia cortado por abajo.

       `env(safe-area-inset-bottom)` vale lo que mida esa barra en cada
       telefono y 0 en los que no la tienen, asi que la separacion real
       es la misma en todos.

       Los 44px no son capricho. Un elemento `fixed` se coloca contra el
       viewport de MAQUETA, no contra lo que se ve: en el movil ese
       viewport se mete por debajo de la barra del navegador, asi que
       una separacion corta deja el boton medio tapado aunque la cuenta
       parezca correcta. El `env` cubre la barra de gestos del sistema y
       estos 44px, la del navegador. Han estado en 16 y en 26 y en las
       dos el circulo salia recortado; no bajarlos otra vez. */
    bottom: calc(44px + env(safe-area-inset-bottom));
    right: 16px;
  }
  .wa-fab-icon { width: 30px; height: 30px; }

  /* ── En móvil el menú deja de ser un desplegable y pasa a ser un modal:
     hoja inferior sobre el contenido desenfocado. En una pantalla de
     teléfono un desplegable colgando del botón queda apretado y se toca
     mal; a pantalla completa las seis opciones se leen y se pulsan bien. */
  .wa-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 460;
    background: rgba(20, 29, 28, .45);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
  }
  .wa-backdrop[hidden] { display: none; }

  .wa-menu {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    z-index: 470;
    gap: 4px;
    padding: 4px 12px 12px;
    border-radius: 14px;
  }

  /* Asa superior: la señal de "esto se cierra deslizando" que la gente ya
     reconoce de las hojas inferiores del sistema. */
  .wa-menu-asa {
    display: block;
    width: 38px;
    height: 4px;
    margin: 8px auto 4px;
    border-radius: 2px;
    background: var(--c-border);
  }

  .wa-menu-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0 6px;
  }
  .wa-menu-titulo { flex: 1; padding: 0; font-size: 15px; }

  .wa-menu-cerrar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }

  /* Objetivos de toque más grandes: en el teléfono se pulsa con el pulgar. */
  .wa-menu-opcion {
    padding: 13px 12px;
    font-size: 15px;
    border-radius: 12px;
  }
  .wa-menu-flecha { width: 16px; height: 16px; }

  /* Con el modal abierto no se scrollea lo de detrás. */
  body.wa-abierto { overflow: hidden; }
}