/* =============================================================================
   Falha Zero — Design System
   Versão 1.0 | Dark-first | Mobile-first | sem dependências
   =============================================================================

   ÍNDICE
   1. Tokens (CSS variables)
   2. Reset & base
   3. Tipografia
   4. Layout
   5. Botões
   6. Campos de formulário
   7. Card
   8. Badge
   9. Alert
   10. Modal
   11. Spinner
   12. Separador
   13. Animações
   ============================================================================= */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */

:root {
  /* --- Cores da marca (fixas em ambos os modos) --- */
  --brand-navy:    #0F1B2D;
  --brand-primary: #00D9A3;
  --brand-danger:  #FF3B5C;
  --brand-muted:   #8FA3BD;

  /* --- Superfícies — modo escuro (padrão) --- */
  --c-bg:           #0F1B2D;
  --c-surface:      #162538;
  --c-surface-high: #1C3250;
  --c-border:       #1E3A5F;
  --c-border-focus: var(--brand-primary);

  /* --- Texto --- */
  --c-text:         #FFFFFF;
  --c-text-2:       #E2E8F0;
  --c-muted:        #8FA3BD;
  --c-placeholder:  #4A6280;

  /* --- Semânticas --- */
  --c-primary:        var(--brand-primary);
  --c-primary-fg:     #0F1B2D;   /* texto sobre fundo primary */
  --c-primary-subtle: rgba(0, 217, 163, 0.12);
  --c-primary-border: rgba(0, 217, 163, 0.35);

  --c-danger:         var(--brand-danger);
  --c-danger-fg:      #FFFFFF;
  --c-danger-subtle:  rgba(255, 59, 92, 0.12);
  --c-danger-border:  rgba(255, 59, 92, 0.35);

  --c-warning:        #F59E0B;
  --c-warning-fg:     #0F1B2D;
  --c-warning-subtle: rgba(245, 158, 11, 0.12);
  --c-warning-border: rgba(245, 158, 11, 0.35);

  --c-success:        var(--brand-primary);
  --c-success-fg:     #0F1B2D;
  --c-success-subtle: rgba(0, 217, 163, 0.12);
  --c-success-border: rgba(0, 217, 163, 0.35);

  --c-neutral-subtle: rgba(143, 163, 189, 0.12);
  --c-neutral-border: rgba(143, 163, 189, 0.3);

  /* --- Tipografia --- */
  --font:       system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --lh-tight:   1.25;
  --lh-base:    1.6;

  /* --- Espaçamento (escala de 4px) --- */
  --sp-1: 0.25rem;   /* 4px  */
  --sp-2: 0.5rem;    /* 8px  */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.25rem;   /* 20px */
  --sp-6: 1.5rem;    /* 24px */
  --sp-8: 2rem;      /* 32px */
  --sp-10:2.5rem;    /* 40px */
  --sp-12:3rem;      /* 48px */

  /* --- Bordas --- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* --- Sombras --- */
  --shadow-sm:  0 1px 4px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px rgba(0, 217, 163, 0.2);

  /* --- Transições --- */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:      120ms var(--ease);
  --t-base:      220ms var(--ease);
  --t-slow:      350ms var(--ease);

  /* --- Layout --- */
  --content-max:  720px;
  --header-h:     56px;
}

/* Modo claro — mantém cores de marca, aclara superfícies */
@media (prefers-color-scheme: light) {
  :root {
    --c-bg:           #EEF3F9;
    --c-surface:      #FFFFFF;
    --c-surface-high: #F5F9FF;
    --c-border:       #CBD5E1;
    --c-text:         #0F1B2D;
    --c-text-2:       #1E3A5F;
    --c-muted:        #5A7A9A;
    --c-placeholder:  #94A3B8;
    --shadow-sm:      0 1px 4px rgba(15, 27, 45, 0.08);
    --shadow-md:      0 4px 16px rgba(15, 27, 45, 0.12);
    --shadow-lg:      0 8px 32px rgba(15, 27, 45, 0.16);
  }
}


/* ── 2. RESET & BASE ─────────────────────────────────────────────────────── */

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: var(--fw-normal);
  line-height: var(--lh-base);
  color: var(--c-text);
  background-color: var(--c-bg);
  min-height: 100dvh;
  transition: background-color var(--t-base), color var(--t-base);
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { list-style: none; }

/* Remove aparência nativa de inputs em WebKit */
input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Foco acessível: visível apenas por teclado */
:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }


/* ── 3. TIPOGRAFIA ───────────────────────────────────────────────────────── */

.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }
.text-3xl   { font-size: var(--text-3xl); }

.fw-normal   { font-weight: var(--fw-normal); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }

.text-muted   { color: var(--c-muted); }
.text-primary { color: var(--c-primary); }
.text-danger  { color: var(--c-danger); }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

.uppercase    { text-transform: uppercase; letter-spacing: 0.06em; }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ── 4. LAYOUT ───────────────────────────────────────────────────────────── */

/* Header do app */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-6);
  gap: var(--sp-4);
  transition: background var(--t-base), border-color var(--t-base);
}

.app-header__logo { height: 32px; width: auto; }

.app-header__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.app-header__user {
  font-size: var(--text-sm);
  color: var(--c-muted);
}

/* Main */
.app-main {
  padding: var(--sp-8) var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Página de autenticação (login) */
.page-auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--sp-6) var(--sp-4);
}

.page-auth__logo {
  width: min(260px, 70vw);
  margin-bottom: var(--sp-8);
}

/* Contêiner de conteúdo */
.container {
  width: 100%;
  max-width: var(--content-max);
}

/* Grid de 2 colunas em telas médias+ */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

@media (min-width: 540px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
}

.col-span-2 { grid-column: 1 / -1; }

/* Utilitários flex */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2       { gap: var(--sp-2); }
.gap-4       { gap: var(--sp-4); }
.gap-6       { gap: var(--sp-6); }
.mt-4        { margin-top: var(--sp-4); }
.mt-6        { margin-top: var(--sp-6); }
.w-full      { width: 100%; }


/* ── 5. BOTÕES ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.625rem var(--sp-5);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition:
    background-color var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast),
    opacity var(--t-fast),
    transform var(--t-fast),
    box-shadow var(--t-fast);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.btn:active:not(:disabled) { transform: scale(0.97); }

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Variantes */
.btn-primary {
  background: var(--c-primary);
  color: var(--c-primary-fg);
  border-color: var(--c-primary);
}
.btn-primary:hover:not(:disabled) {
  background: #00c494;
  border-color: #00c494;
}
.btn-primary:focus-visible { box-shadow: var(--shadow-focus); }

.btn-danger {
  background: var(--c-danger);
  color: var(--c-danger-fg);
  border-color: var(--c-danger);
}
.btn-danger:hover:not(:disabled) { background: #e02d4f; border-color: #e02d4f; }

.btn-ghost {
  background: transparent;
  color: var(--c-muted);
  border-color: var(--c-border);
}
.btn-ghost:hover:not(:disabled) {
  color: var(--c-text);
  border-color: var(--c-muted);
}

.btn-ghost-danger {
  background: transparent;
  color: var(--c-muted);
  border-color: var(--c-border);
}
.btn-ghost-danger:hover:not(:disabled) {
  color: var(--c-danger);
  border-color: var(--c-danger);
}

.btn-link {
  background: transparent;
  border-color: transparent;
  color: var(--c-primary);
  padding-left: 0;
  padding-right: 0;
}
.btn-link:hover:not(:disabled) { text-decoration: underline; }

/* Tamanhos */
.btn-sm {
  padding: 0.375rem var(--sp-3);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding: 0.875rem var(--sp-6);
  font-size: var(--text-lg);
}

/* Largura total */
.btn-block { width: 100%; }

/* Ícone apenas (quadrado) */
.btn-icon {
  padding: 0.5rem;
  border-radius: var(--radius-md);
}


/* ── 6. CAMPOS DE FORMULÁRIO ─────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.label {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.label-required::after {
  content: ' *';
  color: var(--c-primary);
}

.input,
.textarea,
.select {
  width: 100%;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  color: var(--c-text);
  font-size: var(--text-base);
  padding: 0.625rem var(--sp-3);
  transition:
    border-color var(--t-fast),
    box-shadow var(--t-fast),
    background-color var(--t-base);
}

.input::placeholder,
.textarea::placeholder { color: var(--c-placeholder); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--c-border-focus);
  box-shadow: var(--shadow-focus);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Estado de erro */
.input--error,
.textarea--error {
  border-color: var(--c-danger);
}
.input--error:focus,
.textarea--error:focus {
  box-shadow: 0 0 0 3px rgba(255, 59, 92, 0.2);
}

.field-error {
  font-size: var(--text-xs);
  color: var(--c-danger);
  margin-top: calc(-1 * var(--sp-1));
}

.field-hint {
  font-size: var(--text-xs);
  color: var(--c-muted);
  margin-top: calc(-1 * var(--sp-1));
}

.textarea { resize: vertical; min-height: 90px; line-height: var(--lh-base); }

/* Select com seta customizada */
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238FA3BD' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  padding-right: var(--sp-8);
  cursor: pointer;
}

/* Input com ícone interno */
.input-group {
  position: relative;
}
.input-group .input { padding-left: var(--sp-8); }
.input-group__icon {
  position: absolute;
  left: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-muted);
  pointer-events: none;
}


/* ── 7. CARD ─────────────────────────────────────────────────────────────── */

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  width: 100%;
  transition: background-color var(--t-base), border-color var(--t-base);
}

.card--sm  { max-width: 400px; }
.card--md  { max-width: 560px; }
.card--lg  { max-width: var(--content-max); }

/* Variante interativa (hover) */
.card--interactive {
  cursor: pointer;
  transition:
    background-color var(--t-base),
    border-color var(--t-fast),
    box-shadow var(--t-fast),
    transform var(--t-fast);
}
.card--interactive:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.card-header {
  padding: var(--sp-6) var(--sp-6) 0;
  border-bottom: none;
}

.card-body {
  padding: var(--sp-6);
}

.card-footer {
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-3);
}

/* Título com barra lateral colorida */
.card-title {
  font-size: var(--text-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.card-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.1em;
  background: var(--c-primary);
  border-radius: 2px;
  flex-shrink: 0;
}

.card-subtitle {
  font-size: var(--text-sm);
  color: var(--c-muted);
  margin-top: var(--sp-1);
}


/* ── 8. BADGE ────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.2em 0.65em;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  border-radius: var(--radius-full);
  white-space: nowrap;
  border: 1px solid transparent;
}

.badge-primary {
  background: var(--c-primary-subtle);
  color: var(--c-primary);
  border-color: var(--c-primary-border);
}

.badge-danger {
  background: var(--c-danger-subtle);
  color: var(--c-danger);
  border-color: var(--c-danger-border);
}

.badge-warning {
  background: var(--c-warning-subtle);
  color: var(--c-warning);
  border-color: var(--c-warning-border);
}

.badge-neutral {
  background: var(--c-neutral-subtle);
  color: var(--c-muted);
  border-color: var(--c-neutral-border);
}

/* Ponto de status antes do texto */
.badge-dot::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}


/* ── 9. ALERT ────────────────────────────────────────────────────────────── */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--lh-base);
  border: 1px solid transparent;
}

.alert-success {
  background: var(--c-success-subtle);
  border-color: var(--c-success-border);
  color: var(--c-primary);
}

.alert-danger {
  background: var(--c-danger-subtle);
  border-color: var(--c-danger-border);
  color: var(--c-danger);
}

.alert-warning {
  background: var(--c-warning-subtle);
  border-color: var(--c-warning-border);
  color: var(--c-warning);
}

.alert-neutral {
  background: var(--c-neutral-subtle);
  border-color: var(--c-neutral-border);
  color: var(--c-muted);
}

.alert code {
  background: rgba(255,255,255,0.1);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}


/* ── 10. MODAL ───────────────────────────────────────────────────────────── */

/*
  Uso:
    <div class="modal-overlay" id="meu-modal" aria-hidden="true">
      <div class="modal" role="dialog" aria-modal="true" aria-labelledby="titulo-modal">
        <div class="modal-header">
          <h2 class="modal-title" id="titulo-modal">Título</h2>
          <button class="btn btn-ghost btn-icon" data-modal-close>✕</button>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">...</div>
      </div>
    </div>

  Abre via JS: abrirModal('meu-modal')
  Ou via atributo: <button data-modal-open="meu-modal">
*/

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 18, 30, 0.75);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  /* Estado inicial: invisível */
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
}

.modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 90dvh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  /* Animação de entrada */
  transform: translateY(var(--sp-6)) scale(0.97);
  transition: transform var(--t-base);
}

.modal-overlay.is-open .modal {
  transform: translateY(0) scale(1);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid var(--c-border);
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
}

.modal-body {
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  border-top: 1px solid var(--c-border);
}


/* ── 11. SPINNER ─────────────────────────────────────────────────────────── */

.spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* ── 12. SEPARADOR ───────────────────────────────────────────────────────── */

.divider {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-6) 0;
}

.divider-label {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-muted);
  font-size: var(--text-sm);
  margin: var(--sp-6) 0;
}

.divider-label::before,
.divider-label::after {
  content: '';
  flex: 1;
  border-top: 1px solid var(--c-border);
}


/* ── 13. ANIMAÇÕES ───────────────────────────────────────────────────────── */

/* Fade-in genérico para elementos que aparecem dinamicamente */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-in {
  animation: fadeIn var(--t-base) both;
}

/* Respeita preferência por menos movimento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}