/* =========================
   /assets/css/info.css
   Tab/portal: INFO (público)
   ========================= */

html.theme-info,
body.theme-info{
  min-height: 100%;
  background: var(--menu-fg) !important;
  background-color: var(--menu-fg) !important;
  color: #fff;
}

body.theme-info .madonna-logo-wrap{ color:#fff; }
body.theme-info .tabs{ color:#fff; }
body.theme-info .tab-btn{ border-color: rgba(255,255,255,.7); }
body.theme-info .tab-btn[aria-selected="true"]{ background: rgba(255,255,255,.18); }

body.theme-info .info-shell{
  max-width:none;
  width:100%;
  min-height:100vh;
  margin:0;
}

/* Links y muted en Info */
body.theme-info #panelInfo a{ color:#fff; }
body.theme-info #panelInfo .muted{
  color: rgba(255,255,255,.75);
  opacity: 1;
}
body.theme-info #panelInfo .info-card{ border-color: rgba(255,255,255,.35); }
body.theme-info #panelInfo svg path{ fill:#fff; }

/* Layout de Info (antes inline en index.html) */
.info-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
}
@media (max-width: 900px){
  .info-grid{ grid-template-columns: 1fr; }
}

.info-card{
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  padding: 14px;
}
.info-card h3{
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 900;
}
.info-card p,
.info-card li{
  margin: 0 0 8px 0;
  opacity: .9;
  line-height: 1.45;
}
.info-list{
  padding-left: 18px;
  margin: 0;
}
.map-embed{
  width: 100%;
  min-height: 320px;
  border: 0;
  border-radius: 18px;
}

/* En móvil, igualar márgenes laterales (por si se desajustan) */
@media (max-width: 720px){
  body.theme-info .tabs,
  body.theme-info .tab-panel{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}