/* Modern layer for legacy pages (keeps original layout intact) */
:root{
  --nav-bg:#1f2937;
  --nav-fg:#ffffff;
  --nav-accent:#22c55e;
  --card-bg:#ffffff;
  --shadow:0 6px 18px rgba(0,0,0,.15);
  --radius:14px;
  --maxw:980px;
  --font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

body{ font-family: var(--font); }

/* NAV */
.site-nav{
  background: var(--nav-bg);
  color: var(--nav-fg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: .5rem .75rem;
  margin: .5rem auto 1rem;
  max-width: var(--maxw);
}

.site-nav .nav-toggle{
  display:none;
  background:transparent;
  color:var(--nav-fg);
  border:1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  padding: .5rem .75rem;
  font-size: 14px;
  cursor:pointer;
}

.site-nav .nav-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.25rem .5rem;
  align-items:center;
}

.site-nav .nav-links a{
  display:inline-block;
  color:var(--nav-fg);
  text-decoration:none;
  padding:.45rem .6rem;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1;
}

.site-nav .nav-links a:hover,
.site-nav .nav-links a:focus{
  background: rgba(255,255,255,.12);
  outline: none;
}

.site-nav .nav-links a[aria-current="page"]{
  background: rgba(34,197,94,.22);
  border: 1px solid rgba(34,197,94,.55);
}

/* HERO (index) */
.site-hero{
  max-width: var(--maxw);
  margin: .5rem auto 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, rgba(34,197,94,.22), rgba(59,130,246,.18));
  color:#0b1220;
  overflow:hidden;
}
.hero-inner{
  padding: 1.25rem 1.25rem 1rem;
}
.hero-title{
  font-size: 28px;
  font-weight: 800;
  letter-spacing: .4px;
}
.hero-subtitle{
  margin-top: .35rem;
  font-size: 14px;
  opacity: .9;
}

/* MAP */
.map-section{
  max-width: var(--maxw);
  margin: 0.75rem auto 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--card-bg);
  padding: .75rem;
}
.map{
  width:100%;
  height: 420px;
  border-radius: 12px;
  overflow:hidden;
}

/* Responsive */
@media (max-width: 760px){
  .site-nav{ margin-left: .5rem; margin-right: .5rem; }
  .site-hero{ margin-left: .5rem; margin-right: .5rem; }
  .map-section{ margin-left: .5rem; margin-right: .5rem; }
  .site-nav .nav-toggle{ display:inline-block; }
  .site-nav .nav-links{
    display:none;
    margin-top:.5rem;
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
  }
  .site-nav[data-open="true"] .nav-links{ display:flex; }
  .site-nav .nav-links a{ padding:.6rem .7rem; }
  .map{ height: 340px; }
}

/* Apariciones card (index) */
.apparitions-card{
  width: 100%;
  max-width: 360px;
  text-align: left;
  border-radius: 18px;
  padding: 14px 14px 12px;
  background: linear-gradient(180deg, rgba(15,23,42,.85), rgba(15,23,42,.78));
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.apparitions-title{
  font-weight: 800;
  letter-spacing: .6px;
  font-size: 28px;
  line-height: 1.05;
  margin: 2px 2px 10px;
}
.app-link{
  display: block;
  text-decoration: none;
  border-radius: 14px;
  padding: 10px 12px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.app-link:hover, .app-link:focus{
  background: rgba(255,255,255,.10);
  border-color: rgba(34,197,94,.55);
  transform: translateY(-1px);
  outline: none;
}
.app-primary{
  margin-bottom: 10px;
}
.app-label{
  display:block;
  font-weight: 650;
  line-height: 1.25;
  font-size: 14px;
}
.app-date{
  display:block;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.78);
}
.app-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px){
  .apparitions-card{ max-width: 420px; }
  .app-grid{ grid-template-columns: 1fr 1fr; }
}


/* Force vertical sidebar navigation on legacy pages (match galeria.html look) */
body.nav-vertical .site-nav{
  max-width: 180px;
  margin: .75rem .5rem 1rem .5rem;
  padding: .6rem .6rem;
}
body.nav-vertical .site-nav .nav-toggle{ display:none !important; }
body.nav-vertical .site-nav .nav-links{
  display:flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: .35rem;
  margin-top: .25rem;
}
body.nav-vertical .site-nav .nav-links a{
  display:block;
  width:100%;
  text-align:left;
}