/* =======================================================================
   Esquemap UI – CSS principal
   - Tipografías modernas (Inter)
   - Modo claro/oscuro (auto + toggle)
   - Header mejorado
   - Navbar responsive con sombras laterales en overflow
   - Viewer full-height
   - Overlays con accesibilidad y hints sutiles
   - Loader + Toast
   - Opcionales: dos temas azules (duotone y clásico)
   ======================================================================= */

/* =========================
   Paleta base (modo claro)
   ========================= */
:root{
  --brand-700:#0b63ce;
  --brand-600:#1967d2;
  --brand-50:#eaf2ff;

  --bg-0:#ffffff;
  --bg-25:#fbfcfe;
  --bg-50:#f6f7fb;
  --bg-100:#eef1f6;

  --text:#11181c;
  --text-muted:#667085;

  --border:#e6e9ee;

  --ring:#b2d4ff;
  --radius:12px;

  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow-md:0 6px 20px rgba(0,0,0,.08);
}

/* =========================
   Paleta (modo oscuro)
   ========================= */
html[data-theme="dark"]{
  --brand-700:#7bb3ff;
  --brand-600:#61a2ff;
  --brand-50:#0f1b2e;

  --bg-0:#0c1220;
  --bg-25:#0a101c;
  --bg-50:#0a0f1a;
  --bg-100:#0e1626;

  --text:#e8edf6;
  --text-muted:#a3adc2;

  --border:#1e2a40;

  --ring:#305b99;
}

/* =========================
   Base y tipografías
   ========================= */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:"Inter", system-ui,-apple-system,"Segoe UI",Roboto,Arial,"Noto Sans","Liberation Sans",sans-serif;
  color:var(--text);
  background:var(--bg-50);
  display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* =========================
   Header (título + toggle)
   ========================= */
.w3-container.w3-blue{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  background:var(--bg-0) !important;
  color:var(--text) !important;
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
}
.w3-container.w3-blue h1{
  margin:0;
  padding:16px;
  font-weight:800;
  letter-spacing:.2px;
  font-size:clamp(22px, 2.2vw + 14px, 32px);
}
.theme-toggle{
  margin-right:8px;
  border:none; background:var(--bg-100); color:var(--text);
  padding:10px 12px; border-radius:10px; line-height:1;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .06s ease, background .2s ease, color .2s ease;
}
.theme-toggle:hover{ transform:translateY(-1px); }
.theme-toggle:active{ transform:translateY(0); }
html[data-theme="dark"] .theme-toggle{ background:#101a2c; color:var(--text); }

/* =========================
   Navbar responsive
   ========================= */
.w3-navbar{
  list-style:none; margin:0; padding:0 8px;
  display:flex; align-items:center; gap:0;
  background:var(--bg-0);
  border-bottom:1px solid var(--border);
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
  position:relative;
}
/* Sombras laterales cuando hay overflow (se activan por JS con clases) */
.w3-navbar::before, .w3-navbar::after{
  content:""; position:absolute; top:0; bottom:0; width:28px; pointer-events:none; display:none;
}
.w3-navbar.has-left-overflow::before{ left:0; display:block; background:linear-gradient(to right, var(--bg-0), transparent) }
.w3-navbar.has-right-overflow::after{ right:0; display:block; background:linear-gradient(to left, var(--bg-0), transparent) }
/* Ocultar scrollbar en WebKit sin romper accesibilidad */
.w3-navbar::-webkit-scrollbar{ height:0; width:0 }

.w3-navbar li{flex:0 0 auto}
.w3-navbar a{
  display:block; padding:12px 16px; white-space:nowrap;
  text-decoration:none; color:var(--text);
  transition:background .15s ease, color .15s ease;
  scroll-snap-align:center;
  border-radius:8px 8px 0 0;
}
.w3-navbar a:hover{ background:var(--bg-100) }
.w3-navbar a.active,
.w3-navbar a[aria-current="page"]{
  background:var(--brand-50);
  color:var(--brand-700);
  font-weight:600;
  border-bottom:2px solid var(--brand-700);
}

/* =========================
   Viewer (full-height)
   ========================= */
header, .w3-navbar, footer{ flex:0 0 auto; }
.w3-viewer{
  position:relative; flex:1 1 auto; min-height:320px;
  background:var(--bg-0);
}
/* Fondo OSD y controles legibles en ambos temas */
.openseadragon-container, .openseadragon-canvas{ background:var(--bg-0) }
.openseadragon-container .openseadragon-controls{ margin:8px }
.openseadragon-container .openseadragon-button{
  background:var(--bg-0);
  border-radius:10px; box-shadow:var(--shadow-sm);
}
/* Íconos PNG de OSD con buen contraste en oscuro */
html[data-theme="dark"] .openseadragon-container .openseadragon-button img{
  filter: invert(1) brightness(1.1) contrast(1.05);
}

/* =========================
   Overlays (clic/hover/a11y)
   ========================= */
.overlay-clickable{ cursor:pointer; position:relative; border-radius:6px; }
.overlay-clickable:focus-visible{
  outline:3px solid var(--ring); outline-offset:2px; border-radius:8px;
}
.w3-overlays   { background:rgba(60,60,60,.08);  outline:1px solid rgba(60,60,60,.20) }
.w3-overlays-t { background:rgba(0,150,255,.12); outline:1px solid rgba(0,150,255,.26) }
.w3-overlays-b { background:rgba(255,150,0,.12); outline:1px solid rgba(255,150,0,.24) }
.w3-overlays:hover   { background:rgba(60,60,60,.14) }
.w3-overlays-t:hover { background:rgba(0,150,255,.18) }
.w3-overlays-b:hover { background:rgba(255,150,0,.18) }
/* hit-area más amplia para touch */
.overlay-clickable::before{
  content:""; position:absolute; inset:-6px; pointer-events:none;
}

/* =========================
   Loader + Toast
   ========================= */
#loadingOverlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, var(--bg-0), rgba(0,0,0,.02));
  z-index:2;
}
.spinner{
  width:28px; height:28px; border-radius:50%;
  border:3px solid rgba(191,213,255,.8);
  border-top-color:var(--brand-600);
  animation:spin .9s linear infinite; margin-right:10px;
}
@keyframes spin{ to { transform: rotate(360deg) } }
.loading-text{ color:var(--text-muted); font-size:14px }

#toast{
  position:fixed; left:12px; bottom:12px; z-index:9999; max-width:92vw;
  background: rgba(16,24,40,.92); color:#fff;
  padding:10px 12px; border-radius:10px; font-size:13.5px;
  box-shadow: var(--shadow-md);
  opacity:0; transform: translateY(10px); pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
#toast.show{ opacity:1; transform: translateY(0); pointer-events:auto }

/* =========================
   Footer
   ========================= */
footer{
  padding:14px 16px 22px;
  background:var(--bg-0);
  border-top:1px solid var(--border);
}
footer h6{
  margin:0; font-weight:600; color:var(--text-muted);
  font-size:14.5px; letter-spacing:.1px;
}

/* =========================
   Responsive
   ========================= */
@media (max-width:640px){
  .w3-container.w3-blue h1{
    padding:14px 12px;
    font-size:clamp(19px, 5vw, 24px);
  }
  .theme-toggle{ margin-right:10px; }
  .w3-navbar a{ padding:12px 14px }
}

/* =======================================================================
   VARIANTES OPCIONALES DE ESTÉTICA (sólo modo CLARO)
   Activá agregando la clase al <body>:
   - theme-blue-duotone
   - theme-blue-classic
   ======================================================================= */

/* === Tema Azul Tinta elegante === */
html[data-theme="light"] body.theme-blue-ink{
  --ink-header:#0F2A4A;  /* azul tinta profundo (header) */
  --ink-accent:#1B4A74;  /* azul sobrio para acentos/navbar */
  --ink-hover:#F1F5FF;   /* hover suave en navbar blanca */
  --ink-shadow:rgba(0,0,0,.22);
}

/* Header: fondo azul tinta, título centrado, peso alto */
html[data-theme="light"] body.theme-blue-ink .w3-container.w3-blue{
  background: var(--ink-header) !important;
  color:#fff !important;
  border-bottom:none;
  box-shadow: 0 2px 18px var(--ink-shadow);
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* centro real del título */
  align-items: center;
}
html[data-theme="light"] body.theme-blue-ink .w3-container.w3-blue h1{
  grid-column: 2;
  margin:0;
  padding: 18px 0;
  text-align:center;
  font-weight:800;
  letter-spacing:.2px;
  font-size: clamp(24px, 2.4vw + 14px, 36px); /* grande pero fluido */
  line-height:1.15;
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 1px rgba(0,0,0,.15);
}

/* Toggle de tema a la derecha, integrado al header oscuro */
html[data-theme="light"] body.theme-blue-ink .theme-toggle{
  grid-column: 3;
  justify-self: end;
  margin-right: 12px;
  background: rgba(255,255,255,.12);
  color:#fff;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: none;
}
html[data-theme="light"] body.theme-blue-ink .theme-toggle:hover{
  background: rgba(255,255,255,.18);
}

/* Navbar: blanca, bien separada del header; activo con subrayado azul tinta */
html[data-theme="light"] body.theme-blue-ink .w3-navbar{
  background:#fff;
  border-bottom: 2px solid var(--ink-accent);
}
html[data-theme="light"] body.theme-blue-ink .w3-navbar a{
  color:#1d2430;
  border-radius: 8px 8px 0 0;
}
html[data-theme="light"] body.theme-blue-ink .w3-navbar a:hover{
  background: var(--ink-hover);
}
html[data-theme="light"] body.theme-blue-ink .w3-navbar a.active,
html[data-theme="light"] body.theme-blue-ink .w3-navbar a[aria-current="page"]{
  position: relative;
  color: var(--ink-accent);
  font-weight: 700;
  background: transparent; /* dejar visible el subrayado */
  border-bottom: none;
}
html[data-theme="light"] body.theme-blue-ink .w3-navbar a.active::after,
html[data-theme="light"] body.theme-blue-ink .w3-navbar a[aria-current="page"]::after{
  content:""; position:absolute; left:16px; right:16px; bottom:-2px;
  height:3px; background: var(--ink-accent); border-radius:3px;
}

/* Sombras de overflow sobre navbar blanca */
html[data-theme="light"] body.theme-blue-ink .w3-navbar.has-left-overflow::before{
  background: linear-gradient(to right, #fff, transparent);
}
html[data-theme="light"] body.theme-blue-ink .w3-navbar.has-right-overflow::after{
  background: linear-gradient(to left, #fff, transparent);
}

/* =========================
   Detalles de interacción
   ========================= */
@media (hover:hover){
  .overlay-clickable:hover{ filter:brightness(.98) }
}

/* === Centrar título en todos los temas y modos === */
.w3-container.w3-blue{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr; /* [izq] [título] [der] */
  align-items: center;
  /* mantiene tus colores según modo/tema porque ya usan variables */
}
.w3-container.w3-blue h1{
  grid-column: 2;          /* título al centro real */
  text-align: center;
  margin: 0;
  padding: 18px 0;         /* un poco más de aire vertical */
  line-height: 1.15;
}
.theme-toggle{
  grid-column: 3;          /* botón a la derecha */
  justify-self: end;
  margin-right: 12px;
}

/* === 1) Header siempre centrado (todos los temas y modos) === */
.w3-container.w3-blue{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr; /* [izq] [título] [der] */
  align-items: center;
}
.w3-container.w3-blue h1{
  grid-column: 2;
  text-align: center;
  margin: 0;
  padding: 18px 0;
  line-height: 1.15;
}
.theme-toggle{
  grid-column: 3;
  justify-self: end;
  margin-right: 12px;
}

/* === 2) Modo oscuro: mismo tamaño del título que en claro === */
html[data-theme="dark"] .w3-container.w3-blue h1{
  font-size: clamp(24px, 2.4vw + 14px, 36px);
}

/* === 3) Modo oscuro: hover visible en la barra de navegación === */
html[data-theme="dark"] .w3-navbar a:hover{
  /* contraste claro sobre el fondo oscuro de la navbar */
  background: #15233a; /* o usa: color-mix(in srgb, var(--bg-0) 70%, #fff 30%) */
}

/* === 4) Tema azul tinta (theme-blue-ink) también en oscuro === */
html[data-theme="dark"] body.theme-blue-ink{
  --ink-header:#0B1E36;   /* header navy para dark */
  --ink-accent:#65A6FF;   /* acento legible en dark */
  --ink-hover:#15233a;    /* hover sobre navbar en dark */
}

html[data-theme="dark"] body.theme-blue-ink .w3-container.w3-blue{
  background: var(--ink-header) !important;
  color:#fff !important;
  border-bottom:none;
  box-shadow: 0 2px 18px rgba(0,0,0,.35);
}
html[data-theme="dark"] body.theme-blue-ink .w3-container.w3-blue h1{
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 1px rgba(0,0,0,.15);
}

/* Navbar en dark para theme-blue-ink */
html[data-theme="dark"] body.theme-blue-ink .w3-navbar{
  background: var(--bg-0);
  border-bottom: 2px solid var(--ink-accent);
}
html[data-theme="dark"] body.theme-blue-ink .w3-navbar a:hover{
  background: var(--ink-hover);
}
html[data-theme="dark"] body.theme-blue-ink .w3-navbar a.active,
html[data-theme="dark"] body.theme-blue-ink .w3-navbar a[aria-current="page"]{
  position: relative;
}

/* === Fix: H1 igual en claro/oscuro y centrado universal === */
.w3-container.w3-blue{
  display:grid !important;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
}
.w3-container.w3-blue h1{
  grid-column:2;
  text-align:center;
  margin:0;
  padding:18px 0;
  line-height:1.15;
  font-size: clamp(24px, 2.4vw + 14px, 36px); /* mismo tamaño en ambos modos */
}
.theme-toggle{
  grid-column:3;
  justify-self:end;
  margin-right:12px;
}

/* === Dark mode para theme-blue-ink (header/nav azules) === */
html[data-theme="dark"] body.theme-blue-ink{
  --ink-header:#0B1E36;   /* azul tinta oscuro para header en dark */
  --ink-accent:#65A6FF;   /* acento legible en dark */
  --ink-hover:#15233a;    /* hover navbar en dark */
}

/* Header azul en dark */
html[data-theme="dark"] body.theme-blue-ink .w3-container.w3-blue{
  background: var(--ink-header) !important;
  color:#fff !important;
  border-bottom:none;
  box-shadow: 0 2px 18px rgba(0,0,0,.35);
}
html[data-theme="dark"] body.theme-blue-ink .w3-container.w3-blue h1{
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 1px rgba(0,0,0,.15);
}

/* Navbar en dark */
html[data-theme="dark"] body.theme-blue-ink .w3-navbar{
  background: var(--bg-0);
  border-bottom: 2px solid var(--ink-accent);
}
html[data-theme="dark"] body.theme-blue-ink .w3-navbar a{
  color: var(--text);
}
html[data-theme="dark"] body.theme-blue-ink .w3-navbar a:hover{
  background: var(--ink-hover);
}
html[data-theme="dark"] body.theme-blue-ink .w3-navbar a.active,
html[data-theme="dark"] body.theme-blue-ink .w3-navbar a[aria-current="page"]{
  position: relative;
  color: var(--ink-accent);
  font-weight: 700;
  background: transparent;
  border-bottom: none;
}
html[data-theme="dark"] body.theme-blue-ink .w3-navbar a.active::after,
html[data-theme="dark"] body.theme-blue-ink .w3-navbar a[aria-current="page"]::after{
  content:""; position:absolute; left:16px; right:16px; bottom:-2px;
  height:3px; background: var(--ink-accent); border-radius:3px;
}