/* =====================================================================
   Librería Uno · Botón flotante de WhatsApp · uno-wa.css · v1.0
   ---------------------------------------------------------------------
   Prefijo .uno-wa-. Se encola desde el tema hijo (functions-wa.php).
   Convive con uno-estados.css: comparte --uno-fijo-abajo, --uno-seguro-abajo
   y la clase html.uno-panel-abierto. Si ese archivo no está, alcanza con este.
   ===================================================================== */

/* @seccion tokens ---------------------------------------------------- */
:root{
  --uno-wa-verde:#25D366;        /* verde de WhatsApp: solo en el círculo, para que se reconozca al instante */
  --uno-wa-verde-hover:#1EBE5A;
  --uno-wa-aro:#F4EFE4;          /* aro «papel»: separa el botón de cualquier fondo, también del footer verde */
  --uno-wa-cinta:#8C2F39;        /* la cinta marcadora de UNO: el detalle de marca */
  --uno-wa-cinta-borde:#F4EFE4;
  --uno-wa-tam:56px;             /* celular: mínimo 56 px, a mano del pulgar */
  --uno-wa-icono:30px;
  --uno-wa-aro-ancho:3px;
  --uno-wa-margen:16px;          /* separación del borde inferior (o de la barra fija) */
  --uno-wa-lado:16px;            /* separación del borde derecho */
  --uno-wa-hueco:12px;           /* entre el botón y la burbuja o el panel */
  --uno-wa-panel-ancho:360px;
  --uno-wa-z:950;
  --uno-wa-abierto:#2E7D4F;      /* punto «respondemos ahora» */
  --uno-wa-cerrado:#8A6820;      /* punto «cerrado» */
  --uno-wa-sombra:0 8px 20px rgba(20,22,28,.14);
  --uno-wa-t:260ms; --uno-wa-t-rapida:160ms; --uno-wa-curva:cubic-bezier(.2,.6,.2,1);
  /* compartidas con uno-estados.css (mismo nombre, mismo valor por defecto) */
  --uno-fijo-abajo:0px;
  --uno-seguro-abajo:env(safe-area-inset-bottom,0px);
  --uno-wa-evitar:0px;           /* lo actualiza uno-wa.js cuando la franja legal del footer entra en pantalla */
}
@media (min-width:768px){:root{--uno-wa-tam:60px;--uno-wa-icono:32px;--uno-wa-margen:24px;--uno-wa-lado:24px}}

/* @seccion boton ----------------------------------------------------- */
/* Siempre por encima de lo que ocupe el fondo de la pantalla: área segura del iPhone,
   barras fijas (producto, tienda, carrito) o la franja legal del footer. Gana la mayor. */
.uno-wa{
  --_abajo:max(calc(var(--uno-seguro-abajo) + var(--uno-wa-margen)),calc(var(--uno-fijo-abajo) + var(--uno-wa-margen)),calc(var(--uno-wa-evitar) + var(--uno-wa-margen)));
  position:fixed;right:calc(var(--uno-wa-lado) + env(safe-area-inset-right,0px));bottom:var(--_abajo);z-index:var(--uno-wa-z);
  display:flex;flex-direction:column;align-items:flex-end;gap:var(--uno-wa-hueco);
  transition:bottom var(--uno-wa-t) var(--uno-wa-curva),opacity var(--uno-wa-t-rapida),transform var(--uno-wa-t) var(--uno-wa-curva),visibility 0s;
  font-family:"Inter",system-ui,sans-serif}
.uno-wa__boton{position:relative;display:grid;place-items:center;width:var(--uno-wa-tam);height:var(--uno-wa-tam);padding:0;border:var(--uno-wa-aro-ancho) solid var(--uno-wa-aro);border-radius:50%;
  background:var(--uno-wa-verde);box-shadow:var(--uno-wa-sombra);cursor:pointer;
  transition:transform var(--uno-wa-t-rapida) var(--uno-wa-curva),background-color var(--uno-wa-t-rapida)}
.uno-wa__boton:hover{background:var(--uno-wa-verde-hover);transform:translateY(-2px)}
.uno-wa__boton:active{transform:none;transition:none}
.uno-wa__boton:focus-visible{outline:2px solid var(--uno-wa-cinta);outline-offset:3px}
/* recuadro para el ícono oficial: se usa tal cual, sin recolorear ni deformar */
.uno-wa__icono{display:block;width:var(--uno-wa-icono);height:var(--uno-wa-icono)}
.uno-wa__icono img,.uno-wa__icono svg{display:block;width:100%;height:100%;object-fit:contain}
/* la cinta marcadora de UNO, metida en el borde de arriba como en un libro */
.uno-wa__cinta{position:absolute;top:-9px;right:calc(var(--uno-wa-tam) * .2);width:11px;height:26px;pointer-events:none;transform-origin:50% 0}
.uno-wa__cinta svg{display:block;width:100%;height:100%;overflow:visible}
.uno-wa__boton:hover .uno-wa__cinta{animation:uno-wa-cinta 1.2s ease-in-out infinite alternate}
@keyframes uno-wa-cinta{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
/* aparición: una sola vez, sin rebote */
.uno-wa.is-entrando{opacity:0;transform:translateY(8px)}
/* oculto: checkout, paneles abiertos, teclado del celular */
.uno-wa.is-oculto,html.uno-panel-abierto .uno-wa,html.uno-teclado-abierto .uno-wa{opacity:0;transform:translateY(8px);visibility:hidden;pointer-events:none;transition:opacity var(--uno-wa-t-rapida),transform var(--uno-wa-t-rapida),visibility 0s var(--uno-wa-t-rapida)}
@media (max-width:767px){html.uno-wa-abierto .uno-wa{opacity:0;visibility:hidden;pointer-events:none}}

/* @seccion burbuja --------------------------------------------------- */
/* Una vez por visita. Toda la burbuja abre el panel; la cruz la cierra para esa visita. */
.uno-wa__burbuja{position:relative;display:flex;align-items:center;gap:0;max-width:min(300px,calc(100vw - var(--uno-wa-lado) * 2));padding:4px 4px 4px 0;
  background:#FFFFFF;border:1px solid #E2DED5;border-radius:16px;box-shadow:var(--uno-wa-sombra);
  opacity:0;transform:translateY(8px);transition:opacity var(--uno-wa-t) var(--uno-wa-curva),transform var(--uno-wa-t) var(--uno-wa-curva)}
.uno-wa__burbuja.is-visible{opacity:1;transform:none}
.uno-wa__burbuja[hidden]{display:none}
.uno-wa__burbuja::after{content:"";position:absolute;right:calc(var(--uno-wa-tam) / 2 - 7px);bottom:-7px;width:12px;height:12px;background:#FFFFFF;border-right:1px solid #E2DED5;border-bottom:1px solid #E2DED5;transform:rotate(45deg);border-radius:0 0 3px 0}
.uno-wa__burbuja-texto{flex:1;min-height:44px;padding:8px 4px 8px 16px;border:0;background:none;text-align:left;font:500 15px/1.35 "Inter",system-ui,sans-serif;color:#111111;cursor:pointer;text-wrap:pretty}
.uno-wa__burbuja-cerrar{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:none;color:#5C554A;cursor:pointer}
.uno-wa__burbuja-cerrar:hover{background:#F6F4F0;color:#111111}
.uno-wa__burbuja button:focus-visible{outline:2px solid #8C2F39;outline-offset:-2px}

/* @seccion panel ----------------------------------------------------- */
/* Celular: hoja que sube desde abajo, sobre el área segura. Escritorio: tarjeta sobre el botón. */
.uno-wa-fondo{position:fixed;inset:0;z-index:calc(var(--uno-wa-z) + 1);background:rgba(13,59,30,.55);opacity:0;transition:opacity var(--uno-wa-t) var(--uno-wa-curva)}
.uno-wa-fondo.is-visible{opacity:1}
.uno-wa-fondo[hidden],.uno-wa-panel[hidden]{display:none}
.uno-wa-panel{position:fixed;z-index:calc(var(--uno-wa-z) + 2);left:0;right:0;bottom:0;box-sizing:border-box;max-height:88dvh;overflow:auto;overscroll-behavior:contain;
  padding-bottom:var(--uno-seguro-abajo);background:#FFFFFF;color:#111111;border-radius:24px 24px 0 0;box-shadow:var(--uno-wa-sombra);
  font:400 15px/1.5 "Inter",system-ui,sans-serif;transform:translateY(100%);transition:transform var(--uno-wa-t) var(--uno-wa-curva)}
.uno-wa-panel.is-visible{transform:none}
.uno-wa-panel__agarre{width:40px;height:4px;margin:10px auto 0;border-radius:999px;background:#E2DED5}
@media (min-width:768px){
  .uno-wa-fondo{display:none}
  .uno-wa-panel{left:auto;right:calc(var(--uno-wa-lado) + env(safe-area-inset-right,0px));width:var(--uno-wa-panel-ancho);max-height:min(560px,calc(100dvh - 120px));padding-bottom:0;border-radius:24px;
    bottom:calc(max(calc(var(--uno-seguro-abajo) + var(--uno-wa-margen)),calc(var(--uno-fijo-abajo) + var(--uno-wa-margen)),calc(var(--uno-wa-evitar) + var(--uno-wa-margen))) + var(--uno-wa-tam) + var(--uno-wa-hueco));
    border:1px solid #E2DED5;opacity:0;transform:translateY(8px);transform-origin:bottom right;transition:opacity var(--uno-wa-t) var(--uno-wa-curva),transform var(--uno-wa-t) var(--uno-wa-curva)}
  .uno-wa-panel.is-visible{opacity:1;transform:none}
  .uno-wa-panel__agarre{display:none}
}
.uno-wa-panel__cab{display:grid;grid-template-columns:48px minmax(0,1fr) 44px;gap:12px;align-items:center;padding:14px 8px 14px 20px;border-bottom:1px solid #E2DED5}
/* recuadro del avatar: foto del local (96 × 96) o UNO avatar */
.uno-wa-panel__avatar{display:block;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#123C2E}
.uno-wa-panel__avatar img{display:block;width:100%;height:100%;object-fit:cover}
.uno-wa-panel__avatar--uno{background:#F4EFE4;padding:6px}
.uno-wa-panel__avatar--uno img{object-fit:contain}
.uno-wa-panel__nombre{margin:0;font:600 17px/1.25 "Poppins",system-ui,sans-serif;color:#123C2E}
.uno-wa-panel__estado{display:flex;align-items:flex-start;gap:6px;margin:2px 0 0;font-size:13.5px;line-height:1.4;color:#5C554A;text-wrap:pretty}
.uno-wa-panel__punto{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--uno-wa-abierto)}
.uno-wa-panel[data-estado="cerrado"] .uno-wa-panel__punto{background:transparent;box-shadow:inset 0 0 0 2px var(--uno-wa-cerrado)}
.uno-wa-panel__cerrar{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:none;color:#5C554A;cursor:pointer}
.uno-wa-panel__cerrar:hover{background:#F6F4F0;color:#111111}
.uno-wa-panel__cuerpo{padding:16px 20px 20px}
.uno-wa-panel__intro{margin:0 0 12px;color:#5C554A;text-wrap:pretty}
.uno-wa-panel__opciones{display:grid;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.uno-wa-panel__opcion{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:10px 14px 10px 16px;border:1.5px solid #E2DED5;border-radius:12px;background:#FFFFFF;
  color:#123C2E;font:500 15px/1.35 "Inter",system-ui,sans-serif;text-decoration:none;transition:background-color var(--uno-wa-t-rapida),border-color var(--uno-wa-t-rapida)}
.uno-wa-panel__opcion:hover{background:#EAF0EC;border-color:#123C2E;color:#123C2E}
.uno-wa-panel__opcion--contexto{border-color:#123C2E}
.uno-wa-panel__opcion small{display:block;margin-top:2px;font-size:13px;color:#5C554A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px}
.uno-wa-panel__opcion svg{flex:none;width:18px;height:18px}
.uno-wa-panel a:focus-visible,.uno-wa-panel button:focus-visible{outline:2px solid #8C2F39;outline-offset:2px}
.uno-wa-panel__abrir{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:14px 20px;border-radius:10px;background:#8C2F39;color:#FFFFFF;
  font:600 15px/1 "Poppins",system-ui,sans-serif;letter-spacing:.01em;text-decoration:none;transition:background-color var(--uno-wa-t-rapida),transform var(--uno-wa-t-rapida)}
.uno-wa-panel__abrir:hover{background:#7A2832;color:#FFFFFF;transform:translateY(-2px)}
.uno-wa-panel__abrir svg{width:20px;height:20px}
.uno-wa-panel__pie{margin:12px 0 0;font-size:13px;line-height:1.5;color:#5C554A;text-align:left}
.uno-wa-panel__pie a{color:#8C2F39;font-weight:600}

/* @seccion movimiento ------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .uno-wa,.uno-wa *,.uno-wa-panel,.uno-wa-fondo{transition:none!important;animation:none!important}
}
html.uno-sin-animacion .uno-wa,html.uno-sin-animacion .uno-wa *,html.uno-sin-animacion .uno-wa-panel,html.uno-sin-animacion .uno-wa-fondo{transition:none!important;animation:none!important}