/*
 * Mafer Camila - app de las vendedoras.
 *
 * Pensada para un celular en la mano, de pie, detras de un mostrador:
 * texto grande, botones que se tocan con el pulgar sin apuntar, y nada de
 * fuentes ni iconos que haya que descargar (con mala señal la app tiene que
 * abrir igual). Los colores son los de la marca.
 */

:root {
  --coral: #FF6D60;
  --coral-oscuro: #C4453A;
  --marron: #8D4A01;
  --gris: #4A4A4A;

  --fondo: #FAF7F4;
  --tarjeta: #FFFFFF;
  --coral-suave: #FFF3F0;
  --borde: #ECE4DC;
  --texto: #2D2A26;
  --texto-suave: #7A736C;

  --ok: #2E7D32;
  --ok-fondo: #E8F5E9;
  --error: #C62828;
  --error-fondo: #FFEBEE;
  --aviso: #B26B00;
  --aviso-fondo: #FFF8E1;

  --radio: 14px;
  --barra-alto: 56px;
}

/* De noche, en una tienda a media luz, una pantalla blanca encandila. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #17150F;
    --tarjeta: #221F19;
    --coral-suave: #2E211C;
    --borde: #3A342B;
    --texto: #F2EDE6;
    --texto-suave: #A79F94;
    --gris: #D6CFC6;
    --marron: #E8A765;
    --ok-fondo: #1D3020;
    --error-fondo: #3A1D1D;
    --aviso-fondo: #33280F;
  }
}

* { box-sizing: border-box; }

/*
 * `hidden` tiene que ganar siempre.
 *
 * El navegador oculta lo que lleva el atributo `hidden` con una regla muy
 * debil, y cualquier `display` que pongamos aqui la pisa. Eso dejaba la hoja de
 * "¿Quién está hoy?" —que ocupa la pantalla entera— invisible pero por encima
 * del formulario de entrar: no se podia tocar ni un campo.
 */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* ── Pantallas ─────────────────────────────────────────────────────── */

.pantalla { display: none; min-height: 100%; flex-direction: column; }
.pantalla.activa { display: flex; }

/* ── Entrar ────────────────────────────────────────────────────────── */

.entrar {
  margin: auto;
  width: 100%;
  max-width: 380px;
  padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
}

.entrar h1 {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  color: var(--marron);
  letter-spacing: -0.5px;
}

.entrar__sub {
  margin: 4px 0 28px;
  color: var(--texto-suave);
  font-size: 15px;
}

.entrar label {
  display: block;
  margin: 16px 0 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--gris);
}

.entrar input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--tarjeta);
  color: var(--texto);
  /* 16px exactos: con menos, iOS hace zoom solo al tocar el campo. */
  font-size: 16px;
  font-family: inherit;
}

.entrar input:focus {
  outline: 2px solid var(--coral);
  outline-offset: -1px;
  border-color: var(--coral);
}

/* ── Botones ───────────────────────────────────────────────────────── */

.boton {
  width: 100%;
  min-height: 48px;
  margin-top: 20px;
  padding: 12px 16px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--tarjeta);
  color: var(--texto);
  font-size: 16px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
}

.boton--principal {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

.boton--principal:disabled { opacity: .6; }

/* ── Barra de arriba ───────────────────────────────────────────────── */

.barra {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: var(--barra-alto);
  padding: env(safe-area-inset-top) 8px 0;
  background: var(--coral);
  color: #fff;
}

.barra__titulo { flex: 1; min-width: 0; padding: 0 6px; }

.barra__titulo strong {
  display: block;
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra__sub {
  display: block;
  font-size: 12.5px;
  opacity: .85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.barra__accion {
  flex: none;
  /* 44px es lo que mide un pulgar. Menos que eso y se falla el toque. */
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;
}

.barra__accion:active { background: rgba(0, 0, 0, .12); }

/* Los que llevan palabra en vez de simbolo: siguen midiendo 44px de alto. */
.barra__accion--texto {
  width: auto;
  padding: 0 12px;
  border-radius: 22px;
  font-size: 14.5px;
  font-weight: 500;
  font-family: inherit;
  background: rgba(255, 255, 255, .18);
}

#btn-volver { font-size: 32px; line-height: 1; }

/* ── Filtros ───────────────────────────────────────────────────────── */

.filtros {
  display: flex;
  gap: 8px;
  padding: 12px;
  overflow-x: auto;
  background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
  scrollbar-width: none;
}

.filtros::-webkit-scrollbar { display: none; }

.filtro {
  flex: none;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--borde);
  border-radius: 20px;
  background: transparent;
  color: var(--gris);
  font-size: 14.5px;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.filtro.activo {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

.cuenta {
  display: inline-block;
  min-width: 22px;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .08);
  font-size: 13px;
  font-weight: 600;
}

.filtro.activo .cuenta { background: rgba(255, 255, 255, .25); }

/* ── Lista de conversaciones ───────────────────────────────────────── */

.lista {
  flex: 1;
  margin: 0;
  padding: 12px 12px calc(20px + env(safe-area-inset-bottom));
  list-style: none;
}

.tarjeta {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid var(--borde);
  border-left: 4px solid var(--borde);
  border-radius: var(--radio);
  background: var(--tarjeta);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tarjeta:active { transform: scale(.995); }

/* Sin atender = coral. Es lo primero que tiene que saltar a la vista. */
.tarjeta--nuevo { border-left-color: var(--coral); }
.tarjeta--atendido { border-left-color: var(--ok); }

.tarjeta__fila {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.tarjeta__nombre {
  flex: 1;
  min-width: 0;
  font-size: 16.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tarjeta__cuando {
  flex: none;
  font-size: 12.5px;
  color: var(--texto-suave);
}

.tarjeta__que {
  margin: 4px 0 0;
  color: var(--gris);
  font-size: 14.5px;
}

.tarjeta__pie {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.etiqueta {
  padding: 3px 9px;
  border-radius: 20px;
  background: var(--fondo);
  border: 1px solid var(--borde);
  font-size: 12.5px;
  color: var(--texto-suave);
}

.etiqueta--ok { background: var(--ok-fondo); color: var(--ok); border-color: transparent; }
.etiqueta--alerta { background: var(--error-fondo); color: var(--error); border-color: transparent; }

/* ── La conversacion ───────────────────────────────────────────────── */

.ficha {
  padding: 12px 14px;
  background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
  font-size: 14.5px;
  color: var(--gris);
}

.ficha dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; }
.ficha dt { color: var(--texto-suave); font-size: 13.5px; }
.ficha dd { margin: 0; }

.hilo {
  flex: 1;
  padding: 14px;
  overflow-y: auto;
}

.globo {
  max-width: 82%;
  margin-bottom: 10px;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.globo--cliente {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
}

.globo--nuestro {
  margin-left: auto;
  background: var(--coral);
  color: #fff;
}

.globo__autor {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 600;
  opacity: .9;
}

.globo__hora {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  opacity: .7;
  text-align: right;
}

/* ── Tomar, cerrar, reabrir ────────────────────────────────────────── */

.acciones {
  display: flex;
  gap: 8px;
  padding: 0 14px 12px;
  background: var(--tarjeta);
  border-bottom: 1px solid var(--borde);
}

.acciones:empty { display: none; }

.acciones button {
  flex: 1;
  min-height: 42px;
  margin: 0;
  padding: 8px 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: transparent;
  color: var(--gris);
  font-size: 14.5px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
}

.acciones button.principal {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

.acciones button:disabled { opacity: .5; }

/* ── Responder ─────────────────────────────────────────────────────── */

.responder {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: var(--tarjeta);
  border-top: 1px solid var(--borde);
}

.responder textarea {
  flex: 1;
  max-height: 140px;
  padding: 11px 14px;
  border: 1px solid var(--borde);
  border-radius: 20px;
  background: var(--fondo);
  color: var(--texto);
  /* 16px exactos, si no iOS hace zoom al tocar el campo. */
  font-size: 16px;
  font-family: inherit;
  line-height: 1.4;
  resize: none;
}

.responder textarea:focus {
  outline: 2px solid var(--coral);
  outline-offset: -1px;
}

.responder textarea:disabled { opacity: .6; }

.responder__enviar {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 22px;
  background: var(--coral);
  color: #fff;
  font-size: 15px;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}

.responder__enviar:disabled { opacity: .45; }

/* ── Avisos ────────────────────────────────────────────────────────── */

.aviso {
  margin: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
}

.aviso--error { background: var(--error-fondo); color: var(--error); }
.aviso--ok { background: var(--ok-fondo); color: var(--ok); }
.aviso--tiempo { background: var(--aviso-fondo); color: var(--aviso); }

.vacio {
  padding: 40px 24px;
  color: var(--texto-suave);
  text-align: center;
  font-size: 15px;
}

/* ── ¿Quién está hoy? ──────────────────────────────────────────────── */

.capa {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  background: rgba(0, 0, 0, .45);
}

.hoja {
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  border-radius: 18px 18px 0 0;
  background: var(--tarjeta);
}

.hoja h2 {
  margin: 0 0 14px;
  font-size: 19px;
  color: var(--marron);
}

.equipo { margin: 0; padding: 0; list-style: none; }

.equipo li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--borde);
  font-size: 15px;
}

.equipo span { color: var(--texto-suave); font-size: 13.5px; }

/* En una tablet o en la PC de la tienda, la app no se estira de lado a lado. */
@media (min-width: 720px) {
  .pantalla.activa { max-width: 560px; margin: 0 auto; box-shadow: 0 0 0 1px var(--borde); }
}

/* ── Con qué base está hablando ────────────────────────────────────── */

.cartel {
  display: block;
  margin: -18px 0 26px;
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
}

.cartel--prueba { background: var(--aviso-fondo); color: var(--aviso); }
.cartel--real { background: var(--error-fondo); color: var(--error); }

/* ── Instalar ──────────────────────────────────────────────────────── */

.instalar {
  display: block;
  width: 100%;
  min-height: 46px;
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--coral);
  border-radius: 10px;
  background: transparent;
  color: var(--coral-oscuro);
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
}

@media (prefers-color-scheme: dark) {
  .instalar { color: var(--coral); }
}

.instalar-ios {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--aviso-fondo);
  color: var(--aviso);
  font-size: 13.5px;
}

/* Alguien escribió y sigue esperando. Es lo único de la lista que obliga a
   hacer algo ahora mismo, así que se ve desde lejos. */
.tarjeta--espera { border-left-color: var(--coral); background: var(--coral-suave); }
.tarjeta--espera .tarjeta__nombre { font-weight: 700; }

.etiqueta--espera {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  font-weight: 600;
}

/* ── Buscador ──────────────────────────────────────────────────────── */

.buscador {
  position: relative;
  padding: 12px 12px 0;
  background: var(--tarjeta);
}

.buscador input {
  width: 100%;
  min-height: 44px;
  padding: 10px 40px 10px 14px;
  border: 1px solid var(--borde);
  border-radius: 22px;
  background: var(--fondo);
  color: var(--texto);
  /* 16px exactos, si no iOS hace zoom al tocarlo. */
  font-size: 16px;
  font-family: inherit;
}

.buscador input:focus {
  outline: 2px solid var(--coral);
  outline-offset: -1px;
}

.buscador__limpiar {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--texto-suave);
  font-size: 17px;
  cursor: pointer;
}

/* Mientras se busca se mira todo, así que los filtros dejan de mandar. */
.filtros.apagados { opacity: .4; pointer-events: none; }

/* Chrome y Safari ponen su propia equis en los campos de búsqueda. Salían dos,
   y la del navegador borra el texto sin avisarle a la app, que se quedaba
   creyendo que seguía buscando. Se queda la nuestra. */
.buscador input::-webkit-search-cancel-button,
.buscador input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }