/* Design tokens ported from the client's approved mockup (modelo.html). */
@import url('../fonts/space-grotesk/font.css');
@import url('../fonts/jetbrains-mono/font.css');

:root {
  --bg: #0B0E11;
  --s1: #12161C;
  --s2: #171D25;
  --s3: #1E2530;
  --bd: rgba(255, 255, 255, .07);
  --bd2: rgba(255, 255, 255, .13);
  --tx: #E9EDF1;
  --tm: #98A2AE;
  --tl: #5C6672;
  --gr: #2FC77E;
  --grd: #1C7B4D;
  --grb: rgba(47, 199, 126, .13);
  --rd: #EC5B62;
  --rdb: rgba(236, 91, 98, .12);
  --font-ui: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

html { scroll-behavior: smooth; }

input, button, select, textarea { font-family: inherit; }
input:focus, textarea:focus, select:focus { outline: none; }
button { cursor: pointer; }
a { color: inherit; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #232B36; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #2E3846; }

.mono { font-family: var(--font-mono); }
.text-gr { color: var(--gr); }
.text-rd { color: var(--rd); }
.text-tm { color: var(--tm); }
.text-tl { color: var(--tl); }

.btn {
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14.5px;
  padding: 12px 20px;
  cursor: pointer;
}
.btn-primary { background: var(--gr); color: #04140B; box-shadow: 0 8px 22px var(--grb); }
.btn-secondary { background: var(--s2); color: var(--tx); border: 1px solid var(--bd2); }
.btn-ghost { background: none; color: var(--tx); }
.btn-danger { background: var(--rdb); color: var(--rd); border: 1px solid var(--rd); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.card {
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 14px;
  padding: 18px;
}

.field-label { font-size: 13px; color: var(--tm); display: block; margin-bottom: 7px; }
.field-input {
  width: 100%;
  background: var(--s1);
  border: 1px solid var(--bd);
  border-radius: 9px;
  color: var(--tx);
  padding: 13px 14px;
  font-size: 14.5px;
}
.field-error { color: var(--rd); font-size: 12.5px; margin-top: 6px; }

.badge { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }
.badge-gr { color: var(--gr); background: var(--grb); }
.badge-rd { color: var(--rd); background: var(--rdb); }

@keyframes pls { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes fu { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes glow { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }

/* ---- Auth split-screen (login/register/forgot/reset) ---- */
/* Desktop layout is set via inline style="flex:1;..." on .auth-branding/.auth-form-panel,
   so overrides here need !important to win over the inline styles at narrow widths. */
@media (max-width: 760px) {
  .auth-shell { flex-direction: column !important; min-height: auto !important; }
  .auth-branding {
    flex: none !important;
    padding: 28px 24px !important;
    border-right: none !important;
    border-bottom: 1px solid var(--bd);
    gap: 20px;
  }
  .auth-branding h2 { font-size: 28px !important; }
  .auth-form-panel { flex: none !important; padding: 28px 20px !important; }
}

/* ---- Global small-screen safety nets ---- */
@media (max-width: 480px) {
  body { overflow-x: hidden; }
}