/* ═══════════════════════════════════════════════════════════════════
   IGNIA · movil.css — lo que convierte la web en una app de teléfono
   ───────────────────────────────────────────────────────────────────
   UN SOLO SITIO para las reglas de móvil, tacto y app instalada. Si algo
   se ve mal en el teléfono, se arregla aquí, no repartido por diez hojas.

   Se carga DESPUÉS de styles.css y de las hojas por vista, a propósito:
   así puede corregir lo que ellas dejan mal en pantalla pequeña sin tener
   que perseguir cada regla original.

   Cuatro bloques:
     1. Escribir sin que el teléfono haga zoom      (@media max-width)
     2. Botones que un dedo pueda acertar           (@media pointer: coarse)
     3. La pantalla del teléfono: barra, menú, texto (@media max-width)
     4. Cuando IGNIA corre instalada                (@media display-mode)
   ═══════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════
   1 · ESCRIBIR SIN QUE EL TELÉFONO HAGA ZOOM
   ────────────────────────────────────────────────────────────────
   Safari en iPhone amplía la página entera cuando enfocas una casilla
   cuya letra mide menos de 16 px — y NO la devuelve a su sitio al salir.
   El resto de la sesión queda torcida y con desplazamiento lateral.

   16 px es el umbral exacto de Apple, no una preferencia. Por eso va con
   `!important`: cada casilla de la app tiene su propia regla de tamaño en
   su propia hoja, y lo que hay que garantizar aquí es el SUELO, no el
   estilo. Cualquier casilla nueva queda protegida sin tocar nada.

   `font-size: 16px` es también el mínimo de un campo de texto legible en
   un teléfono, así que la regla no es solo técnica: se lee mejor.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   2 · BOTONES QUE UN DEDO PUEDA ACERTAR
   ────────────────────────────────────────────────────────────────
   Apple pide 44×44 px y Android 48×48 dp. `pointer: coarse` significa
   «el que señala es un dedo, no un ratón»: así el escritorio no cambia.
   ════════════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
  /* El recuadro gris que Safari dibuja al tocar: fuera. El estado de
     pulsado ya lo da cada botón con su propio :active. */
  * { -webkit-tap-highlight-color: transparent; }

  /* Sin esto, el navegador espera ~300 ms por si viene un doble toque
     para hacer zoom. Con esto, el botón responde al instante. */
  button, a, select, summary, label, [role="button"], [onclick] {
    touch-action: manipulation;
  }

  /* Altura mínima de dedo. Se aplica a los botones reales de la app;
     no a contenedores ni a cosas que solo se leen.

     Va con `!important` por la misma razón que el bloque 1: esto es un
     SUELO, no un estilo. Las hojas de cada vista (`styles/views/*.css`)
     se inyectan DESPUÉS de esta al entrar en la vista, así que con la
     misma fuerza ganarían ellas y el botón volvería a sus 34 px. */
  .btn,
  .cal-btn,
  .cal-view-btn,
  .cp-crono-btn,
  .cp-day-edit,
  .cp-sos-pdf,
  .es-edit-btn,
  .es-empty-btn,
  .weekly-empty-day,
  .weekly-confirm,
  .quick-btn,
  .chat-btn,
  .estrategia-btn,
  .hero-btn {
    min-height: 44px !important;
  }

  /* Las flechas del calendario tenían 32 px de ancho: alto ya corregido,
     pero un dedo tampoco acierta una columna de 32. */
  .cal-btn { min-width: 44px; }

  #mobile-menu-btn {
    width: 44px;
    height: 44px;
    font-size: 1.25rem;
  }

  /* El botón del sonido vivía en 28×28: se falla más veces de las que se
     acierta. El contenedor es una píldora estrecha, así que 40 es el
     máximo que cabe sin deformarla. */
  .cp-music-btn { width: 40px; height: 40px; }

  /* La barra de volumen medía 4 px de alto. Con el dedo es inalcanzable.
     Se le da la misma zona sensible que el botón de al lado (40 px) sin
     engordar el dibujo: la caja crece, la línea fina sigue igual. La fila
     del reloj no cambia de alto porque el botón ya mide 40. */
  .cp-music-vol {
    height: 40px;
    background: transparent;
  }
  .cp-music-vol::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 122, 26, 0.25);
  }
  .cp-music-vol::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -7px;   /* centra el círculo sobre la línea de 4 px */
  }
  .cp-music-vol::-moz-range-track {
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 122, 26, 0.25);
  }
  .cp-music-vol::-moz-range-thumb { width: 18px; height: 18px; }

  /* La X de cerrar de los modales: pequeña a la vista, grande al tacto. */
  .chat-close,
  .estrategia-modal-cerrar,
  .ee-close,
  .weekly-task-remove,
  .weekly-task-check {
    min-width: 40px;
    min-height: 40px;
  }
}

/* ════════════════════════════════════════════════════════════════
   3 · LA PANTALLA DEL TELÉFONO
   ════════════════════════════════════════════════════════════════ */

/* El bloque «CUENTA» del menú lateral (Admin · Usuario · Actualizar ·
   Contraseña · Salir) se ve SIEMPRE, en teléfono y en escritorio.

   En el teléfono, porque esos botones ya no caben en la barra de arriba
   (ver 3.1). En escritorio, porque resulta que tampoco estaban: a partir
   de 800 px `styles.css` esconde `.topbar` entera —el panel de HOY dibuja
   su propia cabecera— y esa cabecera solo lleva «↻ ACTUALIZAR». O sea que
   desde un ordenador no había manera de cambiar la contraseña ni de salir.
   Es un agujero anterior a esta tanda; se tapa aquí porque el bloque ya
   estaba hecho. Para volver atrás basta con esconderlo por encima de
   800 px. */
.cp-cuenta { display: flex; flex-direction: column; }
.cp-cuenta-label { display: block; }

@media (max-width: 800px) {

  /* ── 3.1 · La barra de arriba ──────────────────────────────────
     Los cuatro botones de cuenta (Usuario · Actualizar · Contraseña ·
     Salir) no caben en una fila de teléfono: saltaban a una segunda,
     dejaban el ☰ descolgado y empujaban el saludo fuera de la vista.
     98 px del sitio más caro de la pantalla para botones que se usan
     una vez cada mucho.

     No se borran: se mudan al menú lateral (bloque `.cp-cuenta`), que
     ya se abre con el ☰ y tiene sitio de sobra. Arriba queda lo que se
     mira todo el rato: ☰, saludo y fecha. */
  .topbar-right { display: none; }

  .topbar {
    flex-wrap: nowrap;
    min-height: 0;
  }
  .topbar-left { min-width: 0; flex: 1; }
  .greeting, .date { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ── 3.2 · El menú lateral ─────────────────────────────────────
     Se abre a pantalla completa y su última fila (SERVIDOR · TELEGRAM ·
     LATENCIA) quedaba debajo de la barra inferior, o sea invisible.
     Se le deja abajo el hueco de la barra más la franja del iPhone, y
     se permite desplazarlo por si el contenido no cabe. */
  .sidebar {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  /* ── 3.3 · Las burbujas flotantes ──────────────────────────────
     Entrada rápida (derecha) y Guía (izquierda) son fijas y se quedaban
     flotando POR ENCIMA del menú lateral abierto. Mientras el menú esté
     abierto se apartan; al cerrarlo vuelven. No se elimina ninguna. */
  .chat-toggle,
  #guiaChatBtn,
  .mobile-nav { transition: opacity 0.22s ease, transform 0.22s ease; }

  body:has(#sidebar.open) .chat-toggle,
  body:has(#sidebar.open) #guiaChatBtn {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.85);
  }

  /* ── 3.3b · La barra inferior, con el menú abierto ──────────────
     La barra vive en z-index 150 y el fondo oscuro del menú en 99: con
     el menú abierto la barra quedaba ENCIMA, tapando su última fila y
     además respondiendo a los toques a través del fondo. Y sobra: el
     menú lleva las mismas seis vistas. Se aparta mientras esté abierto. */
  body:has(#sidebar.open) .mobile-nav {
    opacity: 0;
    pointer-events: none;
  }

  /* ── 3.4 · Texto que se pueda leer ─────────────────────────────
     Había texto a 8,3 px. A un brazo de distancia, por debajo de 11 px
     no se lee. Estos son los sitios donde el diseño de escritorio se
     quedó demasiado chico al bajar al teléfono. */
  .cp-logo-tag,
  .cp-status-foot,
  .cp-am-tag,
  .cp-guia-date,
  .cal-hour-label,
  .cp-key-streak small,
  .cp-week-current-main small,
  .cp-week-today span,
  .weekly-empty-day { font-size: 0.72rem; }

  /* Estas dos viven en styles/views/estrategia.css, que se inyecta DESPUÉS
     de esta hoja al entrar en la vista: con la misma fuerza ganaría ella. */
  .diag-eyebrow,
  .es-kpi-lbl { font-size: 0.72rem !important; }

  .cal-event-mini { font-size: 0.7rem; }

  /* Las etiquetas de la barra inferior estaban a 8,3 px: es la navegación
     principal del teléfono y no se leía. Se sube a ~10 px y se quita el
     espaciado entre letras, que era lo que obligaba a encogerlas. Si aun
     así una palabra larga no cabe, se corta con puntos suspensivos antes
     que deformar la fila. */
  .mnav-link {
    font-size: 0.63rem;
    letter-spacing: 0;
    gap: 3px;
  }
  .mnav-link > span:last-child {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ── 3.5 · Nada tapado por la barra inferior ───────────────────
     La barra inferior es fija: todo lo que se desplaza necesita dejarle
     su hueco. `body` ya lo hace en styles.css; los contenedores con
     desplazamiento propio no. */
  .cal-scroll,
  .view-scroll,
  .container { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* Teléfono muy estrecho (320 px): el último apretón. Seis vistas en 320 px
   son 53 px por columna; por debajo de ~9 px la etiqueta deja de leerse, así
   que se prefiere cortarla con puntos suspensivos a encogerla más. */
@media (max-width: 360px) {
  /* La barra se pega a los bordes para ganar los milímetros que faltan.
     Estas reglas venían de styles/views/finanzas.css, que sólo se descarga al
     entrar en Finanzas: la misma barra cambiaba de tamaño según la vista. */
  .mobile-nav { left: 2px; right: 2px; padding: 2px; }
  .mobile-nav-inner { gap: 0; }
  .mnav-link {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 6px 1px;
    font-size: 0.58rem;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .mnav-link .icon { font-size: 1rem; }
  .greeting { font-size: 0.92rem; }
}

/* ════════════════════════════════════════════════════════════════
   4 · CUANDO IGNIA CORRE INSTALADA
   ────────────────────────────────────────────────────────────────
   `display-mode: standalone` = la abrieron desde el ícono de la pantalla
   de inicio, no desde una pestaña. Ya no hay barra del navegador.
   ════════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  /* Sin barra del navegador no hay botón de recargar del sistema, pero
     tampoco hace falta el nuestro: la app se refresca sola al abrirla.
     Se esconde para no gastar sitio con un botón que confunde. */
  #btn-recargar,
  .cp-cuenta-recargar { display: none; }

  /* Sin barra del navegador arriba, el contenido empieza pegado al
     notch. Se le devuelve el aire. */
  .topbar { padding-top: calc(10px + env(safe-area-inset-top)); }

  /* La tira de «instalar» no tiene sentido si YA está instalada. */
  .pwa-instalar { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   5 · LA TIRA PARA INSTALAR LA APP
   ────────────────────────────────────────────────────────────────
   Aparece una sola vez, abajo, por encima de la barra inferior. En
   Android trae botón de instalar; en iPhone, donde Safari no ofrece
   nada, explica el camino a mano. La dibuja pwa-instalar.js.
   ════════════════════════════════════════════════════════════════ */
.pwa-instalar {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(86px + env(safe-area-inset-bottom));
  z-index: 300;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 140, 60, 0.28);
  background: linear-gradient(180deg, rgba(34, 22, 14, 0.97), rgba(20, 13, 8, 0.98));
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  color: #f3e6da;
  font-family: inherit;
  transform: translateY(18px);
  opacity: 0;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.pwa-instalar.visible { opacity: 1; transform: translateY(0); }

.pwa-instalar-icono {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 122, 26, 0.16);
  font-size: 1.1rem;
}
.pwa-instalar-texto { flex: 1; min-width: 0; }
.pwa-instalar-titulo { font-size: 0.86rem; font-weight: 700; margin: 0 0 2px; }
.pwa-instalar-pie { font-size: 0.74rem; color: #a99384; margin: 0; line-height: 1.35; }

.pwa-instalar-si {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff9a3c, #ff6a1a);
  color: #1a0f06;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}
.pwa-instalar-no {
  flex: 0 0 auto;
  min-width: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #8a7668;
  font: inherit;
  font-size: 1.05rem;
  cursor: pointer;
}
.pwa-instalar-no:hover { color: #f3e6da; }

/* En la pantalla de acceso no hay barra inferior: la tira baja hasta el
   borde, respetando la franja del iPhone. */
.pwa-instalar.sin-barra { bottom: calc(14px + env(safe-area-inset-bottom)); }

/* La tira aterriza justo donde viven las dos burbujas flotantes (entrada
   rápida y Guía) y las dejaba tapadas: se veían, pero el toque se lo comía
   la tira. Mientras la tira esté puesta, las burbujas suben por encima de
   ella; cuando se va (se instala o se cierra con la X) vuelven a su sitio.
   La tira mide ~76 px y arranca a 86 del borde: 176 las deja justo encima. */
body:has(.pwa-instalar) .chat-toggle,
body:has(.pwa-instalar) #guiaChatBtn {
  bottom: calc(176px + env(safe-area-inset-bottom));
}

@media (max-width: 380px) {
  .pwa-instalar { gap: 9px; padding: 11px 12px; }
  .pwa-instalar-icono { display: none; }
  .pwa-instalar-si { padding: 0 12px; font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-instalar { transition: none; }
}