.hila-help { position: fixed; z-index: 1450; right: 22px; bottom: 22px; color: #123751; font-family: inherit; }
.hila-help button, .hila-help input { font: inherit; }
.hila-launcher { display: flex; align-items: center; gap: 6px; border: 1px solid #b1e8ef; border-radius: 22px; background: #fff; padding: 5px 14px 5px 5px; box-shadow: 0 7px 24px #083b6726; color: #073b67; cursor: pointer; }
.hila-launcher img { width: 58px; height: 58px; object-fit: contain; }
.hila-launcher span { display: grid; text-align: left; line-height: 1.3; }.hila-launcher strong { font-size: 1rem; }.hila-launcher small { color: #527180; font-size: .8rem; }
.hila-launcher:hover { background: #ecfbfd; }.hila-help button:focus-visible, .hila-help summary:focus-visible { outline: 3px solid #1fb9d1; outline-offset: 3px; }
.hila-panel { position: absolute; bottom: 82px; right: 0; width: 390px; max-width: calc(100vw - 32px); height: min(610px, calc(100dvh - 128px)); display: flex; flex-direction: column; border: 1px solid #c4e4eb; border-radius: 23px; overflow: hidden; background: #fff; box-shadow: 0 20px 65px #042c4a33; }
.hila-header { display: flex; align-items: center; gap: 10px; padding: 13px 15px; background: #eaf9fc; border-bottom: 1px solid #d4eaf0; flex-shrink: 0; }.hila-header img { width: 50px; height: 50px; object-fit: contain; }.hila-header h2 { margin: 0 0 4px; font-size: 1rem; font-weight: 800; }.hila-header span { font-size: .75rem; color: #526e7d; }.hila-close { margin-left: auto; align-self: flex-start; border: 0; background: transparent; color: #36556c; padding: 0 5px; font-size: 1.5rem !important; cursor: pointer; }
.hila-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px; min-height: 0; }.hila-body h3 { font-size: .87rem; font-weight: 800; margin: 18px 0 9px; }.hila-body p { margin: 7px 0 0; line-height: 1.55; font-size: .86rem; }.hila-greeting { background: #f1fafc; border-radius: 5px 17px 17px; padding: 13px; font-size: .88rem; line-height: 1.5; }
.hila-suggestions { display: grid; gap: 7px; }.hila-suggestions button { display: flex; justify-content: space-between; text-align: left; border: 1px solid #d1e8ee; border-radius: 11px; padding: 10px 12px; color: #154b66; background: #fff; font-size: .82rem; cursor: pointer; }.hila-suggestions button:hover { border-color: #15b0c9; background: #f0fbfd; }
.hila-question { margin: 14px 0 14px 25px; background: #087f9b; color: #fff; border-radius: 15px 5px 15px 15px; padding: 10px 13px; font-size: .87rem; overflow-wrap: anywhere; }.hila-answer { padding: 14px; background: #f2fafc; border: 1px solid #d7edf1; border-radius: 5px 16px 16px; margin-top: 12px; }.hila-answer-area { font-size: .7rem; font-weight: 800; letter-spacing: .05em; color: #007a91; text-transform: uppercase; }.hila-answer h3 { font-size: 1rem; margin: 7px 0; }.hila-answer ol { margin: 13px 0 0; padding-left: 20px; }.hila-answer li { padding: 0 0 9px 3px; font-size: .85rem; line-height: 1.55; }.hila-answer li::marker { color: #007f96; font-weight: 800; }
.hila-action { border: 0; border-radius: 9px; padding: 9px 12px; background: #077d96; color: #fff; font-weight: 700 !important; cursor: pointer; font-size: .82rem !important; }.hila-back { border: 0; background: transparent; color: #16718a; padding: 10px 0; margin-right: 8px; font-size: .8rem !important; cursor: pointer; }.hila-related { display: grid; gap: 6px; margin-top: 12px; }.hila-related span { font-size: .72rem; color: #637b8c; }.hila-related button { background: #fff; border: 1px solid #dceaf0; border-radius: 8px; padding: 8px; text-align: left; font-size: .78rem; color: #2b6479; cursor: pointer; }
.hila-topics { margin-top: 14px; border-top: 1px solid #e0edf1; padding-top: 13px; }.hila-topics summary { font-size: .8rem; color: #365b70; cursor: pointer; }.hila-topics button { display: block; width: 100%; padding: 8px 0; text-align: left; font-size: .79rem; border: 0; background: none; color: #176a84; cursor: pointer; }.hila-navigation { background: #fff7e8; border: 1px solid #f4dbaa; padding: 12px; border-radius: 12px; margin-top: 12px; }.hila-navigation p { margin-bottom: 10px; }
.hila-form { border-top: 1px solid #d5e9ee; padding: 13px 15px 10px; background: #fff; flex-shrink: 0; }.hila-form label { display: block; margin-bottom: 6px; font-size: .82rem; font-weight: 800; }.hila-form > div { display: flex; border: 2px solid #20aec6; border-radius: 12px; overflow: hidden; background: #f5fcfd; }.hila-form input { flex: 1; min-width: 0; padding: 11px 10px; border: 0; background: transparent; color: #103c56; font-size: .83rem; outline: none; }.hila-form > div:focus-within { box-shadow: 0 0 0 3px #1cb8d426; }.hila-form button { border: 0; background: #077e98; color: #fff; padding: 8px 12px; font-size: .78rem; font-weight: 800; cursor: pointer; }.hila-form button:disabled { background: #7198a4; cursor: default; }.hila-form small { display: block; margin-top: 6px; font-size: .67rem; color: #68808d; }
@media(max-width: 760px) { .hila-help { right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); }.hila-launcher { padding: 3px 10px 3px 3px; border-radius: 18px; }.hila-launcher img { width: 46px; height: 46px; }.hila-launcher strong { font-size: .85rem; }.hila-launcher small { font-size: .7rem; }.hila-panel { bottom: 65px; width: min(390px, calc(100vw - 24px)); max-width: calc(100vw - 24px); height: min(610px, calc(100dvh - 165px - env(safe-area-inset-bottom))); }.hila-body { padding: 13px; } }

/* Mobile: launcher compacto, sin tapar acciones de la pantalla. */
@media (max-width: 760px) {
  .hila-help { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .hila-launcher { width: 64px; min-height: 74px; padding: 4px 5px 7px; flex-direction: column; gap: 1px; justify-content: center; border-radius: 19px; border: 1.5px solid #39b9c8; background: linear-gradient(160deg, #fff 35%, #e3fafb); }
  .hila-launcher img { width: 44px; height: 44px; }
  .hila-launcher span { display: none; }
  .hila-panel { bottom: 64px; height: min(610px, calc(100dvh - 94px - env(safe-area-inset-bottom))); }
}

/* El acceso a Hila queda por encima de la barra de navegacion inferior movil. */
@media (max-width: 760px) {
  .hila-help { right: 12px; bottom: calc(104px + env(safe-area-inset-bottom)); }
  .hila-panel { bottom: 64px; height: min(610px, calc(100dvh - 190px - env(safe-area-inset-bottom))); }
}

/* Hila puede moverse con el dedo sin desplazar la pagina. */
@media (max-width: 760px) {
  .hila-launcher { touch-action: none; user-select: none; -webkit-user-select: none; }
  .hila-help[hidden] { display: none !important; }
}

/* Identidad oficial de Hila: encabezado fino y bienvenida con la mascota. */
.hila-header { min-height: 57px; padding: 8px 12px; gap: 9px; background: linear-gradient(115deg,#f9feff,#e7f8fb); }
.hila-header .hila-brand { width: 104px; height: 34px; object-fit: contain; object-position: left center; }
.hila-header-context { min-width: 0; flex: 1; }
.hila-header-context h2 { font-size: .83rem; margin: 0 0 2px; }
.hila-header-context span { font-size: .67rem; }
.hila-close { align-self: center; }
.hila-welcome { display: flex; align-items: center; gap: 11px; background: #f0f9fc; border-radius: 17px; padding: 12px; }
.hila-welcome > img { width: 95px; height: 122px; object-fit: contain; flex-shrink: 0; }
.hila-welcome > div { min-width: 0; }
.hila-welcome strong { display: block; font-size: .94rem; color: #092f56; }
.hila-welcome span { display: block; margin-top: 3px; font-size: .78rem; color: #077f99; font-weight: 700; }
.hila-welcome p { font-size: .76rem; line-height: 1.42; margin-top: 7px; }
.hila-launcher span { white-space: nowrap; }
@media(max-width: 760px) {
 .hila-header { min-height: 49px; padding: 6px 10px; }
 .hila-header .hila-brand { width: 86px; height: 30px; }
 .hila-header-context h2 { font-size: .76rem; }
 .hila-welcome { padding: 9px; gap: 8px; }
 .hila-welcome > img { width: 76px; height: 102px; }
 .hila-welcome p { font-size: .72rem; }
}

/* Panel independiente de la posicion arrastrada del lanzador. */
.hila-backdrop { position: fixed; inset: 0; z-index: 0; background: rgba(4, 27, 45, .22); }
.hila-help:has(.hila-panel) { z-index: 2000; }
.hila-panel { position: fixed; z-index: 1; left: 50%; top: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); width: min(390px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); height: min(610px, calc(100dvh - 32px)); }
@media (max-width: 760px) { .hila-panel { left: 50%; top: 50%; right: auto; bottom: auto; height: min(610px, calc(100dvh - 24px - env(safe-area-inset-bottom))); } }

/* El formulario de contacto ya ofrece ayuda directa y necesita todo el espacio. */
body:has(.support-form--new) .hila-help { display: none; }

.hila-mobile-help-label { display: none; }
@media (max-width: 760px) {
  .hila-mobile-help-label { display: block; font-size: .78rem; line-height: 1.2; font-weight: 800; color: #076575; }
}