/* ╔══════════════════════════════════════════════════════════╗
   ║  Componentes del Design System — versión CSS pura          ║
   ╚══════════════════════════════════════════════════════════╝
   Extraídos VERBATIM de _ds_bundle.js (export de Claude Design del 24/8/2026).
   Los componentes originales son React y se auto-inyectan el CSS; aquí sólo
   vive el CSS, y js/dc-lite.js construye el marcado equivalente.

   Si el Design System cambia, se vuelven a copiar estos bloques tal cual.
   NO retocar a mano: se pierde la fidelidad con la app. */

/* ─────────── Button (components/buttons/Button.jsx) ─────────── */
.da-btn{
  --_press: var(--da-accent-shadow);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-body); font-weight:var(--fw-bold);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  border-radius:var(--radius-sm); white-space:nowrap;
  transition:transform .1s var(--ease), filter var(--dur-fast), box-shadow .1s var(--ease), background var(--dur-fast);
}
.da-btn:disabled,.da-btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; pointer-events:none}
.da-btn:focus-visible{outline:2px solid var(--da-accent); outline-offset:2px}
/* tamaños */
.da-btn--sm{font-size:var(--text-xs); padding:8px 14px; letter-spacing:.02em}
.da-btn--md{font-size:var(--text-sm); padding:11px 20px; letter-spacing:.03em}
.da-btn--lg{font-size:var(--text-md); padding:14px 26px; letter-spacing:.03em}
.da-btn--full{width:100%}
/* variantes planas */
.da-btn--secondary{background:var(--da-paper-2); color:var(--da-ink); border-color:var(--da-border)}
.da-btn--secondary:hover{filter:brightness(.96)}
.da-btn--ghost{background:transparent; color:var(--da-gray); border-color:var(--da-border)}
.da-btn--ghost:hover{background:var(--da-paper); color:var(--da-ink)}
.da-btn--dark{background:var(--da-ink); color:#fff}
.da-btn--dark:hover{filter:brightness(.88)}
/* variantes de color */
.da-btn--accent{background:var(--da-accent); color:var(--da-accent-ink); --_press:var(--da-accent-shadow)}
.da-btn--member{background:var(--da-member); color:#fff; --_press:rgba(180,0,170,.30)}
.da-btn--wa{background:var(--da-wa); color:#fff; text-transform:uppercase; --_press:rgba(20,140,60,.30)}
.da-btn--accent:hover,.da-btn--member:hover,.da-btn--wa:hover{filter:brightness(.95)}
/* chunky: sombra inferior sólida que se hunde al pulsar */
.da-btn.is-chunky{box-shadow:0 4px 0 var(--_press)}
.da-btn.is-chunky:hover{transform:translateY(-1px); box-shadow:0 6px 0 var(--_press)}
.da-btn.is-chunky:active{transform:translateY(2px); box-shadow:0 1px 0 var(--_press)}
.da-btn:not(.is-chunky):active{transform:scale(.97)}
/* cartel de madera (signpost RPG) */
.da-btn--wood{
  background:linear-gradient(180deg,var(--da-sign-1),var(--da-sign-2));
  color:var(--da-ink-warm); border:var(--border-rpg) solid var(--da-ink-warm);
  text-transform:uppercase; border-radius:10px; font-size:var(--text-md);
  padding:14px 22px; box-shadow:0 5px 0 var(--da-ink-warm), 0 12px 18px rgba(47,36,24,.14);
}
.da-btn--wood.is-active{background:linear-gradient(180deg,var(--da-accent-deep),var(--da-accent))}
.da-btn--wood:hover{transform:translateY(-1px)}
.da-btn--wood:active{transform:translateY(2px); box-shadow:0 3px 0 var(--da-ink-warm), 0 8px 12px rgba(47,36,24,.12)}
.da-btn__icon{display:inline-flex; align-items:center; line-height:0; font-size:1.1em}
.da-btn--wa .da-btn__icon{font-size:1.25em; margin-right:1px}
@media (prefers-reduced-motion: reduce){ .da-btn{transition:none} }

/* ─────────── Field (components/forms/Field.jsx) ─────────── */
.da-field{margin-bottom:14px; font-family:var(--font-body)}
.da-field:last-child{margin-bottom:0}
.da-field__label{display:block; font-size:var(--text-xs); font-weight:var(--fw-bold); letter-spacing:.03em; color:var(--da-ink); margin-bottom:5px}
.da-field__req{color:#e53935; margin-left:2px}
.da-field__control{
  width:100%; padding:10px 12px; border-radius:var(--radius-sm);
  border:var(--border-width-strong) solid #ddd; background:#fafafa; color:var(--da-ink);
  font-family:var(--font-body); font-size:var(--text-sm); outline:none;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.da-field__control::placeholder{color:var(--da-gray)}
.da-field__control:focus{border-color:var(--da-accent); box-shadow:0 0 0 3px var(--focus-ring)}
textarea.da-field__control{resize:vertical; min-height:74px; line-height:1.5}
select.da-field__control{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath fill='%239d9d9d' d='M5 7L0 0h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:30px;
}
.da-field--error .da-field__control{border-color:#e53935; box-shadow:0 0 0 3px rgba(229,57,53,.12)}
.da-field__hint{font-size:10px; color:var(--da-gray); margin-top:4px; line-height:1.4}
.da-field--error .da-field__hint{color:#e53935}

/* ─────────── Card (components/cards/Card.jsx) ─────────── */
.da-card{
  position:relative; background:var(--da-paper);
  border:1px solid var(--da-border); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.da-card--flat{box-shadow:none}
.da-card--sunken{background:var(--da-surface); box-shadow:none}
.da-card--pad-sm{padding:14px}
.da-card--pad-md{padding:20px}
.da-card--pad-lg{padding:24px 26px}
.da-card--hover{transition:transform .2s var(--ease), box-shadow .2s var(--ease)}
.da-card--hover:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover)}
.da-card__bar{position:absolute; top:0; left:0; right:0; height:3px}
.da-card__bar--member{background:var(--da-member)}
.da-card__bar--grumete{background:var(--da-grumete)}
.da-card__bar--partner{background:var(--da-partner)}
.da-card__bar--pendiente{background:#ccc}
.da-card__bar--accent{background:var(--da-accent)}
.da-card__bar--ink{background:var(--da-ink-warm)}

/* ─────────── SectionLabel (components/rpg/SectionLabel.jsx) ─────────── */
.da-seclabel{
  display:flex; align-items:center; gap:14px;
  font-family:var(--font-body); font-size:var(--text-xs); font-weight:var(--fw-bold);
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--da-gray);
}
.da-seclabel::after{content:''; flex:1; height:1px; background:var(--da-border)}
.da-seclabel--on-dark{color:rgba(255,255,255,.3)}
.da-seclabel--on-dark::after{background:rgba(255,255,255,.1)}
.da-seclabel--accent{color:var(--da-accent)}
.da-seclabel--accent::after{background:var(--accent-tint)}
.da-seclabel__num{color:var(--da-ink); font-variant-numeric:tabular-nums}
.da-seclabel--on-dark .da-seclabel__num{color:#fff}
.da-seclabel--bare::after{display:none}

/* ─────────── el botón largo en un móvil estrecho ───────────
   Añadido el 30/8/2026 tras verlo en un iPhone SE de 320 px.

   `.da-btn` lleva `white-space: nowrap` del Design System, así que su ancho
   mínimo es el de su texto de una sola línea. Y como un elemento flex no
   encoge por debajo de su contenido salvo que se le diga, "📅 apúntatelo en el
   calendario" (253 px) empujaba la tarjeta negra de la estación final 23 px
   fuera de la pantalla, con barra horizontal en toda la página incluida.

   Por debajo de 380 px se le deja partir en dos líneas. Es más feo que un
   botón de una línea, y muchísimo menos feo que una web que se mueve de lado. */
@media (max-width: 380px) {
	.da-btn {
		white-space: normal;
		line-height: 1.15;
	}
}