/* TROOPER — CAPA RESPONSIVE
   Todo lo que hace que la app sirva en teléfono vive aquí, junto, para no
   meterle mano a las ~5500 líneas de CSS inline del handoff.
   Se carga DESPUÉS del <style> inline (y después de bible.css) a propósito:
   comparte selectores con ellos y en empate de especificidad gana la última.

   Tres bloques:
     1) Global — nada se desborda de lado, respeto del notch.
     2) Lector — header móvil que no se rompe.
     3) Editor/admin — el panel completo era 100% escritorio; aquí se vuelve
        usable en un teléfono (una columna, listas con scroll propio,
        formularios apilados, panel de referencia a pantalla completa).
*/

/* =====================================================================
   1) GLOBAL
   ===================================================================== */

/* El botón "← ARCOS & CAPÍTULOS" solo existe en teléfono: en escritorio la
   lista siempre está a la vista y no hay a dónde volver. */
.admin-back-btn { display: none; }

/* ---------------------------------------------------------------------
   Banner "INSTALAR TROOPER" (installPrompt.jsx). Flota abajo, encima de
   todo menos de los modales de lectura, y se cierra para siempre con la ✕.
   --------------------------------------------------------------------- */
.pwa-banner {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 300;
  width: calc(100% - 24px);
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(10, 8, 18, 0.94);
  border: 1px solid rgba(239, 233, 220, 0.22);
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--ui-font);
  color: var(--ink);
  animation: pwaBannerIn 0.28s ease-out;
}
@keyframes pwaBannerIn {
  from { opacity: 0; transform: translate(-50%, 14px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.pwa-banner-icon { border-radius: 3px; flex-shrink: 0; }
.pwa-banner-text { flex: 1; min-width: 0; }
.pwa-banner-title {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  font-weight: 700;
}
.pwa-banner-sub {
  font-size: 11.5px;
  color: rgba(239, 233, 220, 0.6);
  margin-top: 2px;
}
.pwa-banner-btn {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 700;
  color: #0a0812;
  background: var(--neon);
  border: none;
  border-radius: 3px;
  padding: 9px 12px;
  cursor: pointer;
}
.pwa-banner-btn:active { filter: brightness(1.15); }
.pwa-banner-x {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: rgba(239, 233, 220, 0.45);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 2px;
}
.pwa-banner-x:hover { color: var(--ink); }

/* El notch y la barra de gestos del teléfono, cuando corre como app instalada. */
@supports (padding: env(safe-area-inset-top)) {
  @media (max-width: 900px) {
    .m-header { padding-top: calc(10px + env(safe-area-inset-top)); }
    .admin-panel { padding-top: env(safe-area-inset-top); }
    .admin-toggle { top: calc(10px + env(safe-area-inset-top)); }
    .rp-drawer { padding-bottom: env(safe-area-inset-bottom); }
  }
}

@media (max-width: 900px) {
  /* Ningún contenedor de texto empuja la página de lado. */
  .admin-panel, .admin-main, .wb-main, .rp-drawer { max-width: 100vw; }
  .admin-panel * { min-width: 0; }

  /* Los inputs de iOS hacen zoom automático si la fuente baja de 16px.
     Subimos el tamaño real de escritura para que el teléfono no salte. */
  .admin-input, .adm-textarea, .wb-textarea, textarea.admin-input {
    font-size: 16px;
  }
}

/* =====================================================================
   2) LECTOR — header móvil
   Cabían justos el logo, tres idiomas, el contador de cartas y el @handle:
   en 375px se salían de la pantalla.
   ===================================================================== */

@media (max-width: 720px) {
  .m-header {
    padding: 10px 12px;
    gap: 8px;
  }
  .m-header-title {
    font-size: 18px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
  }
  .m-header-actions {
    gap: 6px;
    min-width: 0;
    flex-shrink: 1;
  }
  .m-header-user {
    max-width: 84px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .m-header-cards { flex-shrink: 0; white-space: nowrap; }
  .lang-switcher { flex-shrink: 0; }
}

/* Teléfonos angostos: el idioma se queda solo con el código (ES / EN / KO).
   La bandera es lo primero que sobra cuando no hay ancho. */
@media (max-width: 430px) {
  .lang-switcher-flag { display: none; }
  .lang-switcher-code { padding: 0 2px; }
  .m-header-title { font-size: 16px; }
  .m-header-user { max-width: 68px; }
}

/* =====================================================================
   3) EDITOR / ADMIN
   Era una rejilla fija de 380px + resto, con un header de 64px de aire
   arriba. En teléfono no se podía ni ver la lista de capítulos.
   ===================================================================== */

@media (max-width: 900px) {

  /* --- toggle LECTOR / EDITOR (flota arriba a la derecha) --- */
  .admin-toggle {
    top: 10px;
    right: 10px;
    gap: 8px;
    padding: 6px 10px;
  }
  .admin-toggle-btn { font-size: 9px; letter-spacing: 0.18em; }

  /* --- header del panel --- */
  .admin-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    /* El 56px de arriba deja libre el toggle flotante. */
    padding: 56px 12px 10px;
  }
  .admin-title-h { font-size: 20px; }
  .admin-badge { font-size: 8px; letter-spacing: 0.3em; }

  /* Las pestañas (ESTRUCTURA · FICHAS · TIMELINE · CARTAS · EXPORTAR) se
     deslizan de lado en vez de encimarse. */
  .admin-header-right {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .admin-header-right::-webkit-scrollbar { display: none; }
  .admin-header-right > * { flex-shrink: 0; }
  .admin-view-btn { padding: 8px 10px; font-size: 9px; letter-spacing: 0.18em; }

  /* --- una sola columna: lista arriba, contenido abajo --- */
  .admin-grid,
  .wb-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
  }
  .admin-sidebar,
  .wb-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    /* Alto propio con scroll: la lista no empuja el editor fuera de pantalla. */
    max-height: 38vh;
    padding: 12px 12px 16px;
  }
  .admin-main, .wb-main { padding-bottom: 40px; }
  .wb-add-btn, .admin-new-arc { margin-top: 10px; }

  /* Dos pantallas en vez de dos paneles: mientras editas un capítulo o una
     ficha, la lista se quita de en medio y vuelves con el botón ←. */
  .admin-grid.has-active .admin-sidebar,
  .wb-grid.has-active .wb-sidebar { display: none; }
  .admin-grid.has-active,
  .wb-grid.has-active { grid-template-rows: minmax(0, 1fr); }

  .admin-back-btn {
    display: block;
    width: 100%;
    text-align: left;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.22em;
    font-weight: 700;
    color: rgba(239, 233, 220, 0.7);
    background: rgba(239, 233, 220, 0.05);
    border: none;
    border-bottom: 1px solid var(--rule);
    padding: 12px;
    cursor: pointer;
  }
  .admin-back-btn:active { background: rgba(239, 233, 220, 0.12); }

  /* --- editor de capítulo --- */
  .adm-editor { padding: 10px 12px 60px; }
  .adm-editor-head-top { flex-wrap: wrap; gap: 8px; }
  .adm-editor-actions { flex-wrap: wrap; gap: 6px; }
  .adm-editor-row { flex-direction: column; gap: 10px; }
  .adm-editor-row .adm-label,
  .adm-editor-row .adm-num-input { width: 100%; }
  .adm-media-grid { grid-template-columns: 1fr; }
  .adm-editor-stats { flex-wrap: wrap; gap: 6px; font-size: 10px; }
  .adm-textarea { min-height: 45vh; }
  .adm-lang-tabs { flex-wrap: wrap; }

  /* Filas de arco y capítulo en la lista: que el título mande y lo demás
     se encoja, en vez de desbordar la fila. */
  .adm-arc-head { gap: 6px; }
  .adm-ch { gap: 6px; }
  .adm-arc-title, .adm-ch-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* --- fichas (biblia del mundo) --- */
  .wb-editor { padding: 6px 12px 60px; }
  .wb-editor-head-top { flex-wrap: wrap; }
  .wb-kind-select { width: 100%; }
  .wb-row { flex-direction: column; gap: 10px; }
  .wb-row > .adm-label, .wb-grow { width: 100%; min-width: 0; }
  .wb-name-input { font-size: 18px; }
  .wb-chpicker-row { align-items: stretch; }
  .wb-chpicker-note { min-width: 0; width: 100%; }
  .wb-link-row { align-items: stretch; }
  .wb-link-label, .wb-link-target, .wb-link-kind { width: 100%; min-width: 0; }
  .wb-editor-footer { flex-direction: column; align-items: stretch; gap: 8px; }
  .wb-card-btn { width: 100%; }

  /* En móvil las pestañas de tipo de ficha van en fila deslizable: ocupaban
     medio pantallazo de alto apiladas. */
  .wb-kind-tabs {
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    padding-bottom: 8px;
  }
  .wb-kind-tabs::-webkit-scrollbar { display: none; }
  .wb-kind-tab { flex-shrink: 0; padding: 7px 9px; }
  .wb-kind-label { display: none; }
  .wb-kind-tab.active .wb-kind-label { display: inline; }

  /* --- panel de referencia: a pantalla completa --- */
  .rp-drawer { width: 100%; max-width: 100%; border-left: none; }
  .admin-panel.rp-open .admin-main { padding-right: 0; }

  /* --- cartas --- */
  .cardadm-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .cardadm-edit-cols { grid-template-columns: 1fr; gap: 18px; }
  .cardadm-field-row { grid-template-columns: 1fr; gap: 10px; }
  .cardadm-rule { grid-template-columns: 1fr 1fr; gap: 6px; }

  /* --- timeline de la vista admin --- */
  .admin-tl-wrap { padding: 0 8px; }
}

/* Teléfono de verdad (no tablet): apretamos un poco más. */
@media (max-width: 560px) {
  .admin-header { padding: 52px 10px 8px; }
  .admin-sidebar, .wb-sidebar { max-height: 34vh; padding: 10px; }
  .adm-editor, .wb-editor { padding-left: 10px; padding-right: 10px; }
  .cardadm-rule { grid-template-columns: 1fr; }
  .wb-color-hint { display: none; }
}