/* ==========================================================
   MODO MANTENIMIENTO — identidad visual de Filtro Vehicular+
   ========================================================== */

/* 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 {
  --mnt-orange: #f5a000;
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  overflow-y: auto;
  padding: clamp(18px, 4vw, 44px);
  background: radial-gradient(ellipse at 50% 30%, #29241c 0%, #111315 60%);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-overflow-scrolling: touch;
}
.mnt-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: auto;
  padding: 34px 42px 28px;
  overflow: hidden;
  border: 1px solid #3e3b34;
  border-radius: 20px;
  background: linear-gradient(155deg, #25282b, #1b1e21 70%);
  box-shadow: 0 35px 100px #0008, inset 0 1px 0 #ffffff08;
  text-align: center;
  animation: mnt-card-in .45s ease both;
}
.mnt-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #f4f4f3;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.2px;
}
.mnt-brand-logo { width: 30px; height: 30px; object-fit: contain; filter: brightness(0) invert(1); opacity: .8; }
.mnt-mark-plus { color: var(--mnt-orange); }
.mnt-divider { height: 1px; margin: 25px 0 23px; background: #ffffff12; }
.mnt-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--mnt-orange);
  font-size: 11px;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.mnt-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mnt-orange); box-shadow: 0 0 12px #f5a00060; animation: mnt-status-pulse 2.4s ease-in-out infinite; }
.mnt-icon {
  display: grid;
  place-items: center;
  position: relative;
  width: 94px;
  height: 94px;
  margin: 29px auto 26px;
  border: 1px solid #f5a00045;
  border-radius: 50%;
  color: var(--mnt-orange);
  background: radial-gradient(circle, #f5a00018, #f5a00005);
  box-shadow: 0 0 36px #f5a00012;
}
.mnt-icon::before { content: ''; position: absolute; inset: -7px; border: 1px dashed #f5a00050; border-radius: 50%; animation: mnt-orbit 35s linear infinite; }
.mnt-icon::after { content: ''; position: absolute; inset: -19px; border-radius: 50%; background: #f5a00008; z-index: 0; animation: mnt-glow 3s ease-in-out infinite; }
.mnt-icon svg { position: relative; z-index: 1; width: 36px; height: 36px; }
.mnt-title { max-width: 410px; margin: 0 auto 15px; color: #fafaf8; font-size: clamp(25px, 4vw, 30px); font-weight: 700; letter-spacing: -.7px; line-height: 1.2; }
.mnt-text { max-width: 410px; margin: 0 auto 28px; color: #b9bdc0; font-size: 15px; line-height: 1.7; font-weight: 400; }
.mnt-retry { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 51px; padding: 14px 18px; border: 1px solid #ffb831; border-radius: 10px; background: var(--mnt-orange); color: #1c1b18; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 18px #f5a00012; transition: background .2s, transform .2s, box-shadow .2s; }
.mnt-retry svg { width: 19px; height: 19px; }
.mnt-retry:hover { background: #ffb323; transform: translateY(-2px); box-shadow: 0 7px 24px #f5a00030; }
.mnt-retry:active { transform: translateY(0); }
.mnt-retry:focus-visible { outline: 3px solid #ffc65f; outline-offset: 4px; }
.mnt-footer { margin: 17px auto 0; max-width: 320px; color: #8d9398; font-size: 11px; line-height: 1.6; }
@keyframes mnt-card-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mnt-status-pulse { 50% { opacity: .55; } }
@keyframes mnt-orbit { to { transform: rotate(360deg); } }
@keyframes mnt-glow { 50% { transform: scale(1.08); opacity: .4; } }

/* 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-surface-dark);
  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: 13px;
  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 { border-radius: 16px; padding: 28px 24px 25px; }
  .mnt-divider { margin: 22px 0; }
  .mnt-title { font-size: 23px; }
  html.mnt-with-banner body { padding-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .mnt-card,
  .mnt-status-dot,
  .mnt-icon::before,
  .mnt-icon::after { animation: none; }
  .mnt-retry { transition: none; }
}

/* ==========================================================
   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: 12px;
  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: 15px;
  font-weight: 700;
  color: var(--c-primary, #141d1c);
  margin-bottom: 2px;
}
.mnt-admin-state p {
  margin: 0;
  font-size: 13px;
  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: 13px;
  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: 12px;
  background: var(--c-surface-dark);
  color: #ffffff;
  font-family: "Segoe UI", "Segoe UI Variable Text", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.btn-danger:hover { background: #1e2b2a; }
.btn-danger:disabled { opacity: .6; cursor: not-allowed; }