:root{
  --ui-font: "Overpass", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono-font: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  --mono-size: 16px;
}

#fir-notams-public {
  --gap:14px; --bd:#e5e7eb; --muted:#64748b; --ink:#0f172a; --bg:#fff; --chip:#eef2ff;
  --sev-critical:#991b1b; --sev-advisory:#b45309; --sev-info:#1d4ed8;
  --state-active:#0d9488; --state-future:#475569; --state-finished:#1f2937;
  font-family: var(--ui-font); color:var(--ink);
  max-width: 1100px; margin: 0 auto; background: var(--bg); border:1px solid var(--bd); border-radius:16px; padding:16px;
}
#fir-notams-public h2{ margin:0 0 8px; font-size:22px; font-weight:800; }
#fir-notams-public .toolbar{ display:flex; gap:var(--gap); flex-wrap:wrap; align-items:end; margin:8px 0 12px; }
#fir-notams-public label{ font-size:12px; font-weight:600; color:#0f172a; display:block; margin:0 0 6px; }
#fir-notams-public select,#fir-notams-public input[type="search"]{
  border:1px solid #d1d5db; border-radius:12px; padding:10px 12px; font-size:14px; min-width:200px; width:100%;
}
#fir-notams-public .muted{ color:var(--muted); font-size:12px; }
#fir-notams-public .list{ display:flex; flex-direction:column; gap:10px; }
#fir-notams-public details.notam{ border:1px solid var(--bd); border-radius:12px; overflow:hidden; background:#fff; }
#fir-notams-public details.notam[open]{ box-shadow: 0 6px 24px rgba(0,0,0,.06); }
#fir-notams-public summary{ list-style:none; display:flex; align-items:center; gap:10px; padding:12px; cursor:pointer; }
#fir-notams-public summary::-webkit-details-marker{ display:none; }
#fir-notams-public .sev{ font-size:11px; font-weight:800; letter-spacing:.4px; padding:4px 8px; border-radius:999px; color:#fff; }
#fir-notams-public .sev.CRITICAL{ background:var(--sev-critical); }
#fir-notams-public .sev.ADVISORY{ background:var(--sev-advisory); }
#fir-notams-public .sev.INFO{ background:var(--sev-info); }
#fir-notams-public .state-badge{
  font-size:11px; font-weight:800; letter-spacing:.3px; padding:4px 8px; border-radius:999px; color:#fff;
}
#fir-notams-public .state-badge.ACTIVO{ background:var(--state-active); }
#fir-notams-public .state-badge.FUTURO{ background:var(--state-future); }
#fir-notams-public .state-badge.FINALIZÓ{ background:var(--state-finished); }
#fir-notams-public .head{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#fir-notams-public .kicker{ font-size:12px; color:#334155; background:#f1f5f9; padding:3px 8px; border-radius:999px; }
#fir-notams-public .title{ font-weight:700; font-size:15px; color:#0f172a; }
#fir-notams-public .ttl{ margin-left:auto; display:flex; gap:10px; align-items:center; }
#fir-notams-public .countdown{ font-size:12px; color:#0f172a; white-space:nowrap; }
#fir-notams-public .body{ padding:12px; border-top:1px solid var(--bd); display:grid; gap:12px; grid-template-columns: 1fr; }
/* Campos grandes */
#fir-notams-public .field{ font-size:15px; }
#fir-notams-public .field b{ font-size:15px; font-weight:700; color:#111827; }
/* Chips más grandes */
#fir-notams-public .chip{ background:var(--chip); color:#334155; font-size:13px; padding:4px 10px; border-radius:999px; margin-right:6px; font-weight:600; }
/* Texto NOTAM en “máquina de escribir” */
#fir-notams-public .text{
  white-space:pre-wrap; font-family: var(--mono-font); font-size: var(--mono-size); line-height:1.55; color:#0f172a;
  background:#fcfcfd; border:1px dashed #e2e8f0; border-radius:10px; padding:12px;
}
/* Miniaturas + leyenda */
#fir-notams-public .thumbs{ display:flex; gap:10px; flex-wrap:wrap; }
#fir-notams-public .thumb{
  width:150px; aspect-ratio:1/1.414; background:#f8fafc; border:1px solid var(--bd); border-radius:10px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; cursor:zoom-in; position:relative;
}
#fir-notams-public .thumb img{ width:100%; height:100%; object-fit:cover; user-select:none; -webkit-user-drag:none; pointer-events:none; }
#fir-notams-public .thumb-caption{ font-size:11px; color:#334155; text-align:center; margin-top:4px; }
/* Modal */
#fir-notams-modal{ position:fixed; inset:0; background:rgba(2,6,23,.82); display:none; align-items:center; justify-content:center; z-index:99999; }
#fir-notams-modal[aria-hidden="false"]{ display:flex; }
#fir-notams-modal .frame{
  position:relative; width:min(92vw,1000px); height:min(92vh, 1400px); background:#0b1220; border:1px solid #0f172a; border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; padding:14px;
}
#fir-notams-modal .canvas{
  width:100%; height:100%; background-position:center; background-repeat:no-repeat; background-size:contain;
  user-select:none; -webkit-user-drag:none;
}
#fir-notams-modal .shield{ position:absolute; inset:0; }
#fir-notams-modal .ui{ position:absolute; top:8px; right:8px; display:flex; gap:6px; }
#fir-notams-modal button{
  border:1px solid #cbd5e1; background:#111827; color:#f8fafc; border-radius:10px; padding:8px 10px; font-weight:700; cursor:pointer; font-size:12px;
}
#fir-notams-modal .meta{ position:absolute; bottom:8px; left:12px; right:12px; color:#cbd5e1; font-size:12px; display:flex; justify-content:space-between; gap:8px; }
/* Estados / paginación */
#fir-notams-public .state{ border:1px dashed var(--bd); padding:12px; border-radius:12px; text-align:center; color:var(--muted); }
#fir-notams-public .pager{ display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:12px; flex-wrap:wrap; }
#fir-notams-public .pager .info{ font-size:12px; color:#334155; }
#fir-notams-public .pager button, #fir-notams-public .pager select{
  border:1px solid #cbd5e1; background:#fff; color:#0f172a; border-radius:10px; padding:8px 10px; font-weight:600; cursor:pointer; font-size:12px;
}
#fir-notams-public .pager button:disabled{ opacity:.5; cursor:not-allowed; }

@media (min-width: 860px){
  #fir-notams-public .body{ grid-template-columns: 1.3fr .7fr; }
}

/* —— Ajustes responsive finos —— */

/* Tipografía fluida */
:root{
  --step-0: clamp(14px, 1.2vw + 10px, 16px);
  --step-1: clamp(16px, 1.4vw + 10px, 18px);
}
body{ font-size: var(--step-0); }
.notam-body{ font-size: var(--step-1); }

/* Cabezal del acordeón: envuelve bien y prioriza el título */
.notam-head{
  display:flex; gap:.75rem; align-items:flex-start; flex-wrap:wrap;
}
.notam-head .title{ flex:1 1 240px; min-width:0; }

/* Badges/tags: wrap limpito */
.badges{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* Bloque de fechas: pasa de 2 columnas a 1 en pantallas chicas */
.dates{
  display:grid; grid-template-columns: 1fr auto; gap:.5rem;
}
@media (max-width: 640px){
  .dates{ grid-template-columns: 1fr; }
}

/* Miniaturas más chicas por defecto y 100% en muy chico */
.thumb{
  width: 160px; max-width: 100%; height:auto; object-fit:cover; border-radius:8px;
}
@media (max-width: 480px){
  .thumb{ width: 130px; }
}

/* Grilla de galería adaptable */
.gallery{
  display:grid; gap:12px;
  grid-template-columns: repeat(auto-fill, minmax(160px,1fr));
}
@media (max-width: 480px){
  .gallery{ grid-template-columns: 1fr; }
}

/* Visor (modal) para que quepa siempre en pantalla */
.viewer img{
  max-width: min(100vw, 960px);
  max-height: 85vh;
  width:auto; height:auto; object-fit:contain;
}

/* Asegurar que el bloque puede ocupar 100% del ancho disponible en Brizy */
.fir-notams-wrap{ width:100% !important; max-width:100% !important; }
/* Forzar Overpass en selector y búsqueda */
#fir-notams-public select,
#fir-notams-public input[type="search"]{
  font-family: var(--ui-font) !important; /* usa Overpass */
}

#fir-notams-public option{
  font-family: var(--ui-font) !important; /* opciones del dropdown */
}

/* Placeholder también en Overpass */
#fir-notams-public input[type="search"]::placeholder{
  font-family: var(--ui-font);
}