/* ============================================================ CCIV — Asistente · Chatbot CCIV Estilos del widget flotante. Se carga en todas las páginas (encolado desde inc/cciv-chatbot.php) con `cciv-site` como dependencia: site.css tiene que cargar ANTES. ⚠ TRAMPA DE HELLO ELEMENTOR reset.css del tema padre define: [type=button],[type=submit],button { border:1px solid #c36; color:#c36 } ...:hover, ...:focus { background-color:#c36; color:#fff } site.css lo neutraliza con el mismo selector, pero ese neutralizador también pisa el fondo en :hover y :focus. Por eso TODO botón del widget con fondo propio redeclara su fondo en :hover Y en :focus (mismo caso que .hero-dot en site.css). Si agregás un botón nuevo con fondo, acordate de hacer lo mismo o se va a "apagar" al clickearlo. ============================================================ */ /* --- Burbuja ------------------------------------------------ */ .cbt-launcher{ position:fixed;right:24px;bottom:24px;z-index:900; display:flex;align-items:center; background:var(--bg-1);color:#fff;cursor:pointer; /* Borde verde: la burbuja es azul CCIV y sobre las secciones de fondo azul (.flotas y el hero, ambas --bg-0) se perdía contra el fondo. El acento la recorta en cualquier sección. No cambia el tamaño: el theme tiene box-sizing:border-box global. */ border:2px solid var(--accent); /* padding 0: el icono ya mide 58x58 y la altura es 58, asi que con radio 29 queda un circulo exacto. Con los 5px de antes daba 63x58 (un ovalo). */ height:58px;padding:0;border-radius:29px; box-shadow:0 12px 40px rgba(3,30,48,.18), 0 4px 12px rgba(3,30,48,.10); font-family:var(--f-body); transition:transform .2s ease-out, box-shadow .2s ease-out, background .2s ease-out; } /* Fondo redeclarado en hover Y focus — ver la nota de arriba. */ .cbt-launcher:hover, .cbt-launcher:focus{background:#0a5a91;color:#fff;border-color:var(--accent)} .cbt-launcher:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(3,30,48,.26)} .cbt-launcher:focus-visible{outline:2px solid var(--accent);outline-offset:3px} .cbt-launcher-icon{width:58px;height:58px;display:grid;place-items:center;flex-shrink:0} .cbt-launcher-icon svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .cbt-launcher-label{ font-size:14px;font-weight:600;white-space:nowrap; max-width:0;overflow:hidden;opacity:0;padding-right:0; transition:max-width .32s ease-out, opacity .22s ease-out, padding .32s ease-out; } /* Se muestra unos segundos al cargar y se repliega sola; vuelve en hover. */ .cbt-launcher.show-label .cbt-launcher-label, .cbt-launcher:hover .cbt-launcher-label{max-width:200px;opacity:1;padding-right:20px} .cbt-launcher.is-open{opacity:0;pointer-events:none;transform:scale(.9)} /* --- Panel -------------------------------------------------- */ .cbt-panel{ position:fixed;right:24px;bottom:24px;z-index:990; width:384px;max-height:min(640px, calc(100vh - 48px)); display:flex;flex-direction:column; background:var(--bg-3);border-radius:var(--r-lg); box-shadow:0 12px 40px rgba(3,30,48,.18), 0 4px 12px rgba(3,30,48,.10); overflow:hidden; opacity:0;transform:translateY(12px) scale(.98);pointer-events:none; transition:opacity .26s ease-out, transform .26s ease-out; } .cbt-panel.is-open{opacity:1;transform:none;pointer-events:auto} /* El menú mobile marca (template-parts/header-cciv.php). El drawer usa z-index 999 y el overlay 998, así que igual gana; ocultamos el widget para no dejarlo asomando por debajo. */ html.mnav-abierto .cbt-launcher, html.mnav-abierto .cbt-panel{opacity:0;pointer-events:none;visibility:hidden} /* Encabezado */ .cbt-head{background:var(--bg-1);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:12px;flex-shrink:0} .cbt-head-mark{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.13);display:grid;place-items:center;flex-shrink:0} .cbt-head-mark svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .cbt-head-txt{flex:1;min-width:0} .cbt-head-title{font-size:14px;font-weight:600;letter-spacing:-.01em;line-height:1.3} .cbt-head-sub{font-size:11.5px;color:rgba(255,255,255,.62);line-height:1.3} .cbt-close{width:32px;height:32px;border-radius:var(--r-sm);background:transparent;border:none;cursor:pointer;display:grid;place-items:center;flex-shrink:0;transition:background .18s ease-out} .cbt-close svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round} .cbt-close:hover,.cbt-close:focus{background:rgba(255,255,255,.14)} .cbt-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px} /* Barra de navegación interna */ .cbt-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 14px;border-bottom:1px solid var(--line);background:var(--bg-3);flex-shrink:0;min-height:42px} .cbt-nav button{background:transparent;border:none;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--tx-2); display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--r-sm);transition:color .18s ease-out,background .18s ease-out} .cbt-nav button:hover,.cbt-nav button:focus{color:var(--bg-1);background:var(--bg-2)} .cbt-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:1px} .cbt-nav svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .cbt-nav [hidden]{display:none} /* En el menú inicial no hay nada que mostrar: la barra se colapsa entera en vez de dejar una franja vacía con borde. */ .cbt-nav.is-empty{display:none} /* Cuerpo */ .cbt-body{flex:1;overflow-y:auto;padding:20px 18px 22px;overscroll-behavior:contain} .cbt-body:focus{outline:none} .cbt-step{animation:cbt-in .26s ease-out both} @keyframes cbt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .cbt-title{font-family:var(--f-display);font-size:19px;font-weight:700;letter-spacing:-.02em;line-height:1.3;margin:0 0 4px;color:var(--tx-1)} .cbt-lead{font-size:13.5px;color:var(--tx-2);margin:0 0 16px} .cbt-answer{font-size:14.5px;color:var(--tx-1);line-height:1.62;margin:0 0 4px} .cbt-answer p{margin:0 0 10px} .cbt-answer p:last-child{margin-bottom:0} .cbt-answer strong{font-weight:600} .cbt-note{font-size:12.5px;color:var(--tx-2);background:var(--accent-3);border-radius:var(--r-md);padding:11px 13px;margin:14px 0 0;line-height:1.5} /* Opciones — botones apilados */ .cbt-opts{display:flex;flex-direction:column;gap:7px;margin-top:16px} .cbt-opt{ font-family:inherit;font-size:14px;font-weight:500;text-align:left; background:var(--bg-3);color:var(--tx-1); border:1px solid var(--line-2);border-radius:var(--r-md); padding:12px 14px;cursor:pointer; display:flex;align-items:center;justify-content:space-between;gap:12px; transition:border-color .18s ease-out, background .18s ease-out; } .cbt-opt:hover,.cbt-opt:focus{border-color:var(--bg-1);background:var(--bg-2);color:var(--tx-1)} /* Hello Elementor pone white-space:nowrap en todo