/* 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. */


/* 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 hace que el estacionero encuentre su problema
   de un vistazo, sin leer los 14 titulos. */
.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. 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 la posicion fija,
   el ancho de burbuja y la sombra, y el alto se mide contra la ventana para
   que la caja de escribir quede siempre a la vista sin empujar la pagina. */
#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), apagado a proposito: el gesto es del
   que ya vio un error, no una pregunta 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 encima y le tapa dos de los cinco destinos: sube
   arriba de la barra y se vuelve redondo (con el rotulo comia media
   pantalla). El corte es 900 y no 620 porque la barra aparece a los 900; el
   alto sale de la barra: 56 del renglon mas 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 idioma de la puerta (lista agrupada, separador donde
   arranca el texto, cifra a la derecha) pero con clases propias: ayuda.css
   es global y una clase sin prefijo se pisa en 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 se parece a los renglones de arriba: lleva una barra al costado y su
   propio rotulo en vez del fondo de tarjeta. La diferencia 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; }
}