/* La bandeja. Colores como variables: claro y oscuro salen del mismo lugar. */
:root {
  --fondo: #f5f6f4;
  --superficie: #ffffff;
  --superficie-2: #eef1ee;
  --texto: #18201c;
  --suave: #5b6660;
  --borde: #d8ddd9;
  --marca: #117a65;
  --marca-texto: #ffffff;
  --marca-suave: #dff1ec;
  --persona: #8a4b08;
  --persona-suave: #fbeedb;
  --sobre-persona: #ffffff;   /* texto encima de --persona (≥ 4.5:1 en los dos modos) */
  --alerta: #b3261e;          /* «Sin atender»: nadie contesta */
  --sobre-alerta: #ffffff;
  --peligro: #b3261e;
  --peligro-suave: #fbe3e1;
  --burbuja-entra: #ffffff;
  --burbuja-sale: #dff1ec;
  --burbuja-humano: #fbeedb;
  --sombra: 0 1px 2px rgb(0 0 0 / 6%), 0 2px 8px rgb(0 0 0 / 5%);
  --radio: 10px;
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #111614;
    --superficie: #1a201d;
    --superficie-2: #222a26;
    --texto: #e7ece9;
    --suave: #9aa6a0;
    --borde: #2f3934;
    --marca: #3cc4a3;
    --marca-texto: #06231c;
    --marca-suave: #173a31;
    --persona: #f0b35c;
    --persona-suave: #3a2a14;
    --sobre-persona: #1f1405;
    --alerta: #ff8a80;
    --sobre-alerta: #2a0906;
    --peligro: #ff8a80;
    --peligro-suave: #3d1b19;
    --burbuja-entra: #222a26;
    --burbuja-sale: #173a31;
    --burbuja-humano: #3a2a14;
    --sombra: none;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.45 var(--letra);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { line-height: 1.2; margin: 0; }
.suave { color: var(--suave); }
.nota { font-size: 13px; margin: 4px 0 0; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.error { color: var(--peligro); background: var(--peligro-suave); padding: 8px 10px; border-radius: 8px; margin: 8px 0 0; }
.vacio { color: var(--suave); padding: 24px 16px; text-align: center; }
.vacio--grande { display: grid; place-items: center; height: 100%; }
.sello { font-size: 12px; color: var(--suave); }

.boton {
  border: 1px solid var(--borde);
  background: var(--superficie);
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  min-height: 40px;
  white-space: nowrap;
}
.boton:hover { background: var(--superficie-2); }
.boton:disabled { opacity: .55; cursor: default; }
.boton--principal { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); font-weight: 600; }
.boton--principal:hover { filter: brightness(1.06); background: var(--marca); }
.boton--chico { padding: 4px 10px; min-height: 32px; font-size: 14px; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

input, select, textarea {
  width: 100%;
  border: 1px solid var(--borde);
  background: var(--superficie);
  border-radius: 8px;
  padding: 9px 10px;
  min-width: 0;
}
textarea { resize: vertical; }
label { display: block; margin: 12px 0 0; font-weight: 600; font-size: 14px; }
label > input, label > select, label > textarea { margin-top: 4px; font-weight: 400; }
.casilla { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.casilla input { width: auto; }

/* ── Entrar ──────────────────────────────────────────────────────────── */
.entrar { min-height: 100%; display: grid; place-items: center; padding: 16px; }
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra); }
.entrar__caja { width: min(380px, 100%); padding: 28px 24px; }
.entrar__caja .boton { width: 100%; margin-top: 18px; }
.marca { font-size: 26px; color: var(--marca); }
.marca__nombre { letter-spacing: -.01em; }

/* ── La app ──────────────────────────────────────────────────────────── */
.app { height: 100%; display: flex; flex-direction: column; }
.barra {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.barra__izq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.barra__izq .marca__nombre { color: var(--marca); font-size: 18px; }
.barra__der { margin-left: auto; display: flex; align-items: center; gap: 10px; min-width: 0; }
.yo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; font-size: 13px; }
.negocio { width: auto; padding: 5px 8px; }
.negocio-uno { font-weight: 600; }
.pestanas { display: flex; gap: 4px; }
.pestana {
  border: 0; background: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; color: var(--suave); font-weight: 600;
}
.pestana[aria-selected="true"] { background: var(--marca-suave); color: var(--texto); }
.aviso-global {
  margin: 0; padding: 6px 16px; background: var(--persona-suave); color: var(--texto);
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap;
}
.aviso-global > span { min-width: 0; flex: 1 1 220px; overflow-wrap: anywhere; font-weight: 600; }
.aviso-global .boton { flex: none; }
.pie { padding: 4px 16px; text-align: right; }

/* Conversaciones: lista | hilo */
.bandeja { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(280px, 360px) 1fr; }
.lista { border-right: 1px solid var(--borde); display: flex; flex-direction: column; min-height: 0; background: var(--superficie); }
.filtros { display: flex; gap: 6px; padding: 10px 12px; flex-wrap: wrap; border-bottom: 1px solid var(--borde); }
.filtro {
  border: 1px solid var(--borde); background: var(--superficie); border-radius: 999px; padding: 4px 10px; cursor: pointer; font-size: 13px;
}
.filtro[aria-pressed="true"] { background: var(--marca); color: var(--marca-texto); border-color: var(--marca); }
.cuenta { background: var(--persona); color: var(--sobre-persona); border-radius: 999px; padding: 0 6px; font-size: 12px; margin-left: 2px; }
.conversaciones { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.conv {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--borde); background: none; padding: 10px 14px; cursor: pointer;
}
.conv:hover { background: var(--superficie-2); }
.conv[aria-current="true"] { background: var(--marca-suave); }
.conv__nombre { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv__hora { color: var(--suave); font-size: 12px; white-space: nowrap; }
.conv__texto { grid-column: 1 / -1; color: var(--suave); font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv__etiquetas { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.etiqueta { font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--superficie-2); color: var(--suave); white-space: nowrap; }
.etiqueta--agente { background: var(--marca-suave); color: var(--texto); }
.etiqueta--persona { background: var(--persona-suave); color: var(--texto); }
.etiqueta--espera { background: var(--persona); color: var(--sobre-persona); font-weight: 600; }
.etiqueta--alerta { background: var(--alerta); color: var(--sobre-alerta); font-weight: 600; }
.cuenta--suave { background: var(--superficie-2); color: var(--texto); border: 1px solid var(--borde); }
.filtro[aria-pressed="true"] .cuenta--suave { background: var(--marca-texto); color: var(--marca); border-color: transparent; }

.hilo { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
#hilo { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.hilo__cabeza {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 10px 16px; background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.hilo__quien { min-width: 0; flex: 1; }
.hilo__quien h2 { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hilo__quien p { margin: 0; font-size: 13px; }
.hilo__estado { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hilo__botones { display: flex; gap: 8px; flex-wrap: nowrap; }
.estado { margin: 0; font-size: 13px; padding: 4px 10px; border-radius: 999px; }
.estado--agente { background: var(--marca-suave); }
.estado--persona { background: var(--persona-suave); }
.estado--alerta { background: var(--alerta); color: var(--sobre-alerta); font-weight: 600; }
.volver { display: none; }

.no-salieron { margin: 8px 16px 0; padding: 8px 10px; border-radius: 8px; background: var(--peligro-suave); font-size: 13px; display: grid; gap: 4px; }
.no-salio { overflow-wrap: anywhere; }
.no-salio--incierto { color: var(--texto); }
.no-salio__texto { color: var(--suave); }
.mensajes { list-style: none; margin: 0; padding: 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.msj { max-width: min(560px, 85%); display: flex; flex-direction: column; gap: 2px; }
.msj--entra { align-self: flex-start; }
.msj--sale { align-self: flex-end; align-items: flex-end; }
.burbuja {
  padding: 8px 12px; border-radius: 14px; background: var(--burbuja-entra); border: 1px solid var(--borde);
  white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: var(--sombra);
}
.msj--sale .burbuja { background: var(--burbuja-sale); border-color: transparent; }
.msj--humano .burbuja { background: var(--burbuja-humano); }
.msj__pie { font-size: 12px; color: var(--suave); }
.msj__agente { font-size: 12px; color: var(--suave); padding-left: 4px; }
.msj__agente--pase { color: var(--persona); }
.cargar-del-pase { margin-left: 6px; color: var(--texto); font-weight: 600; white-space: nowrap; }
.dia { align-self: center; font-size: 12px; color: var(--suave); margin: 8px 0 2px; }

.contestar {
  display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--superficie); border-top: 1px solid var(--borde);
}
.contestar .nota, .contestar .error, .recordatorio { grid-column: 1 / -1; margin: 0; }
.nota-corta { display: none; }
.recordatorio {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  padding: 6px 6px 6px 12px; border-radius: 8px; background: var(--persona-suave); font-size: 14px; font-weight: 600;
}
.error .boton { margin-left: 6px; vertical-align: middle; }
.error__ojo { font-weight: 600; }

/* Lo que sabe el agente */
.saber { flex: 1; overflow-y: auto; padding: 16px; max-width: 980px; width: 100%; margin: 0 auto; }
.saber__intro h2 { font-size: 20px; }
.saber__intro p { max-width: 70ch; }
.saber__botones { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.saber__sub { margin: 28px 0 0; font-size: 17px; }
.falta-cargar { background: var(--persona-suave); border-radius: var(--radio); padding: 12px 14px; margin: 8px 0 16px; }
.falta-cargar p { margin: 0 0 6px; }
.falta-cargar ul { margin: 0; padding-left: 18px; }
.falta-cargar a { color: var(--texto); font-weight: 600; }
.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 10px; margin-top: 10px; }
.ficha {
  text-align: left; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.ficha:hover { border-color: var(--marca); }
.ficha--apagada { opacity: .6; }
.ficha__cabeza { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ficha__titulo { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ficha__texto { color: var(--suave); font-size: 14px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tipo { font-size: 12px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.tipo--dato { background: var(--marca-suave); }
.tipo--falta { background: var(--persona-suave); }
.tipo--prohibido { background: var(--peligro-suave); }
.tipo--regla { background: var(--superficie-2); }

.dialogo {
  border: 1px solid var(--borde); border-radius: 14px; padding: 20px; width: min(560px, calc(100vw - 32px));
  background: var(--superficie); color: var(--texto); box-shadow: 0 10px 40px rgb(0 0 0 / 25%);
}
.dialogo::backdrop { background: rgb(0 0 0 / 45%); }
.dialogo h2 { font-size: 18px; }
.dialogo__botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
details { margin-top: 12px; }
summary { cursor: pointer; color: var(--suave); }
.examen { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--superficie-2); font-size: 14px; }
.examen ul { margin: 6px 0 0; padding-left: 18px; }
.examen__culpa { margin: 0 0 8px; font-weight: 600; color: var(--peligro); }
.antes { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--superficie-2); font-size: 13px; }
.antes p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.saber-aviso {
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
  background: var(--marca-suave); border-radius: var(--radio); padding: 10px 14px; margin: 8px 0 16px; font-size: 14px;
}
.saber-aviso--ojo { background: var(--persona-suave); }
.saber-aviso > div { min-width: 0; flex: 1 1 240px; overflow-wrap: anywhere; }
.saber-aviso p { margin: 0 0 4px; }
.saber-aviso ul { margin: 4px 0 0; padding-left: 18px; }
.tipo--vencida { background: var(--alerta); color: var(--sobre-alerta); font-weight: 600; }
.vacio--fichas { grid-column: 1 / -1; border: 1px dashed var(--borde); border-radius: var(--radio); }
.vacio--fichas p { margin: 0 0 12px; }
.disculpa { margin: 8px 0; padding: 8px 12px; border-left: 3px solid var(--marca); background: var(--superficie-2); border-radius: 0 8px 8px 0; overflow-wrap: anywhere; }
.ojo { font-weight: 600; }
.dialogo--devolver .dialogo__botones { flex-wrap: wrap; }

/* ── Teléfono y tablet angosta: una columna, con «← Lista» ─────────────── */
@media (max-width: 767px) {
  .barra { padding: 8px 12px; gap: 8px; }
  .pestanas { order: 3; width: 100%; }
  .pestana { flex: 1; }
  .yo { display: none; }
  .bandeja { grid-template-columns: 1fr; }
  .bandeja[data-abierta="no"] .hilo { display: none; }
  .bandeja[data-abierta="si"] .lista { display: none; }
  .volver { display: inline-block; }
  .hilo__cabeza { padding: 8px 12px; }
  .hilo__estado { width: 100%; }
  .mensajes { padding: 12px; }
  .msj { max-width: 88%; }
  .contestar { padding-left: 12px; padding-right: 12px; }
  .saber { padding: 12px; }

  /* Conversación abierta en el teléfono (con el teclado abierto queda muy poco
     alto): fuera la barra, las pestañas y el pie; la cabeza en dos filas cortas y
     la nota en una línea. Lo que importa son los mensajes y el cuadro de texto. */
  .app[data-hilo="si"] .barra, .app[data-hilo="si"] .pie { display: none; }
  .hilo__cabeza { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; padding: 6px 12px; }
  .hilo__quien h2 { font-size: 16px; }
  .hilo__quien p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hilo__estado { grid-column: 1 / -1; flex-wrap: wrap; gap: 4px 6px; min-width: 0; }
  .hilo__estado .estado { flex: 0 1 auto; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hilo__botones { gap: 6px; }
  .hilo__estado .boton { padding: 4px 10px; min-height: 32px; font-size: 14px; flex: none; }
  .contestar { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); gap: 6px; }
  .nota-larga { display: none; }
  .nota-corta { display: inline; }
  .contestar .nota { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
  .recordatorio { font-size: 13px; padding: 4px 4px 4px 10px; flex-wrap: nowrap; }
  /* El recordatorio NO se corta (a 360 se leía «Clave está callada con…»): si no
     cabe en una línea, baja a dos. */
  .recordatorio span { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; line-height: 1.25; }
  .recordatorio .boton { flex: none; }
  .no-salieron { margin: 6px 12px 0; }
}