/* ==================================================================
   TECHI – Asistente virtual (plugin techi-asistente) · SISPPROTECH
   Toma los colores y la tipografía del tema si existen (--acento, --tinta,
   --f…); si no, usa los de SISPPROTECH que van aquí como respaldo.
   ================================================================== */
:root{
  --techi-acento:var(--acento, #5B2EE0);
  --techi-acento-hondo:var(--acento-hondo, #4220B0);
  --techi-acento-tinta:var(--acento-tinta, #F1ECFF);
  --techi-tinta:var(--tinta, #0A2138);
  --techi-tinta-2:var(--tinta-2, #3A4E63);
  --techi-papel:var(--papel, #FFFFFF);
  --techi-papel-2:var(--papel-2, #F3F5F8);
  --techi-regla:var(--regla, #0A2138);
  --techi-regla-suave:var(--regla-suave, rgba(10,33,56,0.16));
  --techi-amarillo:var(--amarillo, #FFC928);
  --techi-f:var(--f, 'Archivo', 'Arial Narrow', Arial, sans-serif);
  --techi-semi:var(--semi, 85%);
  --techi-angosta:var(--angosta, 68%);
}
/* Texto solo para lectores de pantalla (por si el tema no trae .sr-only) */
.techi-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.techi button,.techi input{font-family:var(--techi-f);}
.techi *,.techi *::before,.techi *::after,.techi-visor,.techi-visor *{box-sizing:border-box;}
.techi p,.techi h2,.techi ol,.techi figure{margin:0;}
.techi ol{padding:0;}


.techi{position:fixed;right:20px;bottom:20px;z-index:70;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;}
.techi > *{pointer-events:auto;}

/* ---------- Lanzador ---------- */
.techi-lanzador{display:inline-flex;align-items:center;gap:12px;background:var(--techi-papel);color:var(--techi-tinta);border:1.5px solid var(--techi-tinta);border-radius:4px;padding:6px 16px 6px 6px;font-family:var(--techi-f);cursor:pointer;box-shadow:0 6px 18px rgba(10,33,56,0.16);transition:border-color .15s, background-color .15s;}
.techi-lanzador img{width:44px;height:44px;object-fit:cover;object-position:50% 20%;border-radius:50%;background:var(--techi-acento-tinta);}
.techi-lanzador-txt{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15;}
.techi-lanzador-txt strong{font-size:16px;font-weight:700;color:var(--techi-tinta);}
.techi-lanzador-txt small{font-size:12.5px;font-weight:500;color:var(--techi-tinta-2);}
.techi-lanzador:hover{border-color:var(--techi-acento);background:var(--techi-acento-tinta);}
.techi.is-chat .techi-lanzador{border-color:var(--techi-acento);}

/* ---------- Asistente flotante ---------- */
.techi-asoma{position:absolute;right:-4px;bottom:66px;width:max-content;max-width:calc(100vw - 28px);display:flex;align-items:flex-end;opacity:0;transform:translateY(12px);transition:opacity .25s ease, transform .3s cubic-bezier(0.22,1,0.36,1);}
.techi-asoma.is-visible{opacity:1;transform:translateY(0);}
.techi-asoma[hidden]{display:none;}
.techi-cuerpo{display:block;height:168px;width:auto;margin-left:-6px;}

.techi-globo{position:relative;flex:none;width:320px;max-width:320px;background:var(--techi-papel);border:1.5px solid var(--techi-tinta);padding:14px 16px 16px;margin-bottom:64px;box-shadow:0 10px 26px rgba(10,33,56,0.14);}
.techi-globo-quien{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--techi-tinta-2);padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--techi-regla-suave);padding-right:28px;}
.techi-globo-quien img{width:28px;height:28px;object-fit:cover;object-position:50% 20%;border-radius:50%;background:var(--techi-acento-tinta);}
.techi-globo-quien strong{color:var(--techi-tinta);font-weight:700;}
.techi-globo-txt{font-size:16px;line-height:1.45;color:var(--techi-tinta);margin-bottom:14px;}
.techi-globo-acciones{display:flex;flex-wrap:wrap;gap:8px;}
.techi-globo-cerrar{position:absolute;top:8px;right:8px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--techi-tinta-2);cursor:pointer;border-radius:4px;}
.techi-globo-cerrar:hover{background:var(--techi-papel-2);color:var(--techi-tinta);}
.techi-globo-cerrar svg,.techi-chat-cerrar svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;}

/* ---------- Botones de respuesta ---------- */
.techi-opcion{font-family:var(--techi-f);font-weight:600;font-size:16px;line-height:1.2;color:var(--techi-tinta);background:var(--techi-papel);border:1.5px solid var(--techi-regla-suave);border-radius:4px;padding:9px 14px;cursor:pointer;text-align:left;transition:border-color .15s, background-color .15s;}
.techi-opcion:hover{border-color:var(--techi-acento);background:var(--techi-acento-tinta);}
.techi-opcion.is-principal{background:var(--techi-acento);border-color:var(--techi-acento);color:#fff;}
.techi-opcion.is-principal:hover{background:var(--techi-acento-hondo);border-color:var(--techi-acento-hondo);}

/* ---------- Chat ---------- */
.techi-chat{padding:0;position:fixed;right:20px;bottom:90px;width:400px;height:min(640px, calc(100vh - 120px));background:var(--techi-papel);border:1.5px solid var(--techi-tinta);display:flex;flex-direction:column;box-shadow:0 18px 44px rgba(10,33,56,0.22);animation:techi-abrir .22s ease-out;}
.techi-chat[hidden]{display:none;}
@keyframes techi-abrir{0%{opacity:0;transform:translateY(8px);}100%{opacity:1;transform:none;}}
.techi-chat-head{display:flex;align-items:center;gap:12px;background:var(--techi-acento);color:#fff;padding:12px 12px 12px 14px;}
.techi-chat-avatar{width:40px;height:40px;object-fit:cover;object-position:50% 20%;border-radius:50%;background:var(--techi-acento-tinta);border:2px solid #fff;flex-shrink:0;}
.techi-chat-quien{flex:1;min-width:0;line-height:1.2;}
.techi-chat-quien h2{color:#fff;font-weight:800;font-stretch:var(--techi-semi);font-size:1.1875rem;line-height:1.1;letter-spacing:0.02em;}
.techi-chat-quien span{font-size:12.5px;opacity:0.9;}
.techi-chat-reiniciar{background:transparent;border:1px solid rgba(255,255,255,0.55);color:#fff;font-family:var(--techi-f);font-size:12.5px;font-weight:600;border-radius:4px;cursor:pointer;padding:7px 10px;}
.techi-chat-reiniciar:hover,.techi-chat-cerrar:hover{background:rgba(255,255,255,0.14);}
.techi-chat-cerrar{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.55);border-radius:4px;cursor:pointer;flex-shrink:0;}

.techi-mensajes{list-style:none;flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;background:var(--techi-papel-2);overscroll-behavior:contain;}
.techi-msg{display:flex;align-items:flex-start;gap:10px;max-width:100%;}
.techi-msg--techi{animation:techi-msg .2s ease-out both;}
@keyframes techi-msg{0%{opacity:0;}100%{opacity:1;}}
/* La carita es un avatar pequeño: la emoción se nota sin robar la conversación */
.techi-cara{width:32px;height:32px;flex-shrink:0;object-fit:cover;object-position:50% 15%;border-radius:50%;background:var(--techi-papel);border:1px solid var(--techi-regla-suave);margin-top:2px;}
.techi-burbuja{background:var(--techi-papel);border:1px solid var(--techi-regla-suave);border-radius:4px;padding:10px 13px;font-size:16px;line-height:1.45;color:var(--techi-tinta);max-width:290px;overflow-wrap:anywhere;}
.techi-msg--yo{justify-content:flex-end;}
.techi-msg--yo .techi-burbuja{background:var(--techi-acento);border-color:var(--techi-acento);color:#fff;}
.techi-escribiendo .techi-burbuja{display:flex;gap:5px;align-items:center;padding:14px 14px;}
.techi-escribiendo .techi-burbuja span{width:6px;height:6px;border-radius:50%;background:var(--techi-tinta-2);animation:techi-punto 1.1s ease-in-out infinite;}
.techi-escribiendo .techi-burbuja span:nth-child(2){animation-delay:.15s;}
.techi-escribiendo .techi-burbuja span:nth-child(3){animation-delay:.3s;}
@keyframes techi-punto{0%,100%{opacity:0.25;}50%{opacity:0.9;}}

/* Mini-celda del folleto dentro del chat */
.techi-msg--tarjeta{padding-left:42px;}
.techi-tarjeta{background:var(--techi-papel);border:1.5px solid var(--techi-tinta);width:100%;max-width:290px;display:flex;flex-direction:column;}
.techi-tarjeta-top{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px 0;}
.techi-tarjeta-codigo{background:var(--techi-tinta);color:#fff;font-weight:700;font-stretch:var(--techi-semi);font-size:12.5px;letter-spacing:0.05em;padding:2px 7px;}
.techi-tarjeta-nivel{color:var(--techi-acento);font-weight:800;font-stretch:var(--techi-semi);text-transform:uppercase;font-size:12.5px;letter-spacing:0.04em;}
.techi-tarjeta-nombre{display:block;padding:8px 12px 4px;font-weight:800;font-stretch:var(--techi-semi);font-size:1.1875rem;line-height:1.15;color:var(--techi-tinta);}
.techi-tarjeta-nombre:hover{color:var(--techi-acento);text-decoration:underline;text-underline-offset:3px;}
.techi-tarjeta-incluye{list-style:none;padding:0 12px 10px;display:flex;flex-direction:column;gap:3px;}
.techi-tarjeta-incluye li{font-size:16px;line-height:1.35;color:var(--techi-tinta);padding-left:13px;position:relative;}
.techi-tarjeta-incluye li::before{content:'';position:absolute;left:0;top:0.5em;width:6px;height:6px;background:var(--techi-acento);}
.techi-tarjeta-precio{background:var(--techi-amarillo);border-top:1.5px solid var(--techi-tinta);padding:8px 12px;font-weight:800;font-stretch:var(--techi-angosta);font-size:1.1875rem;line-height:1.05;color:var(--techi-tinta);}
.techi-tarjeta-precio.is-cotizar{background:var(--techi-acento-tinta);color:var(--techi-acento);}

.techi-opciones{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px solid var(--techi-regla-suave);background:var(--techi-papel);}
.techi-opciones:empty{display:none;}
.techi-escribir{display:flex;gap:8px;padding:12px 12px 6px;border-top:1.5px solid var(--techi-tinta);background:var(--techi-papel);}
.techi-escribir input{flex:1;min-width:0;font-family:var(--techi-f);font-size:16px;color:var(--techi-tinta);border:1.5px solid var(--techi-regla-suave);border-radius:4px;padding:10px 12px;}
.techi-escribir input:focus{border-color:var(--techi-acento);}
.techi-escribir button{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--techi-acento);color:#fff;border:none;border-radius:4px;cursor:pointer;}
.techi-escribir button:hover{background:var(--techi-acento-hondo);}
.techi-escribir button svg{width:20px;height:20px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.techi-aviso{padding:4px 14px 10px;font-size:12.5px;line-height:1.4;color:var(--techi-tinta-2);background:var(--techi-papel);}

/* ---------- Navegación asistida: el paquete que TECHI señala ---------- */
.celda.techi-senalado{animation:techi-senal 1.2s ease-in-out 2;z-index:2;}
@keyframes techi-senal{0%,100%{box-shadow:inset 0 0 0 3px var(--techi-acento);}50%{box-shadow:inset 0 0 0 3px var(--techi-acento), 0 0 0 6px rgba(91,46,224,0.18);}}

/* ---------- Celular ---------- */
@media (max-width:600px){
  .techi{right:14px;bottom:14px;}
  .techi-lanzador{padding:4px;border-radius:50%;}
  .techi-lanzador img{width:52px;height:52px;}
  .techi-lanzador-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
  .techi-asoma{bottom:66px;right:-2px;}
  .techi-cuerpo{height:118px;margin-left:-8px;}
  .techi-globo{width:calc(100vw - 128px);max-width:calc(100vw - 128px);margin-bottom:40px;padding:12px 12px 14px;}
  .techi-chat{inset:0;width:auto;height:auto;border:none;box-shadow:none;}
  html.techi-activa{overflow:hidden;}
  .techi.is-chat .techi-lanzador{display:none;}
  html.celda-abierta .techi{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .techi-asoma,.techi-chat,.techi-msg--techi,.celda.techi-senalado{animation:none;transition:none;}
  .celda.techi-senalado{box-shadow:inset 0 0 0 3px var(--techi-acento);}
  .techi-escribiendo .techi-burbuja span{animation:none;opacity:0.6;}
}

/* ==================================================================
   CAPA DE VIDRIO Y SOMBRAS (pedido del cliente, oct 2026)
   Las ventanas y botones de TECHI son vidrio esmerilado; las figuras
   llevan sombra en capas. Si el navegador no soporta backdrop-filter,
   o el usuario pidió reducir transparencias, todo vuelve a sólido.
   ================================================================== */
:root{
  --vidrio:rgba(255,255,255,0.74);
  --vidrio-fuerte:rgba(255,255,255,0.86);
  --vidrio-borde:rgba(255,255,255,0.75);
  --vidrio-linea:rgba(10,33,56,0.14);
  --vidrio-acento:rgba(91,46,224,0.88);
  --vidrio-blur:blur(18px) saturate(1.5);
  --sombra-ventana:0 1px 0 rgba(255,255,255,0.6) inset, 0 0 0 1px var(--vidrio-linea), 0 24px 60px rgba(10,33,56,0.28), 0 6px 16px rgba(10,33,56,0.14);
}

/* Figuras: sombra en capas (contacto + ambiente) para que TECHI "pise" la página */
.techi-cuerpo{filter:drop-shadow(0 2px 2px rgba(10,33,56,0.25)) drop-shadow(0 12px 14px rgba(10,33,56,0.28)) drop-shadow(0 26px 30px rgba(10,33,56,0.22));}
.techi-lanzador img,.techi-globo-quien img,.techi-chat-avatar{box-shadow:0 2px 4px rgba(10,33,56,0.22), 0 8px 18px rgba(10,33,56,0.22);}
.techi-cara{box-shadow:0 2px 3px rgba(10,33,56,0.16), 0 6px 12px rgba(10,33,56,0.14);}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  /* Ventanas */
  .techi-globo,.techi-chat{background:var(--vidrio);-webkit-backdrop-filter:var(--vidrio-blur);backdrop-filter:var(--vidrio-blur);border:1px solid var(--vidrio-borde);border-radius:12px;box-shadow:var(--sombra-ventana);}
  .techi-chat{overflow:hidden;}
  .techi-chat-head{background:var(--vidrio-acento);-webkit-backdrop-filter:var(--vidrio-blur);backdrop-filter:var(--vidrio-blur);border-bottom:1px solid rgba(255,255,255,0.25);}
  .techi-mensajes{background:rgba(243,245,248,0.45);}
  .techi-burbuja{background:var(--vidrio-fuerte);border-color:rgba(255,255,255,0.9);box-shadow:0 0 0 1px var(--vidrio-linea), 0 4px 12px rgba(10,33,56,0.08);border-radius:10px;}
  .techi-msg--yo .techi-burbuja{background:var(--vidrio-acento);border-color:rgba(255,255,255,0.35);box-shadow:0 6px 16px rgba(91,46,224,0.25);}
  .techi-opciones,.techi-escribir,.techi-aviso{background:rgba(255,255,255,0.55);}
  .techi-escribir{border-top:1px solid var(--vidrio-linea);}
  .techi-escribir input{background:rgba(255,255,255,0.8);border-color:var(--vidrio-linea);border-radius:8px;}
  .techi-tarjeta{border-radius:8px;overflow:hidden;box-shadow:0 8px 20px rgba(10,33,56,0.12);}
  .techi-globo-quien{border-bottom-color:var(--vidrio-linea);}

  /* Botones */
  .techi-opcion{background:rgba(255,255,255,0.6);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4);border:1px solid rgba(255,255,255,0.85);border-radius:8px;box-shadow:0 0 0 1px var(--vidrio-linea), 0 4px 10px rgba(10,33,56,0.1), inset 0 1px 0 rgba(255,255,255,0.8);}
  .techi-opcion:hover{background:rgba(241,236,255,0.9);box-shadow:0 0 0 1px rgba(91,46,224,0.45), 0 6px 14px rgba(91,46,224,0.16), inset 0 1px 0 rgba(255,255,255,0.8);}
  .techi-opcion.is-principal{background:var(--vidrio-acento);border-color:rgba(255,255,255,0.35);box-shadow:0 6px 16px rgba(91,46,224,0.3), inset 0 1px 0 rgba(255,255,255,0.3);}
  .techi-opcion.is-principal:hover{background:rgba(66,32,176,0.92);}
  .techi-escribir button{background:var(--vidrio-acento);border-radius:8px;box-shadow:0 6px 16px rgba(91,46,224,0.3), inset 0 1px 0 rgba(255,255,255,0.3);}
  .techi-chat-reiniciar,.techi-chat-cerrar{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.45);border-radius:8px;}
  .techi-globo-cerrar{border-radius:8px;}

  /* Lanzador */
  .techi-lanzador{background:var(--vidrio);-webkit-backdrop-filter:var(--vidrio-blur);backdrop-filter:var(--vidrio-blur);border:1px solid var(--vidrio-borde);border-radius:14px;box-shadow:var(--sombra-ventana);}
  .techi-lanzador:hover{background:rgba(241,236,255,0.88);}
  .techi.is-chat .techi-lanzador{box-shadow:0 0 0 2px rgba(91,46,224,0.55), 0 18px 40px rgba(10,33,56,0.25);}
}

@media (max-width:600px){
  /* En celular el chat ocupa la pantalla: vidrio casi opaco para leer bien */
  .techi-chat{border-radius:0;background:rgba(255,255,255,0.94);}
  .techi-mensajes{background:rgba(243,245,248,0.85);}
  .techi-lanzador{border-radius:50%;}
}

@media (prefers-reduced-transparency:reduce){
  .techi-globo,.techi-chat,.techi-lanzador,.techi-opcion,.techi-burbuja{background:var(--techi-papel);-webkit-backdrop-filter:none;backdrop-filter:none;}
  .techi-chat-head,.techi-opcion.is-principal,.techi-msg--yo .techi-burbuja,.techi-escribir button{background:var(--techi-acento);}
  .techi-mensajes{background:var(--techi-papel-2);}
}

/* ==================================================================
   FOTOS REALES EN EL CHAT + VISOR A PANTALLA COMPLETA
   ================================================================== */
.techi-msg--galeria{padding-left:42px;}
.techi-galeria{margin:0;width:100%;max-width:290px;background:var(--techi-papel);border:1px solid var(--techi-regla-suave);border-radius:10px;padding:6px;box-shadow:0 0 0 1px rgba(255,255,255,0.6) inset, 0 6px 16px rgba(10,33,56,0.12);}
.techi-galeria-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.techi-galeria-rejilla--1{grid-template-columns:1fr;}
.techi-galeria-rejilla--3 .techi-galeria-foto:first-child{grid-column:span 2;aspect-ratio:2/1;}
.techi-galeria-foto{position:relative;display:block;padding:0;border:none;border-radius:6px;overflow:hidden;aspect-ratio:1;background:var(--techi-papel-2);cursor:zoom-in;}
.techi-galeria-foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.techi-galeria-foto:hover img{transform:scale(1.05);}
.techi-galeria-mas{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,33,56,0.62);color:#fff;font-weight:800;font-stretch:var(--techi-semi);font-size:1.5rem;}
.techi-galeria figcaption{font-size:12.5px;line-height:1.35;color:var(--techi-tinta-2);padding:7px 4px 3px;}
.techi-galeria figcaption strong{color:var(--techi-tinta);}

.techi-visor{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:56px 84px;background:rgba(5,15,30,0.92);}
.techi-visor[hidden]{display:none;}
.techi-visor-figura{margin:0;display:flex;flex-direction:column;align-items:center;max-width:100%;}
.techi-visor-figura img{max-width:min(92vw, 1100px);max-height:78vh;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 24px 60px rgba(0,0,0,0.5);}
.techi-visor-figura figcaption{margin-top:14px;max-width:60ch;text-align:center;color:rgba(255,255,255,0.9);font-size:16px;line-height:1.45;}
.techi-visor-figura figcaption strong{color:#fff;}
.techi-visor-nav,.techi-visor-cerrar{position:absolute;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.35);color:#fff;font-family:var(--techi-f);font-size:30px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .15s;}
.techi-visor-nav:hover,.techi-visor-cerrar:hover{background:rgba(255,255,255,0.28);}
.techi-visor-ant{left:20px;top:50%;transform:translateY(-50%);}
.techi-visor-sig{right:20px;top:50%;transform:translateY(-50%);}
.techi-visor-cerrar{top:16px;right:16px;font-size:28px;}

@media (max-width:600px){
  .techi-visor{padding:64px 12px 96px;}
  .techi-visor-figura img{max-width:100%;max-height:68vh;}
  .techi-visor-ant,.techi-visor-sig{top:auto;bottom:24px;transform:none;}
  .techi-visor-ant{left:calc(50% - 64px);}
  .techi-visor-sig{right:calc(50% - 64px);}
}
@media (prefers-reduced-motion:reduce){
  .techi-galeria-foto img{transition:none;}
  .techi-galeria-foto:hover img{transform:none;}
}

/* ==================================================================
   TARJETA CON PRODUCTO DE WOOCOMMERCE: foto, marca y precio de oferta
   ================================================================== */
.techi-tarjeta-foto{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--techi-papel);border-top:1px solid var(--techi-regla-suave);border-bottom:1px solid var(--techi-regla-suave);margin-top:8px;}
.techi-tarjeta-marca{background:#1A7A42;color:#fff;font-weight:800;font-stretch:var(--techi-semi);font-size:12.5px;letter-spacing:0.04em;padding:2px 7px;}
.techi-tarjeta-antes{font-weight:700;font-stretch:var(--techi-semi);color:var(--techi-tinta-2);margin-right:8px;font-size:16px;}
.techi-tarjeta-nota{font-size:12.5px;line-height:1.35;color:var(--techi-tinta-2);padding:6px 12px 10px;background:var(--techi-papel);}

/* ==================================================================
   SEGUROS: documentos, resumen, "Preparando tu cotización" y el asesor
   ================================================================== */
:root{--techi-verde:#1A7A42;--techi-verde-tinta:#E7F4EC;}

/* Documento que sube el cliente */
.techi-doc{display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px !important;}
.techi-doc-previa{width:56px;height:56px;object-fit:cover;border-radius:6px;flex-shrink:0;background:rgba(255,255,255,0.3);}
.techi-doc-icono{width:44px;height:44px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(255,255,255,0.22);font-weight:800;font-size:12.5px;letter-spacing:0.05em;}
.techi-doc-txt{display:flex;flex-direction:column;line-height:1.25;}
.techi-doc-txt small{font-size:12.5px;opacity:0.9;}
.techi-msg--archivo.is-subiendo .techi-doc{opacity:0.75;}
.techi-msg--archivo.is-subiendo .techi-doc-estado::after{content:'';display:inline-block;width:10px;height:10px;margin-left:6px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:techi-gira .8s linear infinite;vertical-align:-1px;}
@keyframes techi-gira{to{transform:rotate(360deg);}}

/* Resumen de datos antes de solicitar */
.techi-resumen{width:100%;max-width:290px;background:var(--techi-papel);border:1.5px solid var(--techi-tinta);border-radius:8px;overflow:hidden;}
.techi-resumen-titulo{background:var(--techi-tinta);color:#fff;font-weight:800;font-stretch:var(--techi-semi);font-size:16px;padding:8px 12px;letter-spacing:0.02em;}
.techi-resumen dl{margin:0;padding:6px 12px 10px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;}
.techi-resumen dt{font-size:12.5px;color:var(--techi-tinta-2);padding-top:2px;}
.techi-resumen dd{margin:0;font-size:14.5px;font-weight:600;color:var(--techi-tinta);overflow-wrap:anywhere;}

/* Barra "Preparando tu cotización" */
.techi-msg--barra{display:block;}
.techi-barra{background:var(--techi-papel);border:1.5px solid var(--techi-acento);border-radius:10px;padding:14px 14px 12px;box-shadow:0 8px 22px rgba(91,46,224,0.16);}
.techi-barra-titulo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:800;font-stretch:var(--techi-semi);font-size:1.1875rem;line-height:1.15;color:var(--techi-tinta);margin-bottom:10px !important;}
.techi-barra-reloj{font-variant-numeric:tabular-nums;font-size:1.5rem;color:var(--techi-acento);font-stretch:var(--techi-angosta);}
.techi-barra-pista{position:relative;height:12px;border-radius:999px;background:var(--techi-acento-tinta);overflow:hidden;}
.techi-barra-relleno{position:absolute;inset:0 auto 0 0;width:8%;border-radius:inherit;background:var(--techi-acento);transition:width 1s linear;background-image:linear-gradient(45deg, rgba(255,255,255,0.22) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.22) 75%, transparent 75%);background-size:22px 22px;animation:techi-rayas 1s linear infinite;}
@keyframes techi-rayas{to{background-position:22px 0;}}
.techi-barra-nota{font-size:14px;line-height:1.4;color:var(--techi-tinta-2);margin-top:9px !important;}
.techi-barra.is-terminando .techi-barra-relleno{animation-duration:.6s;}
.techi-barra.is-lista{border-color:var(--techi-verde);box-shadow:0 8px 22px rgba(26,122,66,0.16);}
.techi-barra.is-lista .techi-barra-pista{background:var(--techi-verde-tinta);}
.techi-barra.is-lista .techi-barra-relleno{background:var(--techi-verde);animation:none;background-image:none;}
.techi-barra.is-lista .techi-barra-titulo{color:var(--techi-verde);}

/* Mensajes del asesor (persona real): avatar con inicial y su nombre */
.techi-msg--asesor{align-items:flex-start;}
.techi-asesor-cara{width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--techi-verde);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;margin-top:18px;box-shadow:0 2px 4px rgba(10,33,56,0.18);}
.techi-asesor-cuerpo{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:290px;}
.techi-asesor-quien{font-size:12.5px;font-weight:700;color:var(--techi-verde);}
.techi-msg--asesor .techi-burbuja{border-color:rgba(26,122,66,0.35);white-space:pre-line;}
.techi-cot{background:var(--techi-papel);border:1.5px solid var(--techi-tinta);border-radius:8px;overflow:hidden;}
.techi-cot p{margin:0;}
.techi-cot-top{display:flex;justify-content:space-between;gap:8px;align-items:center;background:var(--techi-tinta);color:#fff;padding:7px 12px;font-size:12.5px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;}
.techi-cot-top strong{font-size:14.5px;text-transform:none;letter-spacing:0;}
.techi-cot-cob{padding:9px 12px 4px;font-weight:700;color:var(--techi-tinta);font-size:15px;}
.techi-cot-precio{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 12px;background:var(--techi-amarillo);border-top:1.5px solid var(--techi-tinta);font-weight:800;font-stretch:var(--techi-angosta);font-size:1.5rem;line-height:1;color:var(--techi-tinta);}
.techi-cot-precio small{font-size:12.5px;font-weight:700;font-stretch:normal;}
.techi-cot-precio--mes{background:var(--techi-acento-tinta);font-size:1.25rem;}
.techi-cot-notas{padding:8px 12px 10px;font-size:13.5px;line-height:1.4;color:var(--techi-tinta-2);}
.techi-adjunto{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--techi-papel);border:1px solid var(--techi-regla-suave);border-radius:8px;color:var(--techi-tinta);font-weight:700;text-decoration:none;}
.techi-adjunto span{background:#B42318;color:#fff;font-size:12px;padding:3px 6px;border-radius:4px;}
.techi-adjunto:hover{border-color:var(--techi-acento);}
.techi-adjunto-img img{display:block;max-width:100%;border-radius:8px;}
.techi-asesor-botones{display:flex;flex-wrap:wrap;gap:6px;}
.techi-opcion.is-pago{background:var(--techi-verde);border-color:var(--techi-verde);color:#fff;}
.techi-opcion.is-pago:hover{background:#145F33;}
.techi-opcion.is-wa{border-color:var(--techi-verde);color:var(--techi-verde);}
.techi-opcion:disabled{opacity:0.45;cursor:default;}

/* Burbuja de mensajes nuevos en el lanzador */
.techi-lanzador{position:relative;}
.techi-lanzador-badge{position:absolute;top:-6px;left:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#B42318;color:#fff;font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff;}
.techi-lanzador-badge[hidden]{display:none;}

@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .techi-barra,.techi-resumen{background:var(--vidrio-fuerte);}
  .techi-opcion.is-pago{background:rgba(26,122,66,0.92);border-color:rgba(255,255,255,0.35);box-shadow:0 6px 16px rgba(26,122,66,0.3), inset 0 1px 0 rgba(255,255,255,0.3);}
}
@media (prefers-reduced-motion:reduce){
  .techi-barra-relleno{animation:none;transition:none;}
  .techi-msg--archivo.is-subiendo .techi-doc-estado::after{animation:none;}
}

/* ==================================================================
   TECHI EN EL MUNDO "PLACA DE LA BÓVEDA" (rediseño oct 2026)
   Más sobria: pesos medios, líneas de 1 px, sin amarillo en precios,
   y la barra de cotización como una escala graduada con su aguja.
   Toma --grabado, --acero y --ancho del tema; si no existen, usa estos.
   ================================================================== */
:root{
  --techi-grabado:var(--grabado, #DCE3EB);
  --techi-grabado-fuerte:var(--grabado-fuerte, #B9C5D3);
  --techi-acero:var(--acero, #F4F6F9);
  --techi-ancho:var(--ancho, 112%);
}
.techi-lanzador{border-radius:10px;}
.techi-lanzador-txt strong{font-weight:600;}
.techi-chat-quien h2{font-weight:600;font-stretch:var(--techi-ancho);letter-spacing:0;}
.techi-globo-quien strong{font-weight:600;}
.techi-opcion{font-weight:500;}
.techi-opcion.is-principal{font-weight:600;}
.techi-tarjeta,.techi-resumen,.techi-cot{border-width:1px;border-color:var(--techi-grabado-fuerte);}
.techi-tarjeta-codigo{background:transparent;color:var(--techi-tinta-2);border:1px solid var(--techi-grabado-fuerte);font-stretch:125%;font-weight:600;font-size:10.5px;letter-spacing:0.14em;}
.techi-tarjeta-nombre{font-weight:600;font-stretch:104%;font-size:1.0625rem;}
.techi-tarjeta-incluye li::before{width:8px;height:1px;top:0.7em;}
.techi-tarjeta-precio{background:var(--techi-acero);border-top:1px solid var(--techi-grabado);font-weight:500;font-stretch:var(--techi-ancho);}
.techi-tarjeta-precio.is-cotizar{background:var(--techi-acento-tinta);}
.techi-tarjeta-marca{background:transparent;color:#1A7A42;border:1px solid rgba(26,122,66,0.45);font-weight:600;font-stretch:100%;letter-spacing:0.02em;}
.techi-resumen-titulo{background:var(--techi-acero);color:var(--techi-tinta-2);border-bottom:1px solid var(--techi-grabado);font-stretch:125%;font-weight:600;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;}
.techi-cot-top{background:var(--techi-acero);color:var(--techi-tinta-2);border-bottom:1px solid var(--techi-grabado);font-stretch:125%;font-size:10.5px;letter-spacing:0.16em;}
.techi-cot-top strong{color:var(--techi-tinta);font-stretch:100%;letter-spacing:0;text-transform:none;font-size:14px;}
.techi-cot-precio{background:var(--techi-papel);border-top:1px solid var(--techi-grabado);font-weight:500;font-stretch:var(--techi-ancho);font-size:1.5rem;}
.techi-cot-precio--mes{background:var(--techi-papel);font-size:1.2rem;}
.techi-asesor-cara{font-weight:600;}

/* Barra "Preparando tu cotización": escala graduada con aguja */
.techi-barra{border:1px solid var(--techi-grabado-fuerte);border-radius:10px;box-shadow:0 18px 36px -24px rgba(10,33,56,0.35);}
.techi-barra-titulo{font-weight:500;font-stretch:var(--techi-ancho);font-size:1.0625rem;}
.techi-barra-reloj{font-weight:500;font-size:1.375rem;color:var(--techi-acento);}
.techi-barra-pista{height:16px;border-radius:0;overflow:visible;background:
  linear-gradient(var(--techi-grabado-fuerte), var(--techi-grabado-fuerte)) left bottom / 100% 1px no-repeat,
  repeating-linear-gradient(90deg, var(--techi-grabado-fuerte) 0 1px, transparent 1px 8px) left bottom / 100% 6px no-repeat,
  repeating-linear-gradient(90deg, var(--techi-tinta-2) 0 1px, transparent 1px 40px) left bottom / 100% 11px no-repeat;}
.techi-barra-relleno{top:auto;bottom:0;height:3px;border-radius:0;background:var(--techi-acento);background-image:none;animation:none;}
.techi-barra-relleno::after{content:'';position:absolute;right:-5px;bottom:3px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--techi-acento);}
.techi-barra.is-terminando .techi-barra-relleno::after{animation:techi-aguja 1.2s ease-in-out infinite;}
@keyframes techi-aguja{0%,100%{transform:translateY(0);}50%{transform:translateY(-3px);}}
.techi-barra.is-lista .techi-barra-relleno::after{border-top-color:#1A7A42;}
@media (prefers-reduced-motion:reduce){
  .techi-barra.is-terminando .techi-barra-relleno::after{animation:none;}
}

/* ==================================================================
   TECHI: su cara es un visor (pantalla), no un retrato.
   El visor se muestra completo, sin recorte circular. El encabezado del
   chat lleva el degradado violeta de SISPPROTECH con un filo cian, el
   mismo cian de los ojos de TECHI.
   ================================================================== */
:root{--techi-cian:#3EE0FF;}
.techi-pantalla{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.techi-lanzador img,.techi-globo-quien img,.techi-chat-avatar,.techi-cara{height:auto;object-fit:contain;border:none;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 2px 3px rgba(10,33,56,0.22));}
.techi-lanzador img{width:46px;}
.techi-globo-quien img{width:30px;}
.techi-chat-head .techi-pantalla{width:48px;height:48px;border-radius:12px;background:rgba(255,255,255,0.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.28);}
.techi-chat-avatar{width:36px;}
.techi-cara{width:34px;margin-top:6px;}
.techi-msg--tarjeta{padding-left:44px;}

.techi-chat-head{background:linear-gradient(115deg,#6B3BFF 0%,#4A26D0 55%,#2A1C8F 100%);box-shadow:inset 0 -2px 0 rgba(62,224,255,0.55);}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .techi-chat-head{background:linear-gradient(115deg,rgba(107,59,255,0.93) 0%,rgba(74,38,208,0.93) 55%,rgba(42,28,143,0.93) 100%);}
}
@media (prefers-reduced-transparency:reduce){
  .techi-chat-head{background:linear-gradient(115deg,#6B3BFF 0%,#4A26D0 55%,#2A1C8F 100%);}
}

@media (max-width:600px){
  .techi-lanzador{padding:8px;}
  .techi-lanzador img{width:44px;}
}