/* Componentes comunes, tal como en la maqueta VSPEC_0001 v44 (base, formulario, botones, avisos, "Entrando…"). */
* { box-sizing: border-box; }
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); font: 17px/1.4 var(--font); -webkit-font-smoothing: antialiased;
  padding-inline: 16px; padding-block: 0 48px; }
.app { max-width: 1040px; margin: 0 auto; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--display); }
a, button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }

/* Barra: translúcida y pegajosa, como las de iOS/tvOS */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; display: flex; align-items: center; gap: 16px;
  padding-block: 12px; margin-inline: -16px; padding-inline: 16px;
  background: rgba(0, 0, 0, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1 var(--display); letter-spacing: -.01em; text-decoration: none; }
.brand__mark { width: 22px; height: 22px; border-radius: 50%;
  background: conic-gradient(var(--credit) 0 33%, var(--due) 0 66%, var(--study) 0); mask: radial-gradient(circle, transparent 5px, #000 6px);
  -webkit-mask: radial-gradient(circle, transparent 5px, #000 6px); }
.brand__mark--lg { width: 64px; height: 64px; mask: radial-gradient(circle, transparent 18px, #000 19px); -webkit-mask: radial-gradient(circle, transparent 18px, #000 19px); }
.largetitle { font: 700 34px/1.1 var(--display); letter-spacing: -.02em; }

.alert { border-radius: var(--r-md); padding: 14px 16px; font-size: 15px; }
.alert--warn { background: rgba(255, 159, 10, .14); color: var(--due); }
.panel { background: var(--surface); border: 0; border-radius: var(--r-md); padding: 18px; display: grid; gap: 12px; min-width: 0; }
.panel h2 { font: 700 20px/1.2 var(--display); }

.form { display: grid; gap: 6px; max-width: 460px; min-width: 0; }
.form label { font-size: 13px; color: var(--muted); margin-top: 8px; }
.form label:has(> input[type="checkbox"]) { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; color: var(--ink); }
.form > * { min-width: 0; }
.form input:not([type="checkbox"]), .form select { background: var(--surface-2); border: 0; border-radius: var(--r-sm); padding: 12px 14px; min-height: 44px; color: var(--ink); }
.form input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); }
.field-error { color: var(--danger); font-size: 13px; }
.btn { margin-top: 12px; background: var(--accent); color: #fff; border: 0; border-radius: 12px; padding: 12px 20px; min-height: 44px; font-weight: 600; cursor: pointer; justify-self: start; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn--ghost { background: var(--surface-2); color: var(--accent); margin-top: 0; padding: 8px 16px; }
.btn--danger { background: var(--danger); color: #fff; }
.btn--block { justify-self: stretch; }
.confirm__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.confirm__actions .btn { margin-top: 0; }

.login { max-width: 400px; margin: 48px auto; display: grid; justify-items: center; gap: 16px; }
.login .form { width: 100%; }
.login > .alert { width: 100%; }

/* SPEC_0001 RF3.7 (v43): solo se bloquea el formulario o botón que escribe; el indicador sale a los 300 ms. */
[aria-busy="true"] { cursor: progress; }
[aria-busy="true"] input:disabled, [aria-busy="true"] select:disabled { opacity: .55; }
.spin { display: none; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.is-slow .spin { display: inline-block; }
[aria-busy="true"] .btn:disabled { opacity: .7; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Borrado recordado tras un 401 (SPEC_0002 U27, v44) */
.recall { display: grid; gap: 12px; }
.recall .alert { margin: 0; }

/* Portada provisional y pantalla de prueba (P50, P22) */
.page { max-width: 460px; margin: 48px auto; display: grid; gap: 16px; }

@media (max-width: 480px) {
  .largetitle { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::after { transition: none !important; animation: none !important; }
  .spin { border-right-color: currentColor; opacity: .6; }
}