/* Base: elementos HTML y pantallas de acceso. */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
:root { accent-color: var(--cg-primary); color-scheme: light dark; -webkit-text-size-adjust: 100%; }
:root[data-theme="light"] { color-scheme: light; }
body { margin: 0; font: 400 var(--text-base)/1.5 var(--cg-font); background: var(--cg-bg); color: var(--cg-fg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--cg-font); line-height: 1.2; text-wrap: balance; margin: 0; }
h1 { font-size: var(--text-xl); font-weight: 700; }
h2 { font-size: var(--text-lg); font-weight: 700; }
h3 { font-size: var(--text-base); font-weight: 700; }
p { margin: 0; }
a { color: var(--cg-primary); text-underline-offset: 3px; }
a:hover { color: var(--cg-primary-hover); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--cg-focus); outline-offset: 2px; border-radius: 2px; }

/* Controles */
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 1px solid var(--cg-border); border-radius: var(--radius-control); background: var(--cg-surface); color: var(--cg-fg);
}
textarea { min-height: 88px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--cg-muted); }
input[type="checkbox"], input[type="radio"] { width: 20px; min-height: 20px; height: 20px; margin: 0; flex: none; }
input[readonly] { background: var(--cg-surface-2); color: var(--cg-muted); }
button, a.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-control);
  background: var(--cg-primary); color: var(--cg-on-primary); font-weight: 600; text-decoration: none; cursor: pointer;
  touch-action: manipulation; transition: background-color .15s var(--ease), border-color .15s var(--ease);
}
button:hover, a.button:hover { background: var(--cg-primary-hover); color: var(--cg-on-primary); }
button:disabled { opacity: .55; cursor: not-allowed; }
button[aria-busy="true"] { cursor: progress; }
button.secondary, a.button.secondary { background: var(--cg-surface); color: var(--cg-fg); border-color: var(--cg-border); }
button.secondary:hover, a.button.secondary:hover { background: var(--cg-surface-2); color: var(--cg-fg); }
button.danger { background: var(--cg-danger); color: #fff; }
button.danger:hover { filter: brightness(.92); background: var(--cg-danger); }
button.link { min-height: 0; padding: var(--space-1) 0; background: none; color: var(--cg-primary); font-weight: 600; justify-content: flex-start; }
button.link:hover { background: none; text-decoration: underline; }
button.small, a.button.small { min-height: 36px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }

.form-error { color: var(--cg-danger); font-weight: 600; }

/* Pantallas de acceso (login, recuperar, invitación) */
.auth-shell { max-width: 420px; margin: 0 auto; padding: var(--space-8) var(--space-4); }
.auth-shell .brand { margin: 0 0 var(--space-7); }
.auth-shell .brand img { display: block; width: 220px; height: auto; }
.auth-shell form, .auth-shell .cg-form { display: grid; gap: var(--space-4); }
.auth-shell h2 { font-size: var(--text-xl); }
.auth-shell label { display: grid; gap: var(--space-1); font-weight: 600; }
.auth-shell ul { margin: 0; padding-left: var(--space-5); }

/* Simulador (sólo local) */
.cg-mock-badge { position: fixed; bottom: var(--space-2); left: var(--space-2); z-index: 3000; background: var(--cg-amber-400); color: #1b1f1c;
  font: 600 12px/1.2 var(--cg-font); padding: 6px 10px; border-radius: var(--radius-pill); pointer-events: none; }
.cg-consent { position: fixed; inset: auto var(--space-4) var(--space-4) var(--space-4); max-width: 560px; margin: 0 auto; padding: var(--space-4);
  background: var(--cg-surface); color: var(--cg-fg); border: 1px solid var(--cg-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-sheet);
  display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; z-index: 4500; }
.cg-consent p { flex-basis: 100%; margin-bottom: var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
.auth-shell > p.muted { margin-bottom: var(--space-5); }