/* ============================================================
   public/css/descargas.css — Página /descargas/ (Ronda 36)
   Usa las variables de estilos-base.css.
   ============================================================ */

.descargas {
  padding-block: var(--space-10) var(--space-16);
}

.descargas-aviso {
  background: var(--color-secondary-bg);
  border: 1px solid var(--color-secondary-light);
  color: var(--color-text);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}

/* ── Cabecera ─────────────────────────────────────────────── */
.descargas-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-12);
  align-items: start;
  margin-bottom: var(--space-12);
}

/* Ronda 37: los hijos del grid pueden encogerse. Sin esto, Firefox (móvil)
   ensanchaba la columna hasta el ancho del botón «Descargar para Android»
   (white-space: nowrap heredado de .btn) y la cabecera se salía por la derecha. */
.descargas-hero > * {
  min-width: 0;
}

.descargas-hero__icono {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-5);
}

.descargas-hero__titulo {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  line-height: 1.1;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.descargas-hero__lead {
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-soft);
  max-width: 58ch;
  margin-bottom: var(--space-5);
}

.descargas-datos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-8);
}

.descargas-datos li {
  font-size: var(--text-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  color: var(--color-text);
}

.descargas-hero__captura {
  margin: 0;
}

.descargas-hero__captura img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 28px;
  border: 8px solid #2D2D2D;
  box-shadow: var(--shadow-lg);
  background: #2D2D2D;
}

/* ── Bloques por dispositivo ──────────────────────────────── */
.descargas-plataforma {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* Con JS solo se ve el bloque del dispositivo; sin JS, todos. */
.descargas-plataforma[hidden] { display: none; }

.descargas-plataforma__titulo {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin-bottom: var(--space-3);
}

.descargas-plataforma p:last-child { margin-bottom: 0; }

.descargas-btn {
  width: 100%;
  max-width: 360px;
}

.descargas-nota {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  margin-top: var(--space-3);
}

.descargas-nota code {
  font-size: 0.95em;
  word-break: break-all;
}

.descargas-qr {
  display: flex;
  gap: var(--space-6);
  align-items: center;
}

.descargas-qr__img {
  flex: 0 0 168px;
  width: 168px;
  height: 168px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: #fff;
}

.descargas-cambiar {
  font-size: var(--text-sm);
  color: var(--color-text-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.descargas-cambiar button {
  font: inherit;
  color: var(--color-primary-dark);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

.descargas-cambiar button:hover { background: var(--color-primary-bg); }
.descargas-cambiar button[hidden] { display: none; }

/* ── Secciones de texto ───────────────────────────────────── */
.descargas-seccion {
  max-width: 760px;
  margin-bottom: var(--space-10);
}

.descargas-seccion h2 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: 1.25;
  margin-bottom: var(--space-4);
}

.descargas-lista,
.descargas-pasos {
  padding-left: var(--space-6);
  line-height: 1.7;
}

.descargas-lista { list-style: disc; }
.descargas-pasos { list-style: decimal; }
.descargas-lista li,
.descargas-pasos li { margin-bottom: var(--space-2); padding-left: var(--space-1); }
.descargas-pasos li::marker { color: var(--color-primary-dark); font-weight: 600; }

.descargas-lista--check {
  list-style: none;
  padding-left: 0;
}

.descargas-lista--check li {
  position: relative;
  padding-left: var(--space-8);
}

.descargas-lista--check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E8262' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.descargas-pasos--compacto { margin-bottom: var(--space-5); }

.descargas-detalles summary {
  cursor: pointer;
  list-style: none;
}

.descargas-detalles summary::-webkit-details-marker { display: none; }

.descargas-detalles summary h2 {
  display: inline;
  font-size: var(--text-xl);
}

.descargas-detalles summary::after {
  content: " +";
  color: var(--color-primary-dark);
  font-weight: 600;
}

.descargas-detalles[open] summary::after { content: " −"; }
.descargas-detalles[open] summary { margin-bottom: var(--space-4); }

.descargas-huella code,
.descargas-codigo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-sm);
  word-break: break-all;
}

.descargas-huella code {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.descargas-codigo {
  white-space: pre-wrap;   /* Ronda 37: el comando largo desbordaba en móvil */
  word-break: break-all;
  max-width: 100%;
  background: #2D2D2D;
  color: #F7F4EF;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  overflow-x: auto;
}

.descargas-tabla-wrap { overflow-x: auto; }

.descargas-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.descargas-tabla th,
.descargas-tabla td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

/* ── Móvil ────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .descargas { padding-top: var(--space-6); }
  .descargas-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
  .descargas-hero__titulo { font-size: var(--text-2xl); }   /* igual que .seccion-header__titulo en móvil */
  .descargas-hero__lead { font-size: var(--text-base); }
  .descargas-seccion h2 { font-size: var(--text-xl); }
  .descargas-hero__captura { max-width: 240px; margin-inline: auto; }
  .descargas-qr { flex-direction: column; align-items: flex-start; }
  .descargas-btn { max-width: none; white-space: normal; text-align: center; line-height: 1.3; padding-inline: var(--space-5); font-size: var(--text-base); }
  .descargas-plataforma { padding: var(--space-5); }
}