/* ══ Módulo WHATSAPP (supervisión, solo lectura) ══════════════════════
   Usa las variables y piezas de css/app.css del sistema (papel hueso,
   tinta, olivo, azul marino, radio --r). Todo lo propio va con prefijo
   .wa- para no chocar con nada. Los valores después de la coma son
   respaldo por si se abre sin app.css.                                 */

.wa { --wa-alto: calc(100vh - var(--barra-h, 56px) - 11.5rem); display: flex; flex-direction: column; gap: .8rem; }
.wa-demo {
  border: 1px dashed var(--alerta, #a8823c); color: var(--alerta, #a8823c);
  background: color-mix(in srgb, var(--alerta, #a8823c) 8%, transparent);
  padding: .45rem .8rem; font-size: .82rem; border-radius: var(--r, 4px);
}
.wa-demo b { letter-spacing: .08em; }

/* Pestañas por área */
.wa-areas { display: flex; gap: .4rem; flex-wrap: wrap; border-bottom: 1px solid var(--borde, rgba(0,0,0,.1)); }
.wa-area {
  font: inherit; background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .55rem .9rem .6rem; cursor: pointer; color: var(--ink-2, #55585c);
  display: inline-flex; align-items: center; gap: .5rem; margin-bottom: -1px;
}
.wa-area:hover { color: var(--ink, #16171a); }
.wa-area[aria-selected="true"] { color: var(--ink, #16171a); border-bottom-color: var(--azul, #1e3155); font-weight: 600; }
.wa-area .wa-n { font-size: .75rem; color: var(--ink-mudo, #8b8e92); font-variant-numeric: tabular-nums; }
.wa-punto { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ink-mudo, #8b8e92); flex: 0 0 auto; }
.wa-punto.ok { background: var(--bien, #4a7c59); }
.wa-punto.espera { background: var(--alerta, #a8823c); }
.wa-punto.mal { background: var(--critico, #9c4038); }

.wa-aviso-area {
  font-size: .82rem; color: var(--ink-2, #55585c); padding: .45rem .7rem;
  border-left: 2px solid var(--alerta, #a8823c); background: var(--superficie, #fff);
}
.wa-aviso-area.mal { border-left-color: var(--critico, #9c4038); }

/* Las dos columnas */
.wa-panel {
  display: grid; grid-template-columns: minmax(270px, 340px) 1fr;
  background: var(--superficie, #fff); border: 1px solid var(--borde, rgba(0,0,0,.1));
  border-radius: var(--r, 4px); min-height: 460px; height: max(460px, var(--wa-alto)); overflow: hidden;
}
.wa-lista { border-right: 1px solid var(--borde, rgba(0,0,0,.1)); display: flex; flex-direction: column; min-height: 0; }
.wa-buscar { padding: .7rem; border-bottom: 1px solid var(--linea, rgba(0,0,0,.09)); display: flex; flex-direction: column; gap: .5rem; }
.wa-buscar input {
  width: 100%; font: inherit; font-size: .92rem; padding: .55rem .7rem;
  border: 1px solid var(--borde, rgba(0,0,0,.1)); border-radius: var(--r, 4px);
  background: var(--plano, #f4f3f0); color: var(--ink, #16171a);
}
.wa-filtros { display: flex; gap: .35rem; }
.wa-filtros button {
  font: inherit; font-size: .76rem; padding: .18rem .6rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--borde, rgba(0,0,0,.1)); background: var(--superficie-2, #f0eeea); color: var(--ink-2, #55585c);
}
.wa-filtros button[aria-pressed="true"] { background: var(--azul, #1e3155); border-color: var(--azul, #1e3155); color: #fff; }
.wa-chats { overflow-y: auto; flex: 1; min-height: 0; }
.wa-sub { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mudo, #8b8e92); padding: .7rem .8rem .3rem; }
.wa-chat {
  display: grid; grid-template-columns: 2.4rem 1fr auto; gap: .2rem .65rem; align-items: center;
  width: 100%; text-align: left; font: inherit; background: none; border: 0; cursor: pointer;
  padding: .6rem .8rem; border-bottom: 1px solid var(--linea, rgba(0,0,0,.09)); color: var(--ink, #16171a);
}
.wa-chat:hover { background: var(--superficie-2, #f0eeea); }
.wa-chat[aria-current="true"] { background: var(--azul-suave, #e8ebf2); box-shadow: inset 2px 0 0 var(--azul, #1e3155); }
.wa-ava {
  grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  background: var(--superficie-2, #f0eeea); color: var(--ink-2, #55585c); border: 1px solid var(--borde, rgba(0,0,0,.1));
}
.wa-ava.grupo { border-radius: 30%; }
.wa-chat-nom { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-chat-hora { font-size: .72rem; color: var(--ink-mudo, #8b8e92); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wa-chat-ult { grid-column: 2 / 4; font-size: .82rem; color: var(--ink-2, #55585c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-chat-ult mark, .wa-txt mark { background: color-mix(in srgb, var(--alerta, #a8823c) 28%, transparent); color: inherit; padding: 0 .1em; }
.wa-vacio { padding: 2rem 1rem; text-align: center; color: var(--ink-mudo, #8b8e92); font-size: .88rem; }

/* Conversación */
.wa-conv { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--plano, #f4f3f0); }
.wa-conv-cab {
  display: flex; align-items: center; gap: .7rem; padding: .65rem 1rem;
  background: var(--superficie, #fff); border-bottom: 1px solid var(--borde, rgba(0,0,0,.1));
}
.wa-conv-cab .wa-ava { grid-row: auto; }
.wa-conv-tit { min-width: 0; flex: 1; }
.wa-conv-tit b { display: block; font-family: var(--display, Georgia, serif); font-weight: 400; font-size: 1.12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-conv-tit small { color: var(--ink-mudo, #8b8e92); font-size: .78rem; }
.wa-conv-cab .wa-volver { display: none; }
.wa-msgs { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; min-height: 0; }
.wa-mas { align-self: center; margin-bottom: .5rem; }
.wa-dia {
  align-self: center; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mudo, #8b8e92); margin: .8rem 0 .4rem; padding: .15rem .7rem;
  border: 1px solid var(--borde, rgba(0,0,0,.1)); border-radius: 999px; background: var(--superficie, #fff);
}
.wa-burbuja {
  max-width: min(72%, 560px); padding: .45rem .7rem .3rem; border-radius: 10px;
  background: var(--superficie, #fff); border: 1px solid var(--borde, rgba(0,0,0,.1));
  align-self: flex-start; position: relative; font-size: .92rem; line-height: 1.38;
}
.wa-burbuja.mia { align-self: flex-end; background: var(--verde-suave, #e7ebe7); border-color: color-mix(in srgb, var(--verde, #3f5c4c) 22%, transparent); }
.wa-burbuja.resaltada { outline: 2px solid var(--alerta, #a8823c); outline-offset: 2px; }
.wa-autor { display: block; font-size: .76rem; font-weight: 700; color: var(--azul, #1e3155); margin-bottom: .1rem; }
.wa-txt { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink, #16171a); }
.wa-pie { display: flex; gap: .45rem; justify-content: flex-end; align-items: center; font-size: .68rem; color: var(--ink-mudo, #8b8e92); margin-top: .15rem; font-variant-numeric: tabular-nums; }
.wa-cita {
  font-size: .8rem; color: var(--ink-2, #55585c); border-left: 2px solid var(--azul, #1e3155);
  padding: .2rem .5rem; margin-bottom: .3rem; background: color-mix(in srgb, var(--azul, #1e3155) 5%, transparent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wa-media {
  display: flex; gap: .6rem; align-items: center; padding: .45rem .55rem; margin-bottom: .25rem;
  border: 1px solid var(--borde, rgba(0,0,0,.1)); border-radius: var(--r, 4px); background: color-mix(in srgb, var(--superficie-2, #f0eeea) 70%, transparent);
  font-size: .82rem; color: var(--ink-2, #55585c);
}
.wa-media img { width: 64px; height: 64px; object-fit: cover; border-radius: 3px; flex: 0 0 auto; filter: saturate(.9); }
.wa-media .wa-ico { font-size: 1.3rem; width: 2rem; text-align: center; flex: 0 0 auto; }
.wa-media b { color: var(--ink, #16171a); font-weight: 600; display: block; }
.wa-marca { font-size: .74rem; margin-top: .2rem; padding: .2rem .45rem; border-radius: 3px; }
.wa-marca.borrado { color: var(--critico, #9c4038); background: color-mix(in srgb, var(--critico, #9c4038) 8%, transparent); }
.wa-marca.editado { color: var(--alerta, #a8823c); background: color-mix(in srgb, var(--alerta, #a8823c) 9%, transparent); }
.wa-solo-lectura {
  padding: .6rem 1rem; text-align: center; font-size: .8rem; color: var(--ink-mudo, #8b8e92);
  border-top: 1px solid var(--borde, rgba(0,0,0,.1)); background: var(--superficie, #fff);
}
.wa-conv-vacia { flex: 1; display: grid; place-items: center; text-align: center; color: var(--ink-mudo, #8b8e92); padding: 2rem; }
.wa-conv-vacia b { display: block; font-family: var(--display, Georgia, serif); font-weight: 400; font-size: 1.25rem; color: var(--ink-2, #55585c); margin-bottom: .3rem; }

/* Entrada (confirmar contraseña) */
.wa-entrar { max-width: 420px; margin: 2rem auto; display: flex; flex-direction: column; gap: .8rem; }
.wa-entrar label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--ink-2, #55585c); }
.wa-entrar input { font: inherit; padding: .6rem .7rem; border: 1px solid var(--borde, rgba(0,0,0,.1)); border-radius: var(--r, 4px); background: var(--superficie, #fff); color: var(--ink, #16171a); }
.wa-error { color: var(--critico, #9c4038); font-size: .85rem; min-height: 1.2em; }

/* Teléfono: una columna; al abrir un chat se esconde la lista. */
@media (max-width: 760px) {
  .wa-panel { grid-template-columns: 1fr; height: auto; min-height: 70vh; }
  .wa-panel.abierto .wa-lista { display: none; }
  .wa-panel:not(.abierto) .wa-conv { display: none; }
  .wa-lista { border-right: 0; }
  .wa-chats { max-height: none; }
  .wa-msgs { max-height: 62vh; }
  .wa-conv-cab .wa-volver { display: inline-flex; }
  .wa-burbuja { max-width: 88%; }
}

/* 20261026e (sistema): aviso «aún no activado» y lista de áreas planeadas */
.wa-noact { max-width: 760px; margin: 1rem auto; display: flex; flex-direction: column; gap: .7rem; }
.wa-noact h2 { margin: 0; }
.wa-noact code { font-size: .85em; }
.wa-areas-plan { border-bottom: 0; }
.wa-areas-plan .wa-area { cursor: default; padding: .35rem .7rem; border: 1px solid var(--borde, rgba(0,0,0,.1)); border-radius: var(--r, 4px); margin: 0; }