/* =====================================================================
   Chat RGM (chat.rgmadvanced.com) — estilos propios de la app (actualizacion107).
   general.css (tokens), chat.css y Phosphor se copian del sistema con
   sincronizar.sh; aquí solo va lo de la app: vistas, avisos, ajustes y el chat a
   pantalla completa con las zonas seguras del iPhone (muesca y barra de inicio).
   ===================================================================== */
html, body { height: 100%; }
body.rgm-app {
  margin: 0; background: var(--surface-canvas); color: var(--ink-primary); font-family: var(--font-sans);
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
[hidden] { display: none !important; }
/* general.css deja las imágenes transparentes hasta que general.js (que aquí no se
   carga) les pone `img-loaded`. */
.rgm-app img { opacity: 1; }

/* ---------- Vistas ---------- */
.app-vista { min-height: 100%; box-sizing: border-box; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
.app-centro { display: flex; align-items: center; justify-content: center; }
.app-tarjeta {
  width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--surface-primary); border: 1px solid var(--edge-default); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); padding: 28px 22px;
}
.app-logo { border-radius: 22%; box-shadow: var(--shadow-md); }
.app-latido { animation: app-latido 1.4s ease-in-out infinite; }
@keyframes app-latido { 50% { transform: scale(.94); opacity: .75; } }
.app-tarjeta h1 { font-family: var(--font-display); font-weight: 400; font-size: 2.3rem; line-height: 1.1; margin: 14px 0 4px; letter-spacing: -0.01em; }
.app-tarjeta h1 em { font-style: italic; color: var(--brand); }
.app-sub { color: var(--ink-secondary); margin: 0 0 18px; font-size: 15px; }
.app-nota { color: var(--ink-tertiary); font-size: 13px; margin: 10px 0 0; }
.app-nota a { color: var(--brand); }
.app-icono-grande { font-size: 44px; color: var(--ink-muted); margin-bottom: 10px; }

/* ---------- Escritorio ---------- */
.app-escritorio { max-width: 420px; }
.app-qr { width: 200px; height: 200px; padding: 10px; background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--edge-default); }

/* ---------- Inicio de sesión ---------- */
#loginForm { width: 100%; display: flex; flex-direction: column; gap: 14px; text-align: left; }
#loginForm label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ink-secondary); }
#loginForm input {
  width: 100%; box-sizing: border-box; font-size: 16px; padding: 12px 14px; border-radius: var(--radius-md) !important;
  font-family: var(--font-sans);
}
.app-clave { position: relative; display: block; }
.app-clave input { padding-right: 46px !important; }
.app-clave button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none;
  color: var(--ink-tertiary); font-size: 20px; display: flex; align-items: center; justify-content: center; border-radius: 999px;
}
.app-turnstile { min-height: 65px; display: flex; justify-content: center; }
.app-error { color: var(--danger); font-size: 14px; margin: 0; min-height: 1em; text-align: center; }
.app-aviso {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; font-size: 13px; line-height: 1.4;
  background: var(--brand-light); color: var(--ink-primary); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: 14px;
}
.app-aviso i { font-size: 20px; color: var(--brand); flex: none; }
/* Entrar con el código del sistema (8-oct-2026) */
.app-enlace {
  margin-top: 14px; border: 0; background: none; padding: 8px 10px; border-radius: 999px; cursor: pointer;
  font: 600 14px var(--font-sans); color: var(--brand); display: inline-flex; align-items: center; gap: 6px;
}
.app-enlace i { font-size: 18px; }
.app-ayuda { margin: -4px 0 0; text-align: left; }
#loginCodigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px !important; letter-spacing: 0.14em; text-align: center; text-transform: uppercase; }

/* ---------- Botones ---------- */
.app-btn {
  width: 100%; border: 0; border-radius: 999px; padding: 14px 18px; font-size: 16px; font-weight: 600; font-family: var(--font-sans);
  background: var(--btn-primary-top); color: var(--btn-primary-ink); display: inline-flex; gap: 8px; align-items: center; justify-content: center;
  cursor: pointer; transition: opacity .15s;
}
.app-btn:disabled { opacity: .45; background: var(--btn-primary-top) !important; color: var(--btn-primary-ink) !important; }
.app-btn.cargando { opacity: .6; pointer-events: none; }
.app-btn.chico { width: auto; padding: 9px 16px; font-size: 14px; flex: none; }
.app-btn.claro { background: var(--surface-secondary); color: var(--ink-primary); }
.app-btn.peligro { background: transparent; color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.app-x { border: 0; background: none; color: var(--ink-tertiary); font-size: 18px; width: 32px; height: 32px; flex: none; border-radius: 999px; }

/* ---------- Avisos de la app (activar notificaciones, instalar) ---------- */
.app-banner {
  position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; gap: 10px; align-items: center; padding: 12px 10px 12px 14px; font-size: 14px; line-height: 1.35;
  background: var(--surface-primary); border: 1px solid var(--edge-emphasis); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: app-sube .25s ease both;
}
.app-banner > i { font-size: 24px; color: var(--brand); flex: none; }
.app-banner > span { flex: 1; min-width: 0; }
@keyframes app-sube { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* Con una conversación abierta el aviso taparía el cuadro de escribir, y en una llamada
   (aunque esté minimizada) la píldora para volver: sale en la lista, sin llamada. */
body.rgm-app:has(.rgmchat-ventanas .rgmchat-ventana) .app-banner,
body.rgm-app:has(#rgmllamada) .app-banner { display: none !important; }
.app-toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 70;
  max-width: calc(100% - 32px); box-sizing: border-box; padding: 11px 16px; border-radius: var(--radius-md); font-size: 14px;
  background: var(--ink-primary); color: var(--surface-canvas); box-shadow: var(--shadow-lg); text-align: center;
}
.app-toast.error { background: var(--danger); color: #fff; }

/* ---------- Ajustes (hoja inferior) ---------- */
.app-hoja-fondo { position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .35); display: flex; align-items: flex-end; }
.app-hoja {
  width: 100%; box-sizing: border-box; background: var(--surface-primary); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 8px 18px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px;
  animation: app-sube .22s ease both; max-height: 85vh; overflow-y: auto;
}
.app-hoja-asa { width: 40px; height: 5px; border-radius: 3px; background: var(--edge-strong); margin: 4px auto 6px; }
.app-hoja-yo { display: flex; gap: 12px; align-items: center; }
.app-hoja-yo b, .app-hoja-fila b { display: block; font-size: 15px; }
.app-hoja-yo small, .app-hoja-fila small { display: block; font-size: 13px; color: var(--ink-tertiary); line-height: 1.35; }
.app-av {
  width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--btn-primary-top); color: var(--btn-primary-ink); font-weight: 700;
}
.app-hoja-fila { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--edge-subtle); }
.app-hoja-fila > i { font-size: 22px; color: var(--brand); flex: none; margin-top: 2px; }
.app-version { text-align: center; font-size: 12px; color: var(--ink-muted); margin: 0; }

/* ---------- El chat a pantalla completa ----------
   Las reglas de celular de chat.css van en un @media de 640 px; en la app aplican
   siempre (celular horizontal, tablet), con las zonas seguras del iPhone. */
.rgm-app .rgmchat-fab { display: none !important; }
.rgm-app .rgmchat-panel {
  position: fixed; inset: 0; width: auto; max-width: none; height: auto; border-radius: 0; border: 0; box-shadow: none;
  z-index: 40; animation: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
.rgm-app .rgmchat-panel .rgmchat-pie { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.rgm-app .rgmchat-ventanas { position: fixed; inset: 0; right: 0; display: block; z-index: 41; }
.rgm-app .rgmchat-ventana {
  position: absolute; inset: 0; width: auto; height: auto; max-height: none; border: 0; border-radius: 0; animation: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); box-sizing: border-box;
}
.rgm-app .rgmchat-ventana:not(:first-child) { display: none; }
.rgm-app .rgmchat-v-cab { border-radius: 0; cursor: default; height: 58px; padding-left: 4px; }
/* «Cerrar» se vuelve la flecha de regresar, a la izquierda, como en cualquier app de mensajes. */
.rgm-app .rgmchat-v-acc { display: contents; }
.rgm-app .rgmchat-v-cab [data-acc="cerrar"] { order: -1; width: 38px; height: 38px; font-size: 22px; }
.rgm-app .rgmchat-v-cab [data-acc="cerrar"] i::before { content: "\e058"; }   /* ph-arrow-left */
.rgm-app .rgmchat-v-cab [data-acc="silencio"], .rgm-app .rgmchat-v-cab [data-acc="menu"] { width: 36px; height: 36px; font-size: 19px; }
.rgm-app .rgmchat-v-acc .solo-escritorio, .rgm-app [data-acc="min"] { display: none !important; }
.rgm-app .rgmchat-col { max-width: 86%; }
.rgm-app .rgmchat-comp textarea, .rgm-app .rgmchat input { font-size: 16px; }   /* iOS no hace zoom al enfocar */
.rgm-app .rgmchat-fondo { z-index: 50; }
.rgm-app .rgmchat-visor { z-index: 51; }
.rgm-app .rgmchat-panel-cab { padding-top: 12px; }
.rgm-app .rgmchat-panel-cab h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; letter-spacing: -0.01em; }
.rgm-app .rgmchat-item { padding-top: 10px; padding-bottom: 10px; }
/* Llamada minimizada en la lista: la píldora abajo, donde el pulgar llega (arriba está el título). */
.rgm-app .rl-pildora { top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); }