/* MODAL DE DETALLE (FOTO AMPLIADA + P/N + NOMBRES + NOTAS + REFERENCIAS) */
.photo-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.92);
  display: none; align-items: center; justify-content: center; z-index: 9999; padding: 20px;
}
.detail-modal-box {
  width: 100%;
  max-width: 440px;
  max-height: 88vh;
  background: var(--panel-bg);
  border: 1px solid var(--theme-accent);
  border-radius: 18px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  animation: detailFicheIn 0.22s cubic-bezier(.2,.8,.2,1);
  /* La "X" ya no vive dentro de lo que hace scroll (ver .detail-modal-scroll) — así se queda
     siempre a mano, sin tener que subir hasta arriba del todo para cerrar */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.detail-modal-scroll {
  overflow-y: auto;
  padding: 18px;
}
@keyframes detailFicheIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .detail-modal-box { animation: none; }
}
.detail-hero-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
  padding-right: 30px;
}
.detail-photo-box {
  width: 120px; height: 120px;
  flex-shrink: 0;
  background: #000;
  border: 1px solid var(--border-line);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}
.detail-photo-box img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.15s ease; }
.photo-swapping { opacity: 0 !important; }

/* KIT: LA FOTO (DESPIECE DEL IPC) SE MUESTRA GRANDE Y COMPLETA, SIN RECORTAR, PARA PODER LEER LOS NÚMEROS DE ITEM */
.detail-hero-row.kit-hero { flex-direction: column; padding-right: 0; }
.detail-hero-row.kit-hero .detail-photo-box {
  width: 100%;
  height: 260px;
  background: #000;
}
.detail-hero-row.kit-hero .detail-photo-box img { object-fit: contain; }

/* LIGHTBOX: FOTO AMPLIADA A PANTALLA COMPLETA (SOLO AL TOCAR LA FOTO) */
.photo-lightbox {
  position: fixed; inset: 0; background: rgba(0,0,0,0.95);
  display: none; align-items: center; justify-content: center; z-index: 100000; padding: 20px;
}
.photo-lightbox-box {
  max-width: 100%; max-height: 85vh;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.photo-lightbox-box img {
  max-width: 100%; max-height: 75vh; object-fit: contain;
  border-radius: 12px; border: 1px solid var(--theme-accent);
  transition: opacity 0.15s ease;
}
.lightbox-thumbs { display: flex; gap: 8px; overflow-x: auto; max-width: 100%; }
.lightbox-thumbs img {
  width: 50px; height: 50px; border-radius: 6px; border: 2px solid transparent;
  cursor: pointer; object-fit: cover; flex-shrink: 0;
}
.lightbox-thumbs img.active-thumb { border-color: var(--theme-accent); }
.btn-close-lightbox {
  position: absolute; top: 20px; right: 20px; color: #fff; background: rgba(255,255,255,0.15);
  border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; cursor: pointer; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.detail-text-col { flex: 1; min-width: 0; padding-top: 2px; }
.detail-pn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.detail-pn { font-family: var(--font-code); font-size: 20px; font-weight: 800; color: var(--ecam-amber); word-break: break-word; }
.detail-name-en { font-size: 15px; font-weight: 700; color: #fff; margin-top: 6px; }
.detail-name-loc { font-size: 12.5px; font-weight: 600; color: var(--theme-accent); margin-top: 3px; }

.modal-gallery-thumbs {
  display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px;
}
.modal-gallery-thumbs img {
  width: 48px; height: 48px; border-radius: 6px; border: 2px solid transparent; cursor: pointer; object-fit: cover; flex-shrink: 0;
}
.modal-gallery-thumbs img.active-thumb { border-color: var(--theme-accent); }
.btn-close-modal { position: absolute; top: 14px; right: 14px; color: #fff; background: rgba(255,255,255,0.15); border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 16px; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; }

/* ETIQUETAS DE FILTRO Y DE TIPO DE ARTÍCULO: "COMPONENTES/CONSUMIBLES" va partida en dos líneas
   (COMPONENTES encima, CONSUMIBLES debajo, ver el <br> en el HTML/JS) para que quepa en móvil sin
   desbordarse ni salirse de la celda. En pantallas muy estrechas reducimos un poco más por seguridad.
   Este bloque va al final a propósito, para que gane siempre sobre las reglas base de arriba. */
@media (max-width: 360px) {
  .filter-pill { font-size: 8.5px; padding: 6px 4px; letter-spacing: 0; }
  .type-btn { font-size: 10px; padding: 9px 5px; letter-spacing: 0.2px; }
}

/* BARRA SUPERIOR EN MÓVIL: AMOS + ADMIN + IDIOMA + TEMA + ONLINE EN UNA SOLA LÍNEA.
   El <select> de tema se ensancha solo con la opción más larga ("Omega Protocol (bloqueado)"),
   así que le limitamos el ancho para que no empuje al resto fuera de la fila.
   Este bloque va al final a propósito, para que gane siempre sobre las reglas base de arriba. */
@media (max-width: 480px) {
  .top-utility-bar { flex-wrap: nowrap; gap: 3px; }
  .top-utility-bar > div:first-child { flex-shrink: 0; gap: 3px; }
  .amos-badge { font-size: 7px; padding: 4px 7px; max-width: 104px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .admin-reset-btn { font-size: 7px; padding: 4px 6px; }
  .controls-group { gap: 3px; flex-shrink: 1; min-width: 0; }
  .lang-select { font-size: 7px; padding: 4px 5px; max-width: 74px; text-overflow: ellipsis; }
  .theme-select { font-size: 7px; padding: 4px 4px; max-width: 94px; text-overflow: ellipsis; }
  .status-screen { padding: 4px 6px; flex-shrink: 0; }
  .status-line { font-size: 7px; gap: 3px; }
}
@media (max-width: 360px) {
  .amos-badge { font-size: 6.5px; padding: 3px 6px; max-width: 88px; }
  .admin-reset-btn { font-size: 6.5px; padding: 3px 5px; }
  .lang-select { font-size: 6.5px; padding: 3px 4px; max-width: 64px; }
  .theme-select { font-size: 6.5px; padding: 3px 3px; max-width: 80px; }
  .status-screen { padding: 3px 5px; }
  .status-line { font-size: 6.5px; gap: 2px; }
}

.plane-game-wrap { max-width: 360px; }

/* SOLO IPAD (RANGO DE TABLET, NI MÓVIL NI ORDENADOR): EL POPUP ENTERO MÁS GRANDE, APROVECHANDO SOBRE TODO EL ANCHO.
   Este bloque va al final a propósito, para que gane siempre sobre las reglas base de arriba cuando el ancho coincide. */
@media (min-width: 700px) and (max-width: 1300px) {
  body { max-width: 96%; }

  .photo-modal { padding: 16px; }
  .detail-modal-box { width: 96%; max-width: 1080px; max-height: 92vh; }
  .detail-modal-scroll { padding: 36px 40px; }
  .detail-hero-row { gap: 24px; margin-bottom: 22px; padding-right: 40px; }
  .detail-photo-box { width: 200px; height: 200px; }
  .detail-hero-row.kit-hero .detail-photo-box { height: 420px; }
  .detail-pn { font-size: 30px; }
  .detail-name-en { font-size: 21px; }
  .detail-name-loc { font-size: 16.5px; }
  .modal-gallery-thumbs img { width: 64px; height: 64px; }
  .tag-pill-ata, .tag-pill-date { font-size: 13.5px; }
  .expand-notes { font-size: 14.5px; padding: 15px 18px; }
  .expand-notes-label { font-size: 11.5px; }
  .ref-block { font-size: 13.5px; padding: 13px 18px; }
  .btn-close-modal { width: 42px; height: 42px; font-size: 19px; top: 18px; right: 18px; }

  #modalKitSection { margin-top: 24px; padding-top: 20px; }
  .kit-components-title { font-size: 18px; }
  .kit-count-badge { font-size: 13.5px; }
  .kit-search-input { font-size: 16px; padding: 13px 15px; }
  .kit-table-wrap { max-height: 520px; }
  .kit-table-header, .kit-view-row { padding: 11px 16px; }
  .kit-col-item { width: 50px; font-size: 13.5px; }
  .kit-col-desc { font-size: 15px; }
  .kit-col-pn { width: 170px; font-size: 14px; }

  /* MINIJUEGO EN TABLET: se quedaba con el mismo ancho fijo de móvil (360px) en pantallas
     mucho más grandes, dejando un montón de espacio muerto alrededor — aquí aprovecha bastante
     más ancho (la resolución interna del canvas sigue siendo la misma, solo se escala más
     grande vía CSS, que para unas formas geométricas simples como estas no se nota).
     El ancho también se limita según la ALTURA disponible (100vh menos cabecera+paddings),
     convertida a ancho equivalente vía la proporción 360:560 del canvas — así en tablets en
     horizontal (poca altura) no se pasa de largo y se corta por abajo. */
  .plane-game-wrap { max-width: min(640px, calc((100vh - 90px) * 360 / 560)); }
}