/* Modo Botones — piel responsiva, mobile-first. Maestro-clean: limpio, sin
   modales, toques grandes (>=48px), tipografia del sistema, marfil + acento. */
:root{
  --marfil:#faf7f0; --tinta:#23201b; --suave:#6b6256; --linea:#e6e0d4;
  --acento:#1f6f54; --acento-2:#e8f3ee; --rojo:#b23b3b; --amarillo:#b8860b;
  --r:14px; --tap:52px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--marfil); color:var(--tinta);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.4; -webkit-text-size-adjust:100%;
  /* numeros TABULARES en toda la piel: alinean en columna, sans (no mono) */
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
/* monto/numero explicito (misma familia sans, cifras tabulares) */
.num{ font-variant-numeric:tabular-nums }

/* estados: NUNCA solo color -> color + ICONO + ETIQUETA (daltonismo/lectores de
   pantalla). Pildora compacta reutilizable por cualquier pantalla. */
.estado{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px;
  border-radius:999px; font-size:13px; font-weight:600; line-height:1.1;
  border:1px solid transparent; white-space:nowrap; }
.estado .ei{ font-size:13px }
.estado.ok{  background:var(--acento-2); color:#155e44; border-color:#bfe0d2 }
.estado.ojo{ background:#fbf3df; color:#7a5b00; border-color:#ecd9a6 }
.estado.mal{ background:#fbeaea; color:var(--rojo); border-color:#eccaca }
.estado.neu{ background:#f0ece2; color:var(--suave); border-color:var(--linea) }
#app{ max-width:560px; margin:0 auto; padding:max(16px,env(safe-area-inset-top)) 16px 40px; }

/* cabecera */
.barra{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:6px 0 14px; }
.barra h1{ font-size:20px; margin:0; font-weight:650; letter-spacing:.2px }
.barra .yo{ font-size:13px; color:var(--suave); text-align:right }
.volver{ background:none; border:0; color:var(--acento); font-size:16px; padding:8px 0; cursor:pointer }

/* titulares */
h2{ font-size:24px; margin:.2em 0 .1em; font-weight:680 }
.lema{ color:var(--suave); margin:0 0 20px }

/* botones grandes (acción primaria) */
.btn{
  display:flex; align-items:center; gap:12px; width:100%;
  min-height:var(--tap); padding:14px 18px; margin:10px 0;
  background:#fff; color:var(--tinta); border:1px solid var(--linea);
  border-radius:var(--r); font-size:17px; text-align:left; cursor:pointer;
  box-shadow:0 1px 0 rgba(0,0,0,.02); transition:transform .04s, border-color .15s;
}
.btn:active{ transform:scale(.99) }
.btn .ico{ font-size:22px; width:26px; text-align:center }
.btn .sub{ display:block; font-size:13px; color:var(--suave) }
.btn.primario{ background:var(--acento); color:#fff; border-color:var(--acento); justify-content:center; font-weight:650 }
.btn.primario .sub{ color:#dfeee8 }
.btn.fantasma{ background:transparent; border-style:dashed }

/* campo: guarda al salir, sin botón "guardar" aparte */
.campo{ margin:14px 0 }
.campo label{ display:block; font-size:13px; color:var(--suave); margin:0 0 6px }
.campo input, .campo select{
  width:100%; min-height:var(--tap); padding:12px 14px;
  border:1px solid var(--linea); border-radius:var(--r); font-size:17px;
  background:#fff; color:var(--tinta);
}
.campo input:focus, .campo select:focus{ outline:none; border-color:var(--acento) }

/* lista de clientes (filtra al escribir) */
.fila{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:var(--tap); padding:12px 14px; margin:8px 0;
  background:#fff; border:1px solid var(--linea); border-radius:var(--r); cursor:pointer;
}
.fila .nom{ font-weight:600 }
.fila .rut{ font-size:13px; color:var(--suave); font-variant-numeric:tabular-nums }
.fila.ok-fila{ border-color:var(--acento); background:var(--acento-2) }
.vacio{ color:var(--suave); text-align:center; padding:28px 0 }

/* avisos inline (sin popups) */
.aviso{ padding:12px 14px; border-radius:var(--r); margin:12px 0; font-size:15px }
.aviso.info{ background:var(--acento-2); color:#155 }
.aviso.error{ background:#fbeaea; color:var(--rojo) }
.cargando{ color:var(--suave); padding:18px 0; text-align:center }

.tabs{ display:flex; gap:8px; margin:8px 0 4px }
.tabs button{ flex:1; min-height:44px; border:1px solid var(--linea); background:#fff;
  border-radius:10px; font-size:14px; color:var(--suave); cursor:pointer }
.tabs button.on{ border-color:var(--acento); color:var(--acento); font-weight:650; background:var(--acento-2) }

/* modo texto (chat) */
.hilo{ display:flex; flex-direction:column; gap:8px; padding:8px 0 90px; }
.bub{ max-width:85%; padding:10px 14px; border-radius:16px; font-size:16px; line-height:1.35; }
.bub.yo{ align-self:flex-end; background:var(--acento); color:#fff; border-bottom-right-radius:4px; }
.bub.bot{ align-self:flex-start; background:#fff; border:1px solid var(--linea); border-bottom-left-radius:4px; }
.bub.lista{ list-style:none; margin:0; padding:10px 14px; }
.bub.lista li{ padding:3px 0; color:var(--tinta); }
.confirma{ align-self:flex-start; display:flex; gap:8px; margin:2px 0 6px; }
.confirma button{ min-height:44px; padding:8px 22px; border-radius:12px; font-size:16px; cursor:pointer; border:1px solid var(--linea); }
.confirma .si{ background:var(--acento); color:#fff; border-color:var(--acento); font-weight:650; }
.confirma .no{ background:#fff; color:var(--suave); }
.barra-chat{ position:fixed; left:0; right:0; bottom:0; display:flex; gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:var(--marfil); border-top:1px solid var(--linea); }
.barra-chat input{ flex:1; min-height:var(--tap); padding:12px 14px; border:1px solid var(--linea); border-radius:24px; font-size:16px; background:#fff; }
.barra-chat input:focus{ outline:none; border-color:var(--acento); }
.barra-chat .enviar{ min-height:var(--tap); padding:0 20px; border:0; border-radius:24px; background:var(--acento); color:#fff; font-size:16px; font-weight:650; cursor:pointer; }
@media (min-width:600px){ .barra-chat{ max-width:560px; margin:0 auto; } }

/* tercera piel: video/voz */
.pieles{ display:flex; gap:6px; align-items:center; }
.companero{ display:flex; justify-content:center; margin:18px 0 6px; }
.companero .marco{ width:160px; height:160px; border-radius:50%; overflow:hidden; border:3px solid var(--acento);
  box-shadow:0 6px 16px rgba(31,111,84,.22); background:var(--acento-2); transition:transform .2s; }
.companero .rostro, .companero .rostro-video{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; transform:scale(1.28); transform-origin:50% 26%; display:block; }
.companero.hablando .marco{ animation:pulso 1s ease-in-out infinite; }
.companero.escuchando .marco{ animation:escucha 1.1s ease-in-out infinite; }
@keyframes pulso{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.035) } }
@keyframes escucha{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.05) } }
.subtitulo{ min-height:2.6em; text-align:center; font-size:19px; line-height:1.35; color:var(--tinta);
  background:#fff; border:1px solid var(--linea); border-radius:16px; padding:14px 16px; margin:6px 0; }
.transcrito{ text-align:center; color:var(--suave); font-size:14px; min-height:1.2em; }
.voz-acciones{ display:flex; flex-direction:column; align-items:center; gap:8px; padding-bottom:90px; }
.voz-lista{ list-style:none; margin:6px 0; padding:10px 16px; background:#fff; border:1px solid var(--linea); border-radius:14px; min-width:70%; }
.voz-lista li{ padding:3px 0; }
.barra-chat.voz .mic{ min-height:var(--tap); width:52px; border:0; border-radius:50%; background:var(--acento-2); font-size:22px; cursor:pointer; }
.barra-chat.voz .mic:active{ background:var(--acento); }

/* banner de auto-actualización (1 toque) */
.banner-update{ position:fixed; left:0; right:0; bottom:0; z-index:2000; background:var(--acento); color:#fff;
  padding:12px 16px; text-align:center; font-size:15px; box-shadow:0 -2px 10px rgba(0,0,0,.12); }
.banner-update button{ margin-left:10px; background:#fff; color:var(--acento); border:0; border-radius:10px;
  padding:8px 18px; font-weight:650; cursor:pointer; }

@media (min-width:600px){ #app{ padding-top:28px } h2{ font-size:28px } }