/* ==========================================================
   MODO MANTENIMIENTO
   Aviso a pantalla completa para usuarios y cinta para el
   administrador. Diseño plano, sin sombras, paleta institucional.
   ========================================================== */

/* Mientras el aviso está puesto, la página de fondo no se desplaza */
html.mnt-locked,
html.mnt-locked body {
  overflow: hidden;
}

/* ── Aviso a pantalla completa ── */
.mnt-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--c-primary, #141d1c);
}

.mnt-card {
  width: 100%;
  max-width: 460px;
  background: var(--c-surface, #ffffff);
  border: 1px solid var(--c-border, #DCDCDC);
  border-radius: 14px;
  padding: 36px 32px;
  text-align: center;
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Marca */
.mnt-mark {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-primary, #141d1c);
  letter-spacing: -0.2px;
}
.mnt-mark-plus { color: var(--c-accent, #8fc72e); }

/* Filete bicolor: verde + turquesa, el acento de la marca */
.mnt-rule {
  width: 56px;
  height: 3px;
  margin: 14px auto 22px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--c-accent, #8fc72e) 0 50%,
    #03a7a4 50% 100%
  );
}

.mnt-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  color: var(--c-accent, #8fc72e);
}
.mnt-icon svg { width: 100%; height: 100%; display: block; }

.mnt-title {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 700;
  color: var(--c-primary, #141d1c);
  line-height: 1.25;
}

.mnt-text {
  margin: 0 0 20px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--c-muted, #5A6B6A);
}

.mnt-retry {
  width: 100%;
  padding: 12px 18px;
  border: none;
  border-radius: 10px;
  background: var(--c-primary, #141d1c);
  color: #ffffff;
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.mnt-retry:hover { background: #1e2b2a; }

/* El aviso no lleva ninguna entrada de administracion: el administrador
   entra por admin.html, que pide credenciales y nunca muestra el aviso. */

/* ── Cinta del administrador ── */
.mnt-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99998;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 16px;
  background: var(--c-primary, #141d1c);
  border-bottom: 2px solid var(--c-accent, #8fc72e);
  color: #ffffff;
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  text-align: center;
}
.mnt-banner strong { font-weight: 700; }
.mnt-banner span:not(.mnt-banner-dot) { color: rgba(255, 255, 255, 0.75); }

.mnt-banner-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent, #8fc72e);
  flex: none;
}

/* Deja sitio a la cinta para no tapar la barra superior */
html.mnt-with-banner body { padding-top: 34px; }

@media (max-width: 480px) {
  .mnt-card { padding: 28px 22px; }
  .mnt-title { font-size: 19px; }
  html.mnt-with-banner body { padding-top: 48px; }
}

/* ==========================================================
   PANEL DE ADMINISTRACIÓN — bloque de mantenimiento
   ========================================================== */
.mnt-admin { display: flex; flex-direction: column; gap: 16px; }

.mnt-admin-state {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #F6F8F5;
  border-left: 3px solid var(--c-accent, #8fc72e);
}
.mnt-admin-state.is-on { border-left-color: #03a7a4; }

.mnt-admin-state strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-primary, #141d1c);
  margin-bottom: 2px;
}
.mnt-admin-state p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-muted, #5A6B6A);
}

.mnt-admin-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--c-accent, #8fc72e);
  flex: none;
}
.mnt-admin-dot.is-on { background: #03a7a4; }

/* Mismo latido que el interruptor de la barra: es el mismo estado
   contado en dos sitios y debe leerse igual en los dos. */
.mnt-admin-dot { position: relative; }
.mnt-admin-dot.is-on::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #03a7a4;
  animation: mnt-latido 1.9s ease-out infinite;
}

.mnt-admin-foot {
  margin: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--c-muted, #5A6B6A);
}

/* ==========================================================
   Interruptor de mantenimiento — barra superior del admin
   Siempre a la vista, en cualquier seccion del panel: el
   mantenimiento se activa justo cuando algo va mal y no es
   momento de ir a buscarlo dentro de Configuracion.

   Solo el interruptor, sin etiquetas: verde encendido, rojo
   apagado. Lo que hace se explica en el title y en el
   aria-label, para el raton y para el lector de pantalla.
   ========================================================== */
.mnt-switch {
  position: relative;
  flex: none;
  width: 52px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #d92d20;                  /* apagado */
  cursor: pointer;
  transition: background .2s ease;
}
.mnt-switch.is-on { background: #8fc72e; }   /* encendido */
.mnt-switch:disabled { opacity: .6; cursor: not-allowed; }

/* El pomo se desplaza de un extremo al otro: esa es la animacion
   del interruptor, sin sombras, acorde al diseno plano. */
.mnt-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform .2s ease;
}
.mnt-switch.is-on .mnt-switch-thumb { transform: translateX(24px); }

/* Latido del punto de Configuracion mientras esta activo.
   Se apaga solo con prefers-reduced-motion (regla en base.css). */
@keyframes mnt-latido {
  0%        { transform: scale(1);   opacity: .5; }
  70%, 100% { transform: scale(2.2); opacity: 0; }
}

/* Botón de desactivación: oscuro institucional, no rojo de alarma */
.btn-danger {
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: var(--c-primary, #141d1c);
  color: #ffffff;
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.btn-danger:hover { background: #1e2b2a; }
.btn-danger:disabled { opacity: .6; cursor: not-allowed; }