@media (max-width: 700px) {

  html,
  body {
    margin: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    background: #010407 !important;
    overflow: hidden !important;
  }

  /*
   * El desktop queda oculto desde móvil.
   */
  body > .app,
  body > #app,
  body > main,
  body .desktop-shell,
  body .dashboard-shell {
    visibility: hidden !important;
  }

  /*
   * Excepción: cuando un comando de voz abre un panel real (p. ej. la bóveda privada,
   * "abre la bóveda"/ui-command-router.js), hace falta poder VERLO en móvil. Sin esto, abrir o
   * cerrar la bóveda por voz "funcionaba" en el estado interno pero nunca se veía nada, porque
   * .app quedaba oculto sin excepción por la regla de arriba. Más específico que la regla base
   * (clase + descendiente), así gana sin tocar el orden de las reglas.
   */
  body.sparta-mobile-panel-open > .app,
  body.sparta-mobile-panel-open > #app,
  body.sparta-mobile-panel-open main,
  body.sparta-mobile-panel-open .desktop-shell,
  body.sparta-mobile-panel-open .dashboard-shell {
    visibility: visible !important;
  }
  body.sparta-mobile-panel-open #spartaMobile2026 {
    display: none !important;
  }
  /*
   * focus-voice.js (sistema más antiguo, sigue cargado) inyecta su PROPIA regla
   * "body.sparta-mobile-face-only>.app{visibility:hidden!important}" con la MISMA
   * especificidad que la de arriba (una clase en body + .app) -- gana por orden de carga (su
   * <style> se inserta después, en document.head.appendChild, no por el link de este archivo).
   * "sparta-mobile-face-only" está activo en móvil siempre que el Modo Focus (otro concepto,
   * de focus-voice.js) esté apagado, que es el caso normal -- así que sin esto, CUALQUIER
   * excepción de este archivo (bóveda o dashboard) se veía en negro. Bug real encontrado
   * probando contra el servidor local, 2026-08-26: mismo código exacto de producción, sin
   * poder alcanzar mysparta.one desde este entorno por la restricción de red ya conocida.
   * Selector con una clase extra: gana con seguridad sin importar el orden de carga.
   */
  body.sparta-mobile-face-only.sparta-mobile-panel-open > .app,
  body.sparta-mobile-face-only.sparta-mobile-dashboard-view > .app {
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /*
   * Vista simplificada del dashboard real en móvil ("Sparta, muéstrame el dashboard").
   * El dashboard de escritorio nunca fue probado en una pantalla angosta real -- sus reglas
   * "responsive" existentes (ver @media 1180/760/480px más arriba en este mismo archivo HTML)
   * asumen que el radar orbital (#mapArea) sigue presente con alturas fijas, y en un teléfono
   * real producían header solapado, un hueco negro enorme y tarjetas amontonadas (confirmado con
   * capturas de pantalla, 2026-08-26). En vez de arreglar cada regla vieja en conflicto, esta
   * vista oculta lo puramente decorativo (radar/cerebro 3D animado, reloj/clima) y apila el
   * contenido real (menú, consola de comandos de Sparta, actividad, resumen) en una sola columna
   * con scroll normal -- decisión explícita del propietario: rápido y funcional ahora, no un
   * rediseño 1:1 del "mission control" de escritorio.
   */
  body.sparta-mobile-dashboard-view {
    overflow: auto !important;
  }
  body.sparta-mobile-dashboard-view > .app {
    height: auto !important;
    min-height: 100dvh !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  body.sparta-mobile-dashboard-view .frame {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
  }
  body.sparta-mobile-dashboard-view .mapArea,
  body.sparta-mobile-dashboard-view .topRight {
    display: none !important;
  }
  body.sparta-mobile-dashboard-view .topLeft,
  body.sparta-mobile-dashboard-view .leftNav,
  body.sparta-mobile-dashboard-view .rightPanel,
  body.sparta-mobile-dashboard-view .bottomBar {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
    flex: none !important;
  }
  body.sparta-mobile-dashboard-view .topLeft {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px !important;
  }
  body.sparta-mobile-dashboard-view .headerStatus {
    display: none !important;
  }
  body.sparta-mobile-dashboard-view .leftNav {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 4px !important;
    padding: 8px !important;
    border: 0 !important;
  }
  body.sparta-mobile-dashboard-view .leftNav .navBtn {
    flex: 1 1 auto !important;
    min-width: 44% !important;
  }
  body.sparta-mobile-dashboard-view .leftNav .profileDock {
    position: static !important;
    width: 100% !important;
    margin-top: 6px !important;
  }
  body.sparta-mobile-dashboard-view .spartaModeControls {
    position: static !important;
    width: 100% !important;
    justify-content: center !important;
    margin-top: 6px !important;
  }
  body.sparta-mobile-dashboard-view .rightPanel {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 8px !important;
    border: 0 !important;
  }
  body.sparta-mobile-dashboard-view .bottomBar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    padding: 8px !important;
  }

  /*
   * Excepción independiente de la de arriba: "Sparta, muéstrame el dashboard" pide ver el
   * dashboard REAL completo (header, menú lateral, agentes, todo) -- no el panel de operaciones
   * (Vitales/Bóveda/Comandos), que es un modal a pantalla completa encima que tapa el dashboard
   * igual aunque quede "visible" detrás. Clase propia, sin depender de #opsPanel, para no chocar
   * con el observer que sincroniza sparta-mobile-panel-open con el estado de ese panel.
   */
  body.sparta-mobile-dashboard-view > .app,
  body.sparta-mobile-dashboard-view > #app,
  body.sparta-mobile-dashboard-view main,
  body.sparta-mobile-dashboard-view .desktop-shell,
  body.sparta-mobile-dashboard-view .dashboard-shell {
    visibility: visible !important;
  }
  body.sparta-mobile-dashboard-view #spartaMobile2026 {
    display: none !important;
  }

  /*
   * Ocultamos las capas móviles anteriores.
   */
  .spartaMobileFace,
  .spartaFocus,
  .spartaMobileStatus,
  .spartaFocusState,
  .spartaFocusTranscript {
    display: none !important;
  }

  #spartaMobile2026 {
    --voice-strength: 0;

    position: fixed;
    inset: 0;
    z-index: 2147483000;

    width: 100vw;
    height: 100dvh;

    overflow: hidden;
    background:
      radial-gradient(
        circle at 50% 42%,
        rgba(0, 115, 255, .13),
        transparent 43%
      ),
      #010407;
  }

  #spartaMobileArtwork2026 {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    opacity: 0;
    transform: scale(1.015);

    transition:
      opacity .25s ease,
      transform 1.2s ease;

    user-select: none;
    pointer-events: none;
  }

  #spartaMobile2026.artwork-ready
  #spartaMobileArtwork2026 {
    opacity: 1;
  }

  /*
   * Movimiento suave permanente del rostro.
   */
  #spartaMobile2026.artwork-ready
  #spartaMobileArtwork2026 {
    animation:
      spartaMobileDrift 9s
      ease-in-out infinite alternate;
  }

  @keyframes spartaMobileDrift {
    from {
      transform:
        scale(1.02)
        translate3d(-5px, 0, 0);
    }

    to {
      transform:
        scale(1.035)
        translate3d(5px, -3px, 0);
    }
  }

  /*
   * Tapa "Hablando" y el banner que quedaron
   * dibujados dentro del PNG.
   */
  .sparta-mobile-text-mask {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 22%;

    z-index: 4;

    background:
      linear-gradient(
        to bottom,
        rgba(1, 4, 7, 0) 0%,
        rgba(1, 4, 7, .78) 22%,
        #010407 58%,
        #010407 100%
      );

    pointer-events: none;
  }

  /*
   * Reactor dinámico sobre el círculo de audio.
   */
  .sparta-mobile-reactor {
    position: absolute;

    width: 29vw;
    height: 29vw;

    max-width: 150px;
    max-height: 150px;

    left: 50%;
    bottom: 17%;

    transform:
      translateX(-50%)
      scale(
        calc(
          1 + var(--voice-strength) * .10
        )
      );

    z-index: 6;

    border-radius: 50%;

    transition: transform 70ms linear;

    pointer-events: none;
  }

  .sparta-mobile-ring {
    position: absolute;
    inset: 0;

    border-radius: 50%;
    border:
      1px solid
      rgba(44, 204, 255, .58);

    box-shadow:
      0 0
      calc(
        12px +
        var(--voice-strength) * 32px
      )
      rgba(0, 166, 255, .50),
      inset
      0 0
      calc(
        7px +
        var(--voice-strength) * 20px
      )
      rgba(0, 182, 255, .30);
  }

  .ring-b {
    inset: 11%;
    opacity: .65;
  }

  .sparta-mobile-core {
    position: absolute;

    left: 10%;
    right: 10%;
    top: 48%;

    height:
      calc(
        2px +
        var(--voice-strength) * 12px
      );

    border-radius: 999px;

    background: rgba(105, 226, 255, .95);

    box-shadow:
      0 0 8px rgba(0, 205, 255, .95),
      0 0
      calc(
        8px +
        var(--voice-strength) * 35px
      )
      rgba(0, 140, 255, .92);

    transform: translateY(-50%);
  }

  #spartaMobile2026[data-state="speaking"]
  .sparta-mobile-reactor {
    animation:
      spartaSpeakingPulse
      .72s ease-in-out infinite alternate;
  }

  @keyframes spartaSpeakingPulse {
    from {
      filter: brightness(1);
    }

    to {
      filter: brightness(1.65);
    }
  }

  /*
   * Estado dinámico.
   * En reposo no aparece nada.
   */
  #spartaMobileState2026 {
    position: absolute;

    left: 50%;
    bottom: 10.5%;

    transform: translateX(-50%);

    z-index: 7;

    font-family:
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif;

    font-size: 14px;
    font-weight: 500;

    letter-spacing: .13em;
    text-transform: uppercase;

    color: #9ae7ff;

    text-shadow:
      0 0 10px
      rgba(0, 190, 255, .75);

    white-space: nowrap;
  }

  #spartaMobileState2026:empty {
    display: none;
  }

  /*
   * Botón pequeño de micrófono.
   * No agrega texto fijo a la pantalla.
   */
  #spartaMobileMic2026 {
    position: absolute;

    left: 50%;
    bottom: 3%;

    transform: translateX(-50%);

    z-index: 8;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    border:
      1px solid
      rgba(63, 205, 255, .42);

    background:
      rgba(1, 12, 22, .72);

    box-shadow:
      0 0 20px
      rgba(0, 157, 255, .15);

    backdrop-filter: blur(12px);

    cursor: pointer;
  }

  #spartaMobileMic2026 span {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 11px;
    height: 17px;

    transform:
      translate(-50%, -58%);

    border:
      2px solid #8ae7ff;

    border-radius:
      7px 7px 6px 6px;
  }

  #spartaMobileMic2026 span::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 12px;

    width: 18px;
    height: 11px;

    transform: translateX(-50%);

    border:
      2px solid #8ae7ff;

    border-top: 0;

    border-radius:
      0 0 12px 12px;
  }

  #spartaMobileMic2026 span::after {
    content: "";

    position: absolute;

    left: 50%;
    top: 23px;

    width: 2px;
    height: 6px;

    transform: translateX(-50%);

    background: #8ae7ff;
  }

  #spartaMobileMic2026.active {
    border-color:
      rgba(72, 224, 255, .95);

    box-shadow:
      0 0 16px
      rgba(0, 191, 255, .60),
      0 0 32px
      rgba(0, 105, 255, .25);
  }

  /*
   * Campanita de notificaciones -- única forma de llegar a la suscripción push desde móvil,
   * ya que el dashboard completo (donde vive la campanita real) queda oculto en esta pantalla.
   */
  #spartaMobileNotifBtn2026 {
    position: absolute;

    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 12px;

    z-index: 9;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    border: 1px solid rgba(63, 205, 255, .32);
    background: rgba(1, 12, 22, .72);

    font-size: 16px;
    line-height: 1;

    color: #a8ced6;

    backdrop-filter: blur(12px);

    cursor: pointer;
  }

  #spartaMobileNotifBtn2026.active {
    color: #fff;
    border-color: rgba(72, 224, 255, .95);
    box-shadow: 0 0 16px rgba(0, 191, 255, .45);
  }
}