/* ==========================================================
   Soli · asistente de WhatsApp (botón "Trámites a un clic")
   Reemplaza la imagen boton-gestio.png del menú #gestiones_rapidas.
   Comportamiento en soli.js. Medidas propuestas por Exus:
   - Escritorio: entrada 220x320, reposo 112x184
   - Celular (<768px): entrada 140x204, reposo 84x138
   ========================================================== */

#gestiones_rapidas {
  --soli-w: 112px;
  --soli-h: 184px;
  --soli-r: 24px;
  --soli-b: 12px;
  right: var(--soli-r);
  bottom: var(--soli-b);
  width: var(--soli-w);
  height: var(--soli-h);
  transition: opacity 0.45s ease, visibility 0s linear 0s;
}

/* Mientras corre la entrada el botón de reposo espera oculto.
   Si soli.js no llega a cargar, la animación lo muestra a los 12 s. */
#gestiones_rapidas.soli-espera {
  opacity: 0;
  visibility: hidden;
  animation: soliRespaldo 0s linear 12s forwards;
}
@keyframes soliRespaldo {
  to { opacity: 1; visibility: visible; }
}

/* --- Botón Soli (reposo) --- */
#gestiones_rapidas > span#nav-home,
#gestiones_rapidas #nav-ck:checked ~ span#nav-home {
  top: auto;
  left: auto;
  right: 0;
  bottom: 0;
  width: var(--soli-w);
  height: var(--soli-h);
  border-radius: 0;
  background: none;
  box-shadow: none;
  z-index: 10000000;
}
#gestiones_rapidas #nav-home label#nav-open,
#gestiones_rapidas #nav-ck ~ #nav-home label#nav-open {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: none;
  border-radius: 16px;
  margin: 0;
}
#gestiones_rapidas #nav-home img,
#gestiones_rapidas #nav-home video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
}
#gestiones_rapidas #nav-home .soli-clip {
  visibility: hidden;
  pointer-events: none;
}
#gestiones_rapidas #nav-open.soli-celular-on .soli-clip { visibility: visible; }
#gestiones_rapidas #nav-open.soli-celular-on .soli-reposo { visibility: hidden; }

#gestiones_rapidas #nav-open:focus { outline: none; }
#gestiones_rapidas #nav-open:focus-visible,
#gestiones_rapidas > span a:focus-visible,
#soli-min:focus-visible,
#soli-pestana:focus-visible,
#soli-globo a:focus-visible,
#soli-globo button:focus-visible {
  outline: 3px solid #1d1d1b;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #fff;
}

/* --- Opciones del menú (Pagos, PQRs, Chat) como tarjetas de Soli ---
   Columna del mismo alto que Soli (3 tarjetas + 2 espacios = --soli-h),
   en arco suave siguiendo su silueta. Fondo blanco, borde naranja, texto
   oscuro (contraste AA). El ícono va en la placa frontal de un casco SVG. */
#gestiones_rapidas {
  --soli-card-h: 52px;
  --soli-card-gap: 10px;
  --soli-card-w: 176px;
  --soli-card-top: -26px;
}
.soli-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
#gestiones_rapidas > span#nav-up,
#gestiones_rapidas > span#nav-down,
#gestiones_rapidas > span#nav-left {
  left: auto;
  width: var(--soli-card-w);
  height: var(--soli-card-h);
  border-radius: 18px;
  background: #fff;
  border: 2px solid var(--zapote, #e37300);
  box-shadow: 0 10px 24px rgba(40, 20, 0, 0.22), 0 2px 4px rgba(40, 20, 0, 0.12);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateX(22px) scale(0.9);
  transform-origin: right center;
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.2s ease,
    background-color 0.15s ease, visibility 0s linear 0.32s;
}
/* Columna alineada junto a Soli, a la altura de cabeza y torso: Pagos, PQRs, WhatsApp */
#gestiones_rapidas > span#nav-up {
  top: var(--soli-card-top);
  right: calc(100% + 6px);
}
#gestiones_rapidas > span#nav-left {
  top: calc(var(--soli-card-top) + var(--soli-card-h) + var(--soli-card-gap));
  right: calc(100% + 6px);
}
#gestiones_rapidas > span#nav-down {
  top: calc(var(--soli-card-top) + 2 * (var(--soli-card-h) + var(--soli-card-gap)));
  right: calc(100% + 6px);
}
#gestiones_rapidas > span#nav-up a,
#gestiones_rapidas > span#nav-down a,
#gestiones_rapidas > span#nav-left a {
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 0 14px 0 10px;
  border-radius: 16px;
  color: #1d1d1b;
  font-family: Montserrat, Roboto, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}
#gestiones_rapidas > span#nav-up:hover,
#gestiones_rapidas > span#nav-down:hover,
#gestiones_rapidas > span#nav-left:hover { background: #fff4e8; }

#gestiones_rapidas .soli-casco {
  flex: none;
  width: 54px;
  height: 44px;
  margin: 0;
  overflow: visible;
  filter: drop-shadow(0 3px 3px rgba(80, 35, 0, 0.18));
  color: #b85300;
  transition: transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}
#gestiones_rapidas > span a:hover .soli-casco,
#gestiones_rapidas > span a:focus-visible .soli-casco { transform: rotate(-8deg) translateY(-2px); }

#gestiones_rapidas #nav-ck:checked ~ span#nav-up,
#gestiones_rapidas #nav-ck:checked ~ span#nav-down,
#gestiones_rapidas #nav-ck:checked ~ span#nav-left {
  opacity: 1;
  visibility: visible;
  transform: none;
}
#gestiones_rapidas #nav-ck:checked ~ span#nav-down { transition-delay: 0s; }
#gestiones_rapidas #nav-ck:checked ~ span#nav-left { transition-delay: 0.06s; }
#gestiones_rapidas #nav-ck:checked ~ span#nav-up { transition-delay: 0.12s; }

/* --- Minimizar (celulares y tabletas) --- */
#soli-min,
#soli-pestana { display: none; }

#soli-min {
  position: absolute;
  top: -4px;
  left: -10px;
  z-index: 10000001;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #1d1d1b;
  color: #fff;
  font: 700 18px/1 Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#soli-min::before {
  /* área táctil de 44 px sin agrandar el círculo */
  content: "";
  position: absolute;
  inset: -7px;
}
#nav-ck:checked ~ #soli-min { display: none !important; }

#soli-pestana {
  position: fixed;
  right: 0;
  bottom: 96px;
  z-index: 999999;
  width: 48px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 28px 0 0 28px;
  background: var(--zapote, #e37300);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
#soli-pestana img {
  display: block;
  width: 64px;
  height: 105px;
  max-width: none;
  margin: 2px 0 0 2px;
  object-fit: cover;
  object-position: center top;
}
html.soli-minimizada #gestiones_rapidas { display: none; }
html.soli-minimizada #soli-pestana { display: block; }

/* --- Entrada (asomándose desde el borde) --- */
#soli-entrada {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 999998;
  width: 220px;
  height: 320px;
  cursor: pointer;
  opacity: 1;
  transition: opacity 0.4s ease;
}
#soli-entrada.soli-sale { opacity: 0; pointer-events: none; }
#soli-entrada video,
#soli-entrada img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: right bottom;
}

/* --- Globo de mensaje --- */
#soli-globo {
  position: fixed;
  z-index: 1000000;
  right: 144px;
  bottom: 124px;
  max-width: 230px;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 8px 12px 16px;
  background: #fff;
  color: #1d1d1b;
  border: 2px solid var(--zapote, #e37300);
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  font-family: Montserrat, Roboto, Arial, sans-serif;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.96);
  transform-origin: right bottom;
  transition: opacity 0.3s ease, transform 0.3s ease, right 0.4s ease,
    bottom 0.4s ease, visibility 0s linear 0.3s;
}
#soli-globo.soli-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
#soli-globo.soli-en-entrada { right: 196px; bottom: 214px; }
#soli-globo a {
  color: #1d1d1b;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}
#soli-globo a:hover strong { text-decoration: underline; }
#soli-globo strong { color: #a34f00; font-weight: 700; }
#soli-globo button {
  flex: none;
  width: 28px;
  height: 28px;
  margin: -6px -2px 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #545454;
  font: 400 22px/28px Arial, sans-serif;
  cursor: pointer;
}
#soli-globo button:hover { background: #f1f1f1; color: #1d1d1b; }
.soli-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Celular --- */
@media (max-width: 767px) {
  #gestiones_rapidas {
    --soli-w: 84px;
    --soli-h: 138px;
    --soli-r: 12px;
    --soli-b: 10px;
    --soli-card-h: 42px;
    --soli-card-gap: 8px;
    --soli-card-w: 160px;
    --soli-card-top: -24px;
  }
  #gestiones_rapidas > span#nav-up a,
  #gestiones_rapidas > span#nav-down a,
  #gestiones_rapidas > span#nav-left a { font-size: 14px; gap: 6px; padding: 0 10px 0 7px; border-radius: 14px; }
  #gestiones_rapidas > span#nav-up,
  #gestiones_rapidas > span#nav-down,
  #gestiones_rapidas > span#nav-left { border-radius: 16px; }
  #gestiones_rapidas .soli-casco { width: 44px; height: 36px; }
  #gestiones_rapidas > span#nav-up,
  #gestiones_rapidas > span#nav-left,
  #gestiones_rapidas > span#nav-down { right: calc(100% + 4px); }

  #soli-entrada { width: 140px; height: 204px; }
  #soli-globo { right: 102px; bottom: 90px; max-width: 180px; padding: 10px 6px 10px 12px; }
  #soli-globo.soli-en-entrada { right: 134px; bottom: 140px; }
  #soli-globo a { font-size: 14px; }
}

/* Celulares y tabletas: se puede minimizar */
@media (max-width: 1199px), (hover: none) and (pointer: coarse) {
  #soli-min { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  #gestiones_rapidas,
  #gestiones_rapidas > span,
  #soli-entrada,
  #soli-globo {
    transition: none !important;
  }
}