/*
 * Quomya — Correcciones visuales previas a testers (v15.21.1)
 *
 * 1. El menú inferior permanece oculto por defecto y solo se muestra
 *    cuando `sessionChrome.js` marca la sesión como privada y utilizable.
 * 2. Los avisos se colocan por encima del menú, respetan safe areas y
 *    dejan de arrastrar un cuadro interior oscuro.
 * 3. Los chips de sincronización reflejan el estado real.
 *
 * Esta hoja se carga la última: solo corrige superficies concretas.
 */

/* =========================================================
   1. MENÚ INFERIOR OCULTO POR DEFECTO
   ========================================================= */

/*
 * `src/index.html` ya nace con `data-quomya-nav="hidden"`, de modo que la
 * regla se aplica en el primer pintado y no existe parpadeo mientras se
 * resuelve la sesión.
 */
html[data-quomya-nav="hidden"] .bottom-nav,
html:not([data-quomya-nav]) .bottom-nav,
.bottom-nav[hidden] {
  display: none !important;
}

/* =========================================================
   2. AVISOS POR ENCIMA DEL MENÚ Y DE LA INTERFAZ
   ========================================================= */

/*
 * El contenedor se monta directamente en `document.body`, así que basta
 * con elevarlo por encima del menú (90), del banner de red (10020) y de
 * los modales (10050). El diálogo legal global conserva su prioridad
 * máxima y sigue quedando por encima.
 */
.toast-container {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  z-index: 2147482000 !important;
  transform: translateX(-50%) !important;
  width: min(
    calc(100% - 24px),
    420px
  ) !important;
  display: grid !important;
  gap: 10px !important;
  pointer-events: none !important;
  isolation: isolate;
}

/*
 * La altura declarada del menú no incluye el inset inferior de iPhone,
 * pero su caja sí lo ocupa. Sin sumarlo aquí el aviso quedaba solapado
 * por el menú en dispositivos con safe area.
 */
html[data-quomya-nav="visible"] .toast-container {
  bottom: calc(
    var(--bottom-nav-height, 82px) +
    env(safe-area-inset-bottom) +
    16px
  ) !important;
}

html[data-quomya-nav="hidden"] .toast-container,
html:not([data-quomya-nav]) .toast-container {
  bottom: calc(
    env(safe-area-inset-bottom) + 18px
  ) !important;
}

.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 0 !important;
  border-radius: 16px !important;
  background: #0B2B38 !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 38px rgba(7, 26, 38, 0.24) !important;
  pointer-events: none;
}

.toast.is-success {
  background: #0A6E62 !important;
}

.toast.is-error {
  background: #A32D2D !important;
}

.toast.is-info {
  background: #0B2B38 !important;
}

/*
 * El cuadro negro del aviso venía de aplicar la superficie oscura también
 * al texto interior. El aviso debe ser una única superficie.
 */
.toast .toast-message {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

.toast .toast-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0 !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2) !important;
  box-shadow: none !important;
  color: #FFFFFF !important;
  font-size: 0.85rem;
  font-weight: 900;
}

/* =========================================================
   3. ESTADO REAL DE SINCRONIZACIÓN
   ========================================================= */

.sync-chip.is-synced {
  border-color: rgba(18, 191, 166, 0.22) !important;
  background: #E7FAF6 !important;
  color: #06655A !important;
}

.sync-chip.is-synced i {
  background: #0F9F8E !important;
}

.sync-chip.is-pending {
  border-color: rgba(233, 155, 36, 0.3) !important;
  background: #FFF5E4 !important;
  color: #8A5100 !important;
}

.sync-chip.is-pending i {
  background: #C97C08 !important;
}

.sync-chip.is-offline {
  border-color: rgba(120, 133, 140, 0.32) !important;
  background: #EEF1F3 !important;
  color: #3F4C53 !important;
}

.sync-chip.is-offline i {
  background: #66757D !important;
}

.sync-chip.is-unknown {
  border-color: rgba(120, 133, 140, 0.32) !important;
  background: #F4F6F7 !important;
  color: #45525A !important;
}

.sync-chip.is-unknown i {
  background: #8A979E !important;
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    animation: none !important;
    transition: none !important;
  }
}