/* docs/assets/css/style.css */

/* --- 1. Global Reset & Body --- */
* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #1a1a2e; 
  color: #e4e4e4;
  min-height: 100vh;
  padding: 40px 20px;
  line-height: 1.6;
}

/* --- 2. Main Layout Container --- */
.container {
  max-width: 1100px; /* Caja más ancha */
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 40px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* The tools rail and the info rail are `position: fixed` and float over the
   margin either side of this box. That margin is (viewport - 1100) / 2, so
   below about 1700 it is thinner than the rails and they end up on top of the
   content -- which is what browser zoom does: a maximised 1920 window at 150%
   is a 1270px viewport.

   So the box gives way instead. 240px each side clears the collapsed 80px
   tools rail and the 210px info rail at its 24px offset, and the rails stay on
   screen instead of being hidden. `%` rather than `vw` on purpose: vw includes
   the scrollbar and would overflow by its width.

   Below 1100 the header collapses to its mobile layout and both rails hide
   themselves, so the box goes back to using the full width. */
/* Each rail publishes what it currently occupies -- already multiplied by
   --rail-k -- and the box keeps the larger of the two clear on both sides,
   since it is centred and cannot give unevenly.

   Declared rather than assumed, because the amount depends on whether each
   rail is collapsed, which is a runtime state: a fixed reservation either
   wastes space when they are collapsed or lets the expanded one overlap. The
   fallbacks are what an expanded pair needs at full scale, so the layout is
   still right if the scripts never run. */
/* 40px of padding a side is 80 of a 375px phone -- a fifth of the screen
   spent on the frame, which is what squeezed the calculators until their
   grids overflowed. The rounded card also stops earning its corners when it
   is nearly the width of the screen, so it flattens instead. */
@media (max-width: 576px) {
  .container {
    padding: 20px 14px;
    border-radius: 12px;
    padding-top: 20px !important;   /* beats the header-bar.css !important */
  }
}

@media (min-width: 821px) and (max-width: 1699px) {
  .container {
    max-width: calc(100% - 2 * max(var(--tools-reserve, 280px),
                                   var(--info-reserve, 234px)));
  }
}

/* --- 3. Typography --- */
h1 {
  text-align: center;
  font-size: 2.5em;
  margin: 10px 0 10px 0;
  background: linear-gradient(90deg, #00d4ff, #7b2cbf);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  text-align: center;
  color: #888;
  font-size: 1.1em;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

h2 {
  font-size: 1.6em;
  margin: 30px 0 15px 0;
  padding-bottom: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
}

h3 {
  font-size: 1.2em;
  margin: 18px 0 10px 0;
  color: #00d4ff;
}

p { 
  margin-bottom: 15px; 
  color: #c4c4c4; 
}

/* --- 4. Navigation --- */
.nav {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0 30px 0;
}

.nav a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(91, 45, 132, 0.65);
  border: 1px solid rgba(160, 120, 220, 0.35);
  padding: 11px 18px;
  border-radius: 16px;
  transition: transform .08s ease, background .08s ease;
  font-weight: 600;
}

.nav a:hover { 
  transform: translateY(-1px); 
  background: rgba(109, 58, 160, 0.70); 
}

/* --- 5. Logos & Media --- */
.logo-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 12px 0;
}

.logo {
  width: 120px; /* Logo más pequeño */
  max-width: 60vw;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* --- 6. Content Modules & Boxes --- */
ul { 
  margin: 12px 0 12px 25px; 
}

li { 
  margin-bottom: 8px; 
  color: #c4c4c4; 
}

code {
  background: rgba(0, 212, 255, 0.15);
  color: #00d4ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.95em;
  font-weight: 700;
}

.feature-box {
  background: rgba(0, 212, 255, 0.08);
  border-left: 4px solid #00d4ff;
  padding: 20px 25px;
  border-radius: 0 10px 10px 0;
  margin: 15px 0;
}

.feature-box.green {
  background: rgba(0, 255, 136, 0.08);
  border-left-color: #00ff88;
}

.note-box {
  background: rgba(255, 215, 0, 0.10);
  border: 1px solid rgba(255, 215, 0, 0.30);
  padding: 18px 20px;
  border-radius: 10px;
  margin: 18px 0;
}

.note-box p { 
  color: #ffd700; 
  margin: 0; 
}

.discord-card {
  background: rgba(123, 44, 191, 0.12);
  border: 1px solid rgba(123, 44, 191, 0.25);
  padding: 18px 20px;
  border-radius: 12px;
  margin-top: 12px;
}

.discord-badge-wrap {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}

.discord-badge-wrap img {
  display: block;
  height: 44px;
  max-width: 100%;
}

/* --- 7. Footer --- */
.footer {
  text-align: center;
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer p { 
  color: #a0a0c0; 
  font-size: 0.95em; 
  margin: 6px 0; 
}

.footer a,
.footer-link {
  color: #ffd700;
  text-decoration: none;
  transition: all 0.3s ease;
}

.footer a:hover,
.footer-link:hover {
  color: #ffed4e;
  text-decoration: underline;
}