/* Ayuda de Cuartico (28/09, rediseño). Todo sale de los colores del panel: claro/noche y, con Pro,
   azul marino con cian (html[data-plan='pro'] cambia --e*, --acc y los neutros). Solo se mueve con
   transform/opacity; con «reducir movimiento» no hay animaciones. */
html:has(dialog.help-dialog[open]) { overflow: hidden; }
.cq-help { position: relative; z-index: 120; font-family: var(--f-ui, system-ui, sans-serif); }
.help-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.help-avatar { position: relative; display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--line-2); }
.help-avatar img { width: 60%; height: 60%; object-fit: contain; transform: translateY(-3%); }

/* Botón flotante: píldora con el avatar, un brillo que respira y el punto de «respuesta nueva» */
.help-launch { position: fixed; right: 24px; bottom: 24px; isolation: isolate; display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 18px 6px 6px; border: 0; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--e700), var(--e900)); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .14); cursor: pointer; transition: transform .25s var(--spring); }
.help-launch::before { content: ''; position: absolute; inset: -4px; z-index: -1; border-radius: inherit; box-shadow: 0 0 0 2px color-mix(in srgb, var(--acc) 55%, transparent), 0 0 24px 2px color-mix(in srgb, var(--acc) 40%, transparent); opacity: 0; animation: help-breathe 3.8s ease-in-out infinite; pointer-events: none; }
@keyframes help-breathe { 0%, 100% { opacity: 0; transform: scale(.97); } 50% { opacity: .9; transform: scale(1); } }
.help-launch:hover { transform: translateY(-2px); }
.help-launch:active { transform: scale(.97); }
.help-launch .help-avatar { width: 38px; height: 38px; box-shadow: none; }
.help-unread { position: absolute; top: 3px; left: 35px; width: 13px; height: 13px; border-radius: 50%; background: var(--o500); box-shadow: 0 0 0 2.5px var(--e900); }
.help-unread[hidden] { display: none; }

/* La ventana: crece desde la esquina del botón */
dialog.help-dialog { position: fixed; inset: auto 24px 24px auto; margin: 0; padding: 0; width: 400px; max-width: calc(100vw - 32px); height: min(680px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px); border: 0; border-radius: 24px; color: var(--text); background: var(--surface); box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .45), 0 0 0 1px var(--line-2); overflow: hidden; transform-origin: 100% 100%; }
dialog.help-dialog[open] { animation: help-open .28s var(--ease) both; }
dialog.help-dialog.is-closing { animation: help-shut .17s ease-in both; }
@keyframes help-open { from { opacity: 0; transform: translateY(14px) scale(.9); } }
@keyframes help-shut { to { opacity: 0; transform: translateY(10px) scale(.94); } }
.help-dialog::backdrop { background: rgba(2, 10, 22, .3); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.help-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.help-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; background: var(--surface-2); }

/* Cabecera fija y de vidrio: lo de abajo pasa por detrás, pero nada queda tapado al abrir */
.help-header { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; background: color-mix(in srgb, var(--surface) 90%, transparent); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 1px 0 var(--line); }
.help-header .help-avatar { width: 42px; height: 42px; }
.help-header .help-avatar::after { content: ''; position: absolute; right: -1px; bottom: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--g400); box-shadow: 0 0 0 2.5px var(--surface); }
.help-heading { flex: 1; min-width: 0; }
.help-heading h2 { font-family: var(--f-display); font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; color: var(--text); }
.help-status { margin-top: 2px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.help-close { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 0; border-radius: 12px; color: var(--text-2); background: var(--surface-3); cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.help-close svg { width: 18px; height: 18px; }
.help-close:hover { color: var(--text); background: color-mix(in srgb, var(--surface-3) 60%, var(--line-2)); }
.help-grab { display: none; }

/* Bienvenida (sin mensajes) */
.help-welcome { padding: 22px 18px 10px; }
.help-welcome[hidden] { display: none; }
.help-welcome h3 { font-family: var(--f-display); font-size: 21px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--text); }
.help-welcome > p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.help-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.help-chips button { min-height: 38px; padding: 8px 14px; border: 0; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 800; color: var(--e600); background: var(--acc-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent); cursor: pointer; transition: transform .2s var(--spring), box-shadow .2s var(--ease); }
.help-chips button:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acc) 75%, transparent); }
.help-more { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-2); }
.help-more button { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 12px; border: 0; border-radius: 12px; font: inherit; font-size: 13px; font-weight: 700; color: var(--text-2); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-2); cursor: pointer; }
.help-more button:hover { color: var(--text); }
.help-more svg { width: 16px; height: 16px; }

/* Mensajes */
.help-messages { display: flex; flex-direction: column; gap: 14px; padding: 16px 14px 6px; }
.help-messages:empty { display: none; }
.help-msg { display: flex; align-items: flex-start; gap: 8px; max-width: 88%; }
.help-msg-user { align-self: flex-end; }
.help-msg > .help-avatar { margin-top: 4px; }
.help-body { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.help-msg-user .help-body { align-items: flex-end; }
.help-bubble { padding: 10px 14px; border-radius: 18px 18px 18px 6px; font-size: 14.5px; line-height: 1.5; color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--sh-1); overflow-wrap: anywhere; }
.help-bubble p { white-space: pre-wrap; }
.help-msg-user .help-bubble { border-radius: 18px 18px 6px 18px; color: #fff; background: linear-gradient(135deg, var(--e600), var(--e800)); box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .5); }
.help-msg-team .help-bubble { background: var(--o50); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--o500) 34%, transparent); }
.help-speaker { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--o700); }
.help-msg time { margin: 4px 6px 0; font-size: 11px; font-weight: 600; color: var(--text-3); }
.help-msg.is-new { animation: help-msg-in .32s var(--ease) both; }
@keyframes help-msg-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.help-msg.is-pending .help-bubble { opacity: .8; }
/* Botones de acción bajo una respuesta (solo lugares conocidos de Cuartico) */
.help-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.help-action { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; text-decoration: none; color: var(--e600); background: var(--surface); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--acc) 50%, var(--line-2)); transition: transform .2s var(--spring), background-color .2s var(--ease); }
.help-action span { transition: transform .25s var(--spring); }
.help-action:hover { background: var(--acc-soft); }
.help-action:hover span { transform: translateX(3px); }
/* «Escribiendo…» */
.help-typing { display: flex; align-items: center; gap: 8px; padding: 6px 14px 16px; }
.help-typing[hidden] { display: none; }
.help-dots { display: inline-flex; gap: 4px; padding: 13px 14px; border-radius: 18px 18px 18px 6px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.help-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: help-dot 1.1s ease-in-out infinite; }
.help-dots i:nth-child(2) { animation-delay: .15s; }
.help-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes help-dot { 0%, 70%, 100% { opacity: .35; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-4px); } }
.help-typing-text { font-size: 12px; font-weight: 600; color: var(--text-3); }

/* Escribir: el modo arriba (segmentos), el cuadro crece hasta 5 líneas */
.help-compose { flex: none; padding: 10px 14px 12px; background: var(--surface); box-shadow: 0 -1px 0 var(--line); }
.help-modes { display: inline-flex; gap: 2px; margin-bottom: 8px; padding: 3px; border-radius: 999px; background: var(--surface-3); }
.help-modes button { min-height: 30px; padding: 4px 12px; border: 0; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--text-2); background: transparent; cursor: pointer; transition: background-color .2s var(--ease), color .2s var(--ease); }
.help-modes button[aria-checked='true'] { color: var(--text); background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 0 0 1px var(--line); }
.help-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 5px 5px 5px 14px; border-radius: 24px; background: var(--surface-2); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .2s var(--ease); }
.help-input-row:focus-within { box-shadow: inset 0 0 0 2px var(--e600), 0 0 0 4px color-mix(in srgb, var(--acc) 22%, transparent); }
.cq[data-theme='oscuro'] .help-input-row:focus-within { box-shadow: inset 0 0 0 2px var(--acc), 0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); }
.help-input-row textarea { flex: 1; min-width: 0; min-height: 38px; padding: 8px 0; border: 0; resize: none; font: inherit; font-size: 16px; line-height: 22px; color: var(--text); background: transparent; box-shadow: none; outline: none; }
.help-input-row textarea:focus-visible { outline: none; }
.help-input-row textarea::placeholder { color: var(--text-3); }
.help-send { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; color: #1F1204; background: linear-gradient(135deg, var(--o400), var(--o600)); box-shadow: var(--sh-o); cursor: pointer; transition: transform .25s var(--spring), background-color .2s var(--ease); }
.help-send svg { width: 20px; height: 20px; }
.help-send:not(:disabled):hover { transform: translateY(-1px) scale(1.04); }
.help-send:disabled { color: var(--text-3); background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--line-2); cursor: default; }
.help-error { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--r600); }
.help-error[hidden] { display: none; }
.help-footnote { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 11.5px; line-height: 1.4; color: var(--text-3); }
.help-footnote a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* En modo noche los textos de acento van claros (menta, o cian con Pro) */
.cq[data-theme='oscuro'] :is(.help-chips button, .help-action) { color: var(--acc); }
.cq[data-theme='oscuro'] .help-avatar { box-shadow: 0 0 0 1px var(--line-2); }

/* Administración: bandeja de atención al cliente (sin cambios) */
.support-inbox{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.6fr);gap:18px;align-items:start}.support-list,.support-detail{background:var(--surface);border:1px solid var(--line);border-radius:22px;overflow:hidden}.support-list-head{padding:18px;border-bottom:1px solid var(--line)}.support-list-head h2{font-size:17px;margin-bottom:12px}.support-list-head select{width:100%;padding:10px;border:1px solid var(--line-2);border-radius:10px;background:var(--surface);font-size:13px}.support-row{display:block;width:100%;padding:16px 18px;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;cursor:pointer}.support-row[aria-pressed=true]{background:var(--mint-50);box-shadow:inset 3px 0 #f5821f}.support-row strong,.support-row small{display:block;overflow-wrap:anywhere}.support-row small{font-size:11px;color:var(--text-3);margin-top:4px}.support-row p{font-size:12px;margin-top:9px;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.support-row .pill{margin-top:9px}.support-empty{padding:40px 24px;text-align:center;color:var(--text-3);font-size:14px}.support-detail-head{padding:20px;border-bottom:1px solid var(--line);display:flex;gap:12px;justify-content:space-between;align-items:center}.support-detail-head h2{font-size:18px}.support-detail-head p{font-size:12px;color:var(--text-3);margin-top:5px;overflow-wrap:anywhere}.support-thread{display:flex;flex-direction:column;gap:12px;padding:20px;max-height:520px;overflow:auto;background:var(--surface-2)}.support-reply{padding:18px}.support-reply label{font-size:12px;font-weight:800;display:block;margin-bottom:8px}.support-reply textarea{width:100%;min-height:100px;resize:vertical;font:inherit;font-size:15px;padding:12px;border:1px solid var(--line-2);background:var(--surface-2);border-radius:12px}.support-reply .btn{margin-top:10px}.support-note{font-size:11px;color:var(--text-3);margin-top:7px}.support-notice{margin:0 0 20px;padding:16px 20px;border:1px solid var(--line-2);border-radius:16px;background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:13px}.support-notice[hidden]{display:none}.support-pagination{padding:14px;display:flex;justify-content:space-between;gap:8px}.admin-tabbar:has([data-view=support]){grid-template-columns:repeat(6,minmax(0,1fr))}
@media(max-width:900px){.support-inbox{grid-template-columns:1fr}.support-list{max-height:340px;overflow:auto}.support-detail-head{flex-wrap:wrap}}

/* Con la barra de abajo del panel (tabletas y celular), el botón queda encima de ella */
@media (max-width: 1099px) { body:has(#tabbar) .help-launch { bottom: calc(96px + env(safe-area-inset-bottom)); } }
/* Celular (28/09, Luis: «se expande por todo el celular»): ya no es una hoja a pantalla completa, sino
   una ventana flotante con esquinas redondeadas, del alto de lo que muestra y como mucho ~¾ de la
   pantalla: arriba se sigue viendo el panel (tocarlo cierra). Con el teclado abierto, ayuda.js la
   acomoda en lo que queda visible encima del teclado (.with-keyboard). */
@media (max-width: 760px) {
  .help-launch { right: 14px; bottom: calc(16px + env(safe-area-inset-bottom)); min-height: 46px; padding-right: 14px; font-size: 13px; }
  .help-launch .help-avatar { width: 34px; height: 34px; }
  .help-launch.compact { gap: 0; padding: 6px; }
  .help-launch.compact .help-launch-label { display: none; }
  .help-unread { left: 31px; }
  dialog.help-dialog { inset: auto 10px calc(10px + env(safe-area-inset-bottom)) 10px; width: auto; max-width: none; height: auto; min-height: min(380px, 56dvh); max-height: min(600px, 74dvh); border-radius: 24px; box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .55), 0 0 0 1px var(--line-2); transform-origin: calc(100% - 44px) 100%; }
  dialog.help-dialog[open] { display: flex; flex-direction: column; }
  dialog.help-dialog.with-keyboard { top: calc(var(--help-top, 0px) + 8px); bottom: auto; height: calc(var(--help-vh, 100dvh) - 16px); min-height: 0; max-height: none; }
  .help-shell { flex: 1 1 auto; height: auto; }
  .help-scroll { flex: 1 1 auto; }
  .help-header { gap: 10px; padding: 10px 10px 10px 12px; }
  .help-header .help-avatar { width: 38px; height: 38px; }
  .help-heading h2 { font-size: 15.5px; }
  .help-status { margin-top: 1px; font-size: 12px; }
  .help-close { width: 34px; height: 34px; }
  .help-welcome { padding: 16px 14px 8px; }
  .help-welcome h3 { font-size: 18.5px; }
  .help-welcome > p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; }
  .help-chips { gap: 6px; margin-top: 12px; }
  .help-chips button { min-height: 36px; padding: 7px 12px; font-size: 13px; }
  .help-more { gap: 6px; margin-top: 12px; padding-top: 12px; }
  .help-more button { min-height: 34px; padding: 5px 11px; font-size: 12.5px; }
  .help-messages { gap: 12px; padding: 12px 12px 4px; }
  .help-msg { max-width: 92%; }
  .help-bubble { padding: 9px 13px; font-size: 14px; }
  .help-typing { padding: 4px 12px 12px; }
  .help-compose { padding: 8px 10px 10px; }
  .help-modes { margin-bottom: 6px; }
  .help-modes button { min-height: 28px; padding: 3px 11px; font-size: 12px; }
  .help-input-row textarea { min-height: 36px; padding: 7px 0; }
  .help-send { width: 38px; height: 38px; }
  .help-footnote { margin-top: 6px; font-size: 11px; }
  .support-notice { align-items: flex-start; flex-wrap: wrap; } .support-thread { max-height: 440px; } .admin-tabbar:has([data-view=support]) .tab { font-size: 9px; }
}
/* Celulares bajitos (iPhone SE en Safari, Android con barras): que la bienvenida quepa sin desplazar
   («Al equipo» y «Una idea» siguen arriba del cuadro de texto) */
@media (max-width: 760px) and (max-height: 640px) { dialog.help-dialog { min-height: 0; max-height: calc(100dvh - 110px - env(safe-area-inset-bottom)); } .help-more { display: none; } }
/* Celular acostado: que quepa entera */
@media (max-width: 760px) and (max-height: 480px) { dialog.help-dialog { max-height: calc(100dvh - 20px - env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) {
  .cq-help *, .cq-help *::before, .cq-help *::after, dialog.help-dialog { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Permiso para la IA (30/09): una tarjeta dentro del chat antes de la primera pregunta. */
.cq-help .help-consent { margin: 8px 4px 12px; padding: 16px 16px 14px; border-radius: 18px; background: var(--surface-3, #E5F5EB); color: var(--text, #0A2219); box-shadow: inset 0 0 0 1px var(--line, #DCE8E1); }
.cq-help .help-consent h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.cq-help .help-consent p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.cq-help .help-consent-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cq-help .help-consent-actions button { min-height: 40px; padding: 8px 14px; border: 0; border-radius: 999px; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.cq-help .help-consent-ok { color: #fff; background: var(--g700, #0E5C3F); }
.cq-help .help-consent-team { color: var(--text, #0A2219); background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2, #C9DCD1); }
.cq-help .help-consent-note { margin-top: 10px !important; font-size: 12px !important; color: var(--text-3, #56695F); }
.cq-help .help-ia-off { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }