/* ============================================================
   Chat Seguro — estilo MOBILE-FIRST. Funcional, no decorativo.
   ============================================================ */
:root {
  --bg: #0e1116;
  --panel: #171b21;
  --line: #2a2f37;
  --txt: #e6e6e6;
  --muted: #9aa0a6;
  --mine: #1f3b2e;
  --theirs: #1c2530;
  --accent: #3b82f6;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font: 16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* Contenedor: login/registro centrados; app a pantalla completa */
.panel { width: 100%; max-width: 760px; margin: 0 auto; padding: 18px; }
/* App a pantalla completa, fija al área VISIBLE (se ajusta con el teclado). */
#screen-app.panel {
  position: fixed; top: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 1000px;
  height: var(--app-h, 100dvh);
  display: flex; flex-direction: column;
  padding: 10px 12px calc(8px + env(safe-area-inset-bottom));
}

h1 { font-size: 22px; margin: 6px 0 12px; }
h3 { font-size: 14px; color: var(--muted); margin: 4px 0 8px; }
.muted { color: var(--muted); font-size: 13px; }
.ok-msg { color: #7ee787; font-size: 13px; }
.error { color: #ff6b6b; font-size: 13px; min-height: 18px; }
.hidden { display: none !important; }
a { color: var(--accent); }

/* Campos: grandes y cómodos para dedos */
label { display: block; margin: 12px 0; font-size: 13px; color: var(--muted); }
input, select, button, textarea { font-size: 16px; } /* 16px evita el zoom de iOS */
input, select {
  width: 100%; margin-top: 5px; padding: 12px;
  background: #0b0e12; color: var(--txt);
  border: 1px solid var(--line); border-radius: 8px;
}
button {
  padding: 12px 16px; background: var(--accent); color: #fff;
  border: 0; border-radius: 8px; cursor: pointer; min-height: 44px;
}
button:active { filter: brightness(0.9); }
button.danger { background: #b3261e; }
button.warn { background: #b26a00; }
button.ok { background: #2e7d32; }
button.mini { min-height: 0; padding: 4px 8px; font-size: 12px; background: #2a2f37; }

/* Campo de contraseña con ojo */
.pwrap { position: relative; display: block; margin-top: 5px; }
.pwrap input { padding-right: 52px; }
.eye {
  position: absolute; right: 4px; top: 4px; bottom: 4px;
  width: 44px; min-height: 0; padding: 0; background: transparent;
  font-size: 18px; line-height: 1;
}

/* Reglas de contraseña */
.pwrules { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.pwrules li { font-size: 12px; color: var(--muted); }
.pwrules li::before { content: '○ '; }
.pwrules li.met { color: #7ee787; }
.pwrules li.met::before { content: '✓ '; }

/* Barra superior de la app */
.bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.grow { flex: 1; }
.pill { font-size: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.pill.ok { color: #7ee787; border-color: #1f6f33; }
.pill.warn { color: #ffb454; border-color: #7a4d00; }
.inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--muted); font-size: 12px; }
.inline select { width: auto; margin: 0; padding: 8px; }

/* Rejilla app: MÓVIL = una sola vista que se alterna ------------------------ */
.appgrid { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 8px; }
.sidebar { display: flex; flex-direction: column; min-height: 0; }
.chatpane { display: none; flex-direction: column; min-height: 0; flex: 1; }
.appgrid.show-chat .sidebar { display: none; }
.appgrid.show-chat .chatpane { display: flex; }

.dial { display: flex; gap: 8px; margin-bottom: 8px; }
.dial input { margin: 0; }
.dial button { padding: 12px 14px; }
#directory { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; }
#directory li { padding: 14px 10px; border-radius: 8px; cursor: pointer; border-bottom: 1px solid var(--line); }
#directory li:active, #directory li.active { background: var(--theirs); }

.chathead { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.back { background: #2a2f37; }

#messages { flex: 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 12px 2px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 85%; padding: 9px 12px; border-radius: 12px; }
.msg .meta { font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.msg .body { white-space: pre-wrap; word-break: break-word; }
.msg.mine { align-self: flex-end; background: var(--mine); }
.msg.theirs { align-self: flex-start; background: var(--theirs); }
.msg.system { align-self: center; background: transparent; color: var(--muted); font-size: 12px; text-align: center; }

#composer { display: flex; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
#composer input { flex: 1; margin: 0; }

/* Fila de botones del login (Entrar + Pánico) */
.loginrow { display: flex; gap: 10px; }
.loginrow #doLogin { flex: 1; }

/* Banner de invitación entrante */
#invites { display: flex; flex-direction: column; gap: 8px; }
#invites:not(:empty) { margin: 8px 0; }
.invite {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 10px 12px; background: #1b2330; border: 1px solid #2f6f4f; border-radius: 10px; font-size: 14px;
}
.invite span { flex: 1; min-width: 160px; }
.invite button { padding: 8px 12px; min-height: 0; }

/* Campos deshabilitados (composer bloqueado hasta aceptar) */
input:disabled, button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Panel admin */
.statusbox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
textarea { width: 100%; min-height: 140px; margin-top: 8px; padding: 8px; background: #0b0e12; color: var(--txt); border: 1px solid var(--line); border-radius: 8px; font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

/* ESCRITORIO: mostrar contactos y chat lado a lado ------------------------- */
@media (min-width: 760px) {
  .appgrid { display: grid; grid-template-columns: 260px 1fr; gap: 14px; }
  .sidebar { border-right: 1px solid var(--line); padding-right: 12px; }
  .chatpane { display: flex; } /* siempre visible en escritorio */
  .appgrid.show-chat .sidebar { display: flex; } /* no ocultar en escritorio */
  .back { display: none; } /* el botón "volver" solo aplica en móvil */
}