/* === Enhancements CSS (conservador y sobrio) === */
:root{
  --accent:#0f766e; /* teal oscuro */
  --bg:#0b0f14;
  --bg-soft:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --card:#0f172a;
  --border:#1f2937;
}

html{scroll-behavior:smooth}
body.enhanced{
  background-color: var(--bg);
  color: var(--text);
}

.enhanced a{ color: #93c5fd; }
.enhanced .container{ max-width: 1200px; margin: 0 auto; padding: 1rem; }

/* Header util */
.enhanced .util-bar{
  position: sticky; top:0; z-index: 9999;
  background: rgba(15,23,42,.8); backdrop-filter: blur(6px);
  padding:.5rem 1rem; border-bottom:1px solid var(--border);
  display:flex; gap:.5rem; align-items:center; justify-content:space-between;
}
.util-actions{ display:flex; gap:.5rem; align-items:center; }

.util-btn{
  border:1px solid var(--border); background: var(--card);
  padding:.35rem .7rem; border-radius:.5rem; cursor:pointer;
  font-size:.9rem; color:var(--text);
}
.util-btn:hover{ background: #0b1324; }

/* Dark mode toggle icon */
#darkToggle::before{ content: "🌙"; margin-right:.4rem; }
body.dark #darkToggle::before{ content: "☀️"; }

/* Scroll to top */
#toTop{
  position: fixed; right: 1rem; bottom: 1rem; display:none;
  border:1px solid var(--border); background: var(--card);
  padding:.5rem .7rem; border-radius:.5rem; cursor:pointer; color:var(--text);
}
#toTop.show{ display:block; }

/* Accordion */
.accordion{ border:1px solid var(--border); border-radius:.75rem; overflow:hidden; }
.accordion details{ border-top:1px solid var(--border); background:var(--card); }
.accordion summary{ list-style:none; cursor:pointer; padding:1rem; font-weight:600; }
.accordion summary::-webkit-details-marker{ display:none; }
.accordion .content{ padding: 0 1rem 1rem; color: var(--muted); }

/* Tabs */
.tabs{ border:1px solid var(--border); border-radius:.75rem; overflow:hidden; }
.tabs .tab-headers{ display:flex; flex-wrap:wrap; border-bottom:1px solid var(--border); }
.tabs .tab-headers button{
  flex:1; padding:.75rem; background:var(--card); color:var(--muted); border:none; cursor:pointer;
}
.tabs .tab-headers button.active{ color:var(--text); border-bottom:2px solid var(--accent); }
.tabs .tab-content{ padding:1rem; background:var(--bg-soft); display:none; }
.tabs .tab-content.active{ display:block; }

/* Carousel */
.carousel{ position:relative; overflow:hidden; border-radius:.75rem; border:1px solid var(--border); }
.carousel-track{ display:flex; transition: transform .5s ease; }
.carousel .slide{ min-width:100%; height: 360px; background:#0b1324; display:grid; place-items:center; }
.carousel .control{
  position:absolute; top:50%; transform:translateY(-50%); padding:.5rem .6rem; border:none;
  background:rgba(0,0,0,.4); color:#fff; cursor:pointer;
}
.carousel .prev{ left:.5rem; } .carousel .next{ right:.5rem; }

/* Parallax */
.parallax{
  min-height: 320px;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  display:grid; place-items:center;
}
.parallax h2{ background: rgba(0,0,0,.45); padding: .5rem .75rem; border-radius:.5rem; }

/* Lightbox */
.lightbox-backdrop{
  position:fixed; inset:0; background: rgba(0,0,0,.75); display:none;
  align-items:center; justify-content:center; z-index:9998;
}
.lightbox-backdrop img{ max-width:92vw; max-height:92vh; border-radius:.5rem; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.lightbox-backdrop.show{ display:flex; }

/* Tooltips (title attr) */
[title]{ position:relative; }
[title]:hover::after{
  content: attr(title);
  position:absolute; bottom: calc(100% + .35rem); left: 0;
  background: #000; color:#fff; padding:.25rem .5rem; border-radius:.3rem; font-size:.8rem; white-space:nowrap;
}

/* Language visibility (scaffolding) */
[data-lang]{ display: none; }
:root[data-ui-lang="es"] [data-lang="es"]{ display:inline; }
:root[data-ui-lang="en"] [data-lang="en"]{ display:inline; }

/* Cards */
.card{
  background: var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1rem;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}