/* Centro de ayuda y chat de soporte.
   Todo mas grande que el resto del sistema, a proposito: estas paginas se
   leen con el telefono en la mano, apurado y a veces de noche. */

/* Los titulos van un punto mas grandes que en el resto del sistema, igual
   que el cuerpo de texto: estas paginas se leen con el telefono en la mano. */

/* ------------------------------------------------------------- portada */
.ayuda-hero h1 { font-size: 1.82rem; margin-bottom: 6px; }
.ayuda-bajada { font-size: 1.02rem; line-height: 1.55; margin: 0 0 18px;
                max-width: 60ch; }

.ayuda-busca { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ayuda-busca input { flex: 1 1 280px; width: auto; padding: 12px 14px;
                     font-size: 1rem; }
.ayuda-busca button { margin-top: 0; }
.ayuda-chat-cta { margin: 14px 0 0; font-size: .95rem; color: var(--tinta-2); }
.ayuda-chat-cta button { font-size: .95rem; color: var(--accion);
                         font-weight: 600; }
.ayuda-resultado { margin: 0; color: var(--tinta-2); font-size: .9rem; }

.ayuda-grid { display: grid; gap: 14px; width: 100%;
              grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.ayuda-grid.chico { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

.ayuda-tarjeta {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  background: var(--sup); border: 1px solid var(--borde); border-radius: 12px;
  padding: 18px 20px; color: inherit;
  box-shadow: var(--s1);
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
@media (hover:hover){.ayuda-tarjeta:hover{ border-color: var(--accion); transform: translateY(-2px);
                       box-shadow: var(--s2); }}
/* Aca SI van emojis, al reves que en el resto del sistema (ver _ico.html):
   el dibujo grande y a color es lo que hace que el estacionero encuentre su
   problema de un vistazo, sin leer los 14 titulos. Un icono monocromo chico
   no cumple esa funcion. */
.ayuda-icono { font-size: 1.8rem; line-height: 1; }
.ayuda-tit { font-family: var(--f-titulo); font-weight: 700;
             color: var(--tinta); font-size: 1.06rem; letter-spacing: var(--tit-track);
             line-height: 1.2; }
.ayuda-res { color: var(--tinta-2); font-size: .88rem; line-height: 1.45; }
.ayuda-ver { color: var(--accion); font-size: .85rem; font-weight: 600;
             margin-top: auto; padding-top: 6px; }

.ayuda-seguridad ul { margin: 8px 0; padding-left: 20px; line-height: 1.6; }
.ayuda-seguridad h2 { font-size: 1.14rem; color: var(--tinta); }

/* --------------------------------------------------------------- guia */
.guia h1 { display: flex; align-items: center; gap: 12px; font-size: 1.68rem;
           margin-bottom: 8px; }
.guia-icono { font-size: 2rem; line-height: 1; }
.guia-resumen { font-size: 1.05rem; line-height: 1.55; margin: 0 0 4px;
                max-width: 62ch; }
.guia-instruccion { background: var(--accion-tenue);
                    border: 1px solid var(--accion-borde);
                    border-radius: 10px; padding: 12px 16px;
                    margin: 18px 0 24px; font-size: .95rem; max-width: 62ch; }

.pasos { list-style: none; margin: 0; padding: 0;
         counter-reset: paso; display: flex; flex-direction: column; gap: 14px; }
.paso {
  display: grid; align-items: start; gap: 4px 18px;
  grid-template-columns: 52px 96px 1fr;
  grid-template-areas: "num dib txt";
  background: var(--sup); border: 1px solid var(--borde); border-radius: 12px;
  padding: 20px 22px;
}
.paso-num {
  grid-area: num; width: 44px; height: 44px; border-radius: 50%;
  background: var(--accion); color: var(--sobre-color); font-family: var(--f-cifra);
  font-weight: 500; font-size: 1.25rem;
  display: flex; align-items: center; justify-content: center;
}
.paso-dibujo { grid-area: dib; color: var(--accion); }
.paso-dibujo svg { width: 96px; height: 80px; display: block; }
.paso-texto { grid-area: txt; }
.paso-texto h2 { margin: 6px 0 8px; font-size: 1.18rem; color: var(--tinta);
                 font-weight: 600; line-height: 1.22; }
.paso-texto p { margin: 0; font-size: 1rem; line-height: 1.6; max-width: 58ch; }
.paso-texto b { color: var(--tinta); }

.guia-sigue { margin-top: 26px; border: 1px dashed var(--borde);
              border-radius: 12px; padding: 20px 22px; background: var(--sup-2); }
.guia-sigue-tit { font-family: var(--f-titulo); font-weight: 700;
                  color: var(--tinta); font-size: 1.1rem; letter-spacing: var(--tit-track); margin-bottom: 6px; }
.guia-sigue p { margin: 0 0 4px; line-height: 1.6; max-width: 62ch; }
button.chat-abrir-grande { background: var(--accion); margin-top: 14px; }

/* --------------------------------------------- enlace desde otras paginas */
.ayuda-hint {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--accion-borde);
  border-radius: 10px; background: var(--accion-tenue);
  padding: 14px 18px; margin: 18px 0 0;
}
.ayuda-hint-txt { flex: 1 1 260px; font-size: .93rem; line-height: 1.5; }
.ayuda-hint-txt b { color: var(--tinta); }
.ayuda-hint .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.ayuda-hint a { text-decoration: none; }

/* El Empleado adentro de una pantalla: una linea sobria al pie, no una
   tarjeta. Va donde quedo plegado el detalle que la pantalla dejo de mostrar
   de arranque, y compite con nada — lo que se vino a mirar son las cifras de
   arriba. Vive aca con el resto del chat: es el mismo boton, con otra ropa. */
.pregunta-emp {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; color: var(--tinta-3); font-size: .93rem;
}
.pregunta-emp button { margin: 0; }

/* ---------------------------------------------------------- chat widget */
#chat-boton {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  background: var(--accion); color: var(--sobre-color); border: 0; border-radius: 28px;
  padding: 13px 20px; font-size: .95rem; font-weight: 600; cursor: pointer;
  box-shadow: var(--s2); margin: 0;
}
@media (hover:hover){#chat-boton:hover{ filter: brightness(1.1); }}

#chat-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 61;
  width: min(400px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 40px));
  background: var(--sup); border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: var(--s2);
  display: flex; flex-direction: column; overflow: hidden;
}
#chat-panel[hidden] { display: none; }

/* En Ayuda el chat no flota: es la pantalla. Se le sacan las tres cosas que
   lo hacen un globito —la posicion fija, el ancho de burbuja y la sombra— y
   el alto pasa a medirse contra la ventana, que es lo que hace que la caja de
   escribir quede siempre a la vista sin empujar la pagina a lo largo. */
#chat-panel.chat-fijo {
  position: static; width: auto;
  height: min(620px, calc(100vh - 260px)); min-height: 380px;
  box-shadow: none; margin: 0 0 22px;
}
.ayuda-abajo { margin-top: 4px; }
.guias-lista { list-style: none; margin: 12px 0 0; padding: 0;
               display: grid; gap: 2px; }
.guias-lista li { margin: 0; }
.guias-lista a {
  display: block; padding: 9px 10px; border-radius: 8px;
  text-decoration: none; color: var(--tinta); font-size: .93rem;
  border: 1px solid transparent;
}
@media (hover:hover){.guias-lista a:hover{ background: var(--accion-tenue);
                       border-color: var(--accion-borde); }}
.chat-cab { background: var(--accion); color: var(--sobre-color); padding: 13px 16px;
            display: flex; align-items: center; justify-content: space-between; }
.chat-cab-tit { font-weight: 700; font-size: .98rem; }
.chat-cab-sub { font-size: .76rem; margin-top: 1px;
                color: color-mix(in srgb, var(--sobre-color) 72%, transparent); }
.chat-cerrar { background: none; border: 0; color: var(--sobre-color); font-size: 1.3rem;
               cursor: pointer; margin: 0; padding: 0 4px; line-height: 1; }
@media (hover:hover){.chat-cerrar:hover{ color: var(--sobre-color); filter: none; background: none; }}

.chat-cuerpo { flex: 1; overflow-y: auto; padding: 16px;
               display: flex; flex-direction: column; gap: 12px;
               background: var(--fondo); }
.chat-msg { max-width: 88%; padding: 11px 14px; border-radius: 12px;
            font-size: .93rem; line-height: 1.55; white-space: pre-wrap;
            overflow-wrap: anywhere; }
.chat-msg.bot { background: var(--sup); border: 1px solid var(--borde);
                align-self: flex-start; border-bottom-left-radius: 4px; }
.chat-msg.yo { background: var(--accion); color: var(--sobre-color); align-self: flex-end;
               border-bottom-right-radius: 4px; }
.chat-msg.error { background: var(--rojo-fondo); border: 1px solid var(--rojo-borde);
                  color: var(--rojo); align-self: flex-start; }
.chat-msg b { font-weight: 700; }
/* ESTO ESTA MAL. Va debajo de la respuesta y no adentro: adentro compite con
   lo que SADIA acaba de decir, y esto tiene que estar a mano sin gritar.
   Apagado a proposito —el gesto es del que ya vio un error, no una pregunta
   que se le hace al dueño en cada respuesta. */
.chat-mal { align-self: flex-start; margin: -6px 0 0 2px; }
.chat-mal button { background: none; border: 0; padding: 2px 4px;
                   font-size: .75rem; color: var(--tinta-3);
                   cursor: pointer; text-decoration: underline; }
@media (hover:hover){.chat-mal button:hover:not(:disabled){ color: var(--tinta-2); }}
.chat-mal button:disabled { cursor: default; text-decoration: none;
                            color: var(--ok); }
.chat-msg a { color: inherit; }
.chat-msg.bot a { color: var(--accion); }
.chat-msg ol, .chat-msg ul { margin: 6px 0; padding-left: 20px; }
.chat-msg li { margin: 3px 0; }

.chat-sugerencias { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-sugerencias button {
  margin: 0; background: var(--sup); color: var(--accion-viva);
  border: 1px solid var(--accion-borde); border-radius: 16px; padding: 6px 12px;
  font-size: .82rem; font-weight: 500; cursor: pointer;
}
@media (hover:hover){.chat-sugerencias button:hover{ background: var(--accion-tenue); filter: none; }}

.chat-pie { border-top: 1px solid var(--borde); padding: 10px 12px;
            background: var(--sup); }
.chat-form { display: flex; gap: 8px; align-items: flex-end; }
.chat-form textarea {
  flex: 1; resize: none; border: 1px solid var(--borde); border-radius: 10px;
  padding: 10px 12px; font-size: .93rem; line-height: 1.4; max-height: 110px;
  min-height: 42px;
}
.chat-form button { margin: 0; padding: 10px 16px; border-radius: 10px;
                    font-size: .9rem; }
.chat-nota { font-size: .7rem; color: var(--tinta-2); margin: 7px 2px 0;
             line-height: 1.4; }

.chat-puntos { display: inline-flex; gap: 4px; align-items: center; }
.chat-puntos i { width: 6px; height: 6px; border-radius: 50%;
                 background: var(--tinta-2); display: block;
                 animation: chat-lat 1.2s infinite ease-in-out; }
.chat-puntos i:nth-child(2) { animation-delay: .18s; }
.chat-puntos i:nth-child(3) { animation-delay: .36s; }
@keyframes chat-lat { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .chat-puntos i { animation: none; opacity: .55; }
}

/* ------------------------------------------------------------- celular */
@media (max-width: 620px) {
  .paso { grid-template-columns: 44px 1fr;
          grid-template-areas: "num txt" "dib dib"; gap: 4px 14px; }
  .paso-dibujo { justify-self: center; margin-top: 10px; }
  .paso-num { width: 38px; height: 38px; font-size: 1.1rem; }
  .paso-texto h2 { font-size: 1.06rem; margin-top: 4px; }
  .guia h1 { font-size: 1.38rem; }
  #chat-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh;
                border-radius: 0; border: 0; }
  /* La regla de arriba es para el que flota. El de Ayuda sigue siendo un
     bloque de la pagina: a pantalla completa taparia las guias y el aviso de
     lo que nunca se pide. */
  #chat-panel.chat-fijo { width: auto; height: min(560px, calc(100vh - 210px));
                          border-radius: 14px; border: 1px solid var(--borde); }
}

/* Donde hay barra de abajo (celular y tablet, `.barra-app` en style.css) el
   globo del chat cae justo encima de ella y le tapa dos de los cinco
   destinos: la app deja de navegarse por culpa del que vino a ayudar. Sube
   arriba de la barra y se vuelve redondo — con el rótulo puesto se comía
   media pantalla de ancho.

   El corte es 900 y no 620 porque la barra aparece a los 900. El alto sale
   de la barra misma: 56 del renglón más la franja del gesto del iPhone. */
@media (max-width: 900px) {
  #chat-boton {
    /* Arriba de la pildora flotante (62 px, a 12 del borde), no de la
       barra pegada al piso que habia antes. */
    right: 14px; bottom: calc(86px + env(safe-area-inset-bottom));
    width: 48px; height: 48px; padding: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
  }
  #chat-boton .chat-boton-txt { display: none; }
}

/* En el teléfono el panel abierto ya va a pantalla completa (regla de 620) y
   tapa la barra a propósito. En la tablet flota, así que se sube igual que
   el globo: si no, se apoya sobre los mismos destinos. */
@media (min-width: 621px) and (max-width: 900px) {
  #chat-panel { bottom: calc(56px + env(safe-area-inset-bottom) + 12px); }
}

/* ================================================ la ficha del Empleado
   El cuadrito con los numeros que llega ANTES que el texto. Habla el mismo
   idioma que la puerta —lista agrupada, el separador arrancando donde arranca
   el texto, la cifra a la derecha—, pero con clases propias: ayuda.css es
   global y una clase sin prefijo se le pisa a media aplicacion. */
.chat-msg.chat-ficha { max-width: 100%; align-self: stretch; padding: 0;
  background: none; border: 0; white-space: normal; }
.cf-titulo { margin: 0 0 6px; padding-left: 2px; font-size: .75rem;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-2); }
.cf-grupo { background: var(--sup); border: 1px solid var(--borde);
  border-radius: 14px; overflow: hidden; }
.cf-ren { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  position: relative; }
.cf-ren + .cf-ren::before { content: ''; position: absolute; top: 0;
  left: 14px; right: 0; height: 1px; background: var(--borde); }
.cf-txt { flex: 1; min-width: 0; font-size: .9rem; line-height: 1.35; }
.cf-txt span { display: block; margin-top: 1px; font-size: .78rem;
  color: var(--tinta-2); }
.cf-num { font-size: .93rem; font-weight: 600; white-space: nowrap;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cf-num.ok { color: var(--ok); }
.cf-num.alerta { color: var(--alerta); }
.cf-num.mal { color: var(--mal); }
.cf-pie { margin: 7px 2px 0; font-size: .78rem; line-height: 1.45;
  color: var(--tinta-2); }
/* `.chat-msg a { color: inherit }` le gana a una clase sola: el enlace tiene
   que nombrar a la ficha para quedarse con el color de accion. */
.chat-ficha .cf-ir { display: inline-block; margin: 8px 2px 0;
  font-size: .85rem; font-weight: 500; color: var(--accion);
  text-decoration: none; }
.chat-ficha .cf-ir:active { opacity: .6; }

/* EL CONSEJO. Es lo unico de la ficha que no salio de una medicion, asi que
   no puede parecerse a los renglones de arriba: no lleva el fondo de tarjeta
   sino una barra al costado y su propio rotulo. La diferencia visual no es
   decoracion — es lo que deja al dueno distinguir un numero que no se discute
   de una recomendacion que si (ADR-0020). */
.cf-consejo { margin: 9px 0 0; padding: 2px 0 2px 11px;
  border-left: 2px solid var(--accion); }
.cf-consejo b { display: block; font-size: .7rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--accion); }
.cf-consejo p { margin: 2px 0 0; font-size: .85rem; line-height: 1.45; }

/* La respuesta que se borro por nombrar un numero que no salio de ninguna
   consulta. No va en rojo de alarma: no se rompio nada y los numeros de
   arriba siguen siendo buenos. Va apagada. */
.chat-msg.chat-borrado { color: var(--tinta-2); font-style: italic; }

/* El microfono. Prendido late, para que se vea que esta escuchando. */
.chat-form .chat-voz { flex: none; margin: 0; padding: 0;
  width: 42px; height: 42px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--borde);
  border-radius: 10px; background: var(--sup); color: var(--tinta-2);
  cursor: pointer; }
@media (hover:hover){.chat-form .chat-voz:hover{ background: var(--sup-2); filter: none; }}
.chat-form .chat-voz.escuchando { background: var(--mal); color: #fff;
  border-color: var(--mal); animation: chat-late 1.4s infinite ease-in-out; }
@keyframes chat-late { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .chat-form .chat-voz.escuchando { animation: none; }
}