/*
 * WhatsApp ISIL — estilos del widget. Generado desde los templates de Marketing:
 *   isil_whatsapp_desktop_fragmento.html -> bloque "Desktop" (>= 768px)
 *   isil_whatsapp_mobile_fragmento.html  -> bloque "Mobile"  (<= 767px)
 * Cada regla es copia literal del template. Solo se añadió el envoltorio de
 * los media queries y los bloques "Aislamiento", "Mostrar en" y
 * "Tipografía corporativa".
 * Si Marketing cambia un template, regenerar este archivo, no retocarlo a mano.
 */

/* Aislamiento del tema: su reset deja body con line-height:1, y los templates
   se diseñaron sobre los valores por defecto del navegador. Estas propiedades
   se heredan; aquí se devuelven a esos valores solo dentro del widget. */
.floating-chat { line-height:normal; font-style:normal; font-weight:400; letter-spacing:normal; text-transform:none; text-align:left; }

/* Ajuste "Mostrar en" del panel. */
@media (min-width:768px) { .floating-chat.isil-wa--solo-mobile { display:none!important; } }
@media (max-width:767px) { .floating-chat.isil-wa--solo-desktop { display:none!important; } }

/* ===== Desktop ===== */
@media (min-width:768px) {
  .floating-chat, .floating-chat * { box-sizing: border-box; }
  .floating-chat { position:fixed; right:23px; bottom:20px; width:337px; max-width:calc(100vw - 26px); z-index:9999; pointer-events:none; font-family:Arial,Helvetica,sans-serif; color:#152936; }
  .floating-chat > * { pointer-events:auto; }
  .floating-chat button { font:inherit; cursor:pointer; }
  .floating-chat a { color:inherit; text-decoration:none; }
  .floating-chat [hidden] { display:none!important; }
  .floating-chat :focus-visible { outline:3px solid #ffcc29; outline-offset:3px; }
  .floating-chat .chat-launcher { border:0; background:transparent; display:flex; align-items:center; gap:10px; padding:0; filter:drop-shadow(0 5px 14px rgba(16,72,87,.12)); position:relative; margin-left:auto; }
  .floating-chat .launcher-label { background:#fff; border:1px solid #cde8d9; border-radius:99px; padding:10px 13px; color:#173b3e; font-weight:750; font-size:12px; line-height:1.2; box-shadow:0 7px 28px rgba(15,73,53,.13); }
  .floating-chat .launcher-icon { display:grid; place-items:center; width:59px; height:59px; flex:0 0 59px; border-radius:50%; background:#25D366; color:#fff; border:4px solid #fff; box-shadow:0 7px 22px rgba(6,125,63,.36); transition:transform .2s; }
  .floating-chat .launcher-icon svg { width:32px; height:32px; }
  .floating-chat .chat-launcher:hover .launcher-icon { transform:scale(1.07); }
  .floating-chat .chat-panel { width:100%; margin-bottom:11px; background:#fff; border-radius:18px; overflow:hidden; border:1px solid #d8eee1; box-shadow:0 17px 48px rgba(4,40,29,.19); animation:wa-float-in .22s ease-out both; }
  .floating-chat .chat-head { position:relative; background:#25D366; color:#fff; padding:18px 18px 15px; box-shadow:inset 0 -1px 0 rgba(0,0,0,.045); }
  .floating-chat .chat-head h2 { font-size:18px; font-weight:800; letter-spacing:-.025em; line-height:1.25; margin:0 35px 0 0; }
  .floating-chat .close-chat { position:absolute; right:11px; top:10px; background:transparent; border:0; color:#fff; font-size:26px; line-height:1; padding:4px 7px; }
  .floating-chat .close-chat:hover { opacity:.74; }
  .floating-chat .chat-body { padding:12px 13px 14px; }
  .floating-chat .options { display:grid; gap:7px; }
  .floating-chat .option { border:1px solid #deeaed; border-radius:12px; background:#fff; padding:10px 12px; min-height:47px; width:100%; display:flex; align-items:center; gap:10px; text-align:left; font-size:13px; font-weight:700; color:#172f40; transition:border-color .17s,background .17s,transform .17s,box-shadow .17s; }
  .floating-chat .option:hover { border-color:#56cb87; background:#effdf5; transform:translateX(2px); box-shadow:0 4px 14px rgba(13,128,73,.09); }
  .floating-chat .option:focus-visible { outline:3px solid #0f9c54; outline-offset:2px; }
  .floating-chat .option-emoji { font-size:19px; min-width:21px; }
  .floating-chat .option .arrow { margin-left:auto; font-size:22px; font-weight:350; color:#148a48; line-height:1; }
  .floating-chat .chat-panel[hidden] + .chat-launcher { display:flex!important; }
  .floating-chat .chat-panel:not([hidden]) + .chat-launcher { display:none!important; }
}
@keyframes wa-float-in { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }

/* ===== Mobile ===== */
@media (max-width:767px) {
  .floating-chat, .floating-chat * { box-sizing:border-box; }
  .floating-chat { position:fixed; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); width:min(294px,calc(100vw - 24px)); height:auto; z-index:9999; pointer-events:none; overflow:visible; font-family:Arial,Helvetica,sans-serif; color:#152332; }
  .floating-chat > * { pointer-events:auto; }
  .floating-chat button,.floating-chat a { font:inherit; }
  .floating-chat button { cursor:pointer; }
  .floating-chat a { text-decoration:none; color:inherit; }
  .floating-chat [hidden] { display:none!important; }
  .floating-chat :focus-visible { outline:3px solid #ffd13f; outline-offset:3px; }
  .floating-chat .chat-launcher { border:0; padding:0; background:transparent; display:flex; align-items:center; justify-content:flex-end; gap:7px; width:max-content; max-width:100%; height:60px; margin-left:auto; position:relative; filter:drop-shadow(0 4px 9px #062e2433); }
  .floating-chat .launcher-label { display:block!important; padding:10px 11px; max-width:187px; min-width:0; background:#fff; border:1px solid #b9e4ce; box-shadow:0 6px 18px #122c1b22; border-radius:18px; color:#184733; text-align:center; font-size:11.5px; font-weight:800; line-height:1.25; white-space:normal; }
  .floating-chat .launcher-icon { width:58px; height:58px; flex:0 0 58px; border:4px solid #fff; background:#25D366; color:#fff; border-radius:50%; box-shadow:0 5px 15px #1477444d; display:grid; place-items:center; transition:transform .18s ease; }
  .floating-chat .launcher-icon svg { width:31px; height:31px; }
  .floating-chat .chat-launcher:hover .launcher-icon { transform:scale(1.04); }
  .floating-chat .chat-panel { position:absolute; right:0; bottom:73px; width:min(292px,100%); margin:0; z-index:10000; max-height:calc(100dvh - 140px); overflow-y:auto; border:1px solid #c9e7d4; border-radius:17px; background:#fff; box-shadow:0 13px 40px rgba(2,28,20,.23); animation:wa-rise .16s ease-out both; }
  .floating-chat .chat-head { background:#25D366; color:#fff; min-height:57px; display:flex; align-items:center; position:relative; padding:14px 40px 14px 14px; }
  .floating-chat .chat-head h2 { margin:0; font-size:16.5px; line-height:1.24; font-weight:800; letter-spacing:-.2px; }
  .floating-chat .close-chat { position:absolute; right:9px; top:10px; display:grid; place-items:center; width:31px; height:31px; font-size:23px; line-height:1; color:#fff; background:transparent; border:0; border-radius:50%; }
  .floating-chat .close-chat:hover { background:#00000012; }
  .floating-chat .chat-body { padding:11px; background:#f6f8f7; }
  .floating-chat .options { display:grid; gap:7px; }
  .floating-chat .option { display:flex; align-items:center; gap:10px; width:100%; min-height:46px; border:1px solid #e7ece8; background:#fff; border-radius:11px; padding:10px 11px; font-size:12.2px; font-weight:700; line-height:1.3; color:#283b32; transition:border-color .16s,background .16s; text-align:left; }
  .floating-chat .option:active,.floating-chat .option:hover { background:#f0fcf4; border-color:#a6e8bc; }
  .floating-chat .option-emoji { font-size:20px; flex:0 0 24px; text-align:center; line-height:1; }
  .floating-chat .option .arrow { color:#23884a; font-size:23px; line-height:.8; font-weight:400; margin-left:auto; }
}
@keyframes wa-rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:360px) { .floating-chat { width:min(274px,calc(100vw - 20px)); right:10px; } .floating-chat .chat-panel { width:100%; } .floating-chat .option { font-size:11.8px; padding:9px; } .floating-chat .launcher-label { font-size:10.8px; max-width:160px; } }
@media (max-width:767px) and (max-height:570px) { .floating-chat .chat-panel { max-height:calc(100dvh - 110px); bottom:63px; } .floating-chat .chat-launcher { height:54px; } .floating-chat .launcher-icon { width:52px; height:52px; flex-basis:52px; } }

/* ===== Tipografía corporativa =====
   Graphik, la de isil.pe. La declara el tema del blog con el nombre "graphik"
   (pesos 100, 200, 300, 400, 500, 700 y 900), así que aquí no se descarga
   nada. Si el tema no la tuviera, se ve Arial, como en el template.
   Pesos: con Arial, los 750 y 800 del template se veían como su negrita (700)
   y el 350 como su regular (400), porque Arial no tiene más cortes. En
   Graphik, 750 y 800 caerían en Black (900) y 350 en Light (300). Se fijan en
   700 y 400 para conservar el aspecto que aprobó Marketing. */
.floating-chat { font-family:"graphik",Arial,Helvetica,sans-serif; }
.floating-chat .chat-head h2, .floating-chat .launcher-label { font-weight:700; }
.floating-chat .option .arrow { font-weight:400; }

/* ===== Ambos ===== */
@media (prefers-reduced-motion:reduce) { .floating-chat *, .floating-chat *::before, .floating-chat *::after { animation:none!important; transition:none!important; } }