/* ============================================================================
   qirava-tokens.css — SISTEMA DE DISEÑO CANÓNICO DE LA APP FORMAL (PREMIUM)
   ----------------------------------------------------------------------------
   Fuente de verdad: el sitio Capture/landing actual (app/static/landing.css).
   Todos los valores aquí son REALES, extraídos de la landing, expuestos con el
   prefijo neutro --q-* para que la app formal (premium) herede de este archivo
   en lugar de re-declarar colores/tipos/radios sueltos.

   Uso: importar/enlazar ANTES del CSS de premium y consumir solo las --q-*.
   No duplicar hex ni gradientes en las vistas: siempre var(--q-…).
   ============================================================================ */

:root {
  color-scheme: light;

  /* ── Marca / acento ──────────────────────────────────────────────────── */
  --q-brand:            #3E8551; /* qirava-green: acento principal, brand */
  --q-accent:           #3E8551; /* alias semántico del acento principal */
  --q-accent-hover:     #2E6B41; /* verde profundo: hover del acento */
  --q-violet:           #3C8F86;
  --q-indigo:           #2E6B41;
  --q-blue:             #2563EB;
  --q-cyan:             #22D3EE;
  --q-sky:              #38BDF8;
  --q-lavender:         #86C1A9;

  /* ── Tinta / texto ───────────────────────────────────────────────────── */
  --q-ink:              #0B102A; /* texto principal / headings */
  --q-ink-2:            #11183A; /* tinta secundaria fuerte */
  --q-muted:            #64748B; /* texto atenuado */
  --q-muted-2:          #475569; /* párrafos / body atenuado */
  --q-placeholder:      #94A3B8;

  /* ── Fondo / superficies ─────────────────────────────────────────────── */
  --q-bg:               #F8FAFC; /* fondo base */
  --q-bg-strong:        #ECF3EC; /* fondo realce (chips, tabs, hover) */
  --q-surface:          #FFFFFF; /* superficie de tarjetas / inputs */
  --q-surface-glass:    rgba(255, 255, 255, 0.78); /* paneles glass */

  /* ── Bordes ──────────────────────────────────────────────────────────── */
  --q-border:           #DCE3F1;
  --q-border-strong:    #C6DBC9;
  --q-focus-ring:       rgba(34, 211, 238, 0.22);   /* halo de foco (cyan) */
  --q-focus-inset:      rgba(60, 143, 134, 0.35);   /* borde interior foco */

  /* ── Estados semánticos ──────────────────────────────────────────────── */
  --q-success:          #10B981;
  --q-warning:          #F59E0B;
  --q-danger:           #EF4444;
  --q-danger-bg:        #FEF2F2;
  --q-danger-text:      #991B1B;

  /* ── Gradientes de marca ─────────────────────────────────────────────── */
  --q-gradient-primary: linear-gradient(135deg, #3E8551 0%, #2E9E8F 50%, #22D3EE 100%);
  --q-gradient-hover:   linear-gradient(135deg, #2E6B41 0%, #2A8C7F 50%, #0891B2 100%);
  --q-gradient-soft:
    radial-gradient(circle at 18% 10%, rgba(60, 143, 134, 0.18), transparent 34%),
    radial-gradient(circle at 86% 14%, rgba(34, 211, 238, 0.16), transparent 30%),
    linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 62%, #ECF3EC 100%);

  /* ── Tipografía (real: Inter + Sora, cargadas vía Google Fonts) ──────── */
  --q-font-sans:        Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --q-font-display:     Sora, Inter, ui-sans-serif, system-ui, sans-serif;
  --q-font-mono:        ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  /* ── Escala de radios (derivada de la landing) ───────────────────────── */
  --q-radius-xs:        6px;   /* lang-switcher */
  --q-radius-sm:        8px;   /* botones nav / chips pequeños */
  --q-radius:           10px;  /* radio base botones */
  --q-radius-md:        12px;  /* service options / tabs */
  --q-radius-lg:        14px;  /* product cards */
  --q-radius-xl:        16px;  /* inputs / botones grandes */
  --q-radius-2xl:       22px;  /* formularios / paneles */
  --q-radius-3xl:       24px;  /* paneles glass grandes */
  --q-radius-pill:      999px; /* badges / chips */

  /* ── Sombras (derivadas de la landing) ───────────────────────────────── */
  --q-shadow-sm:        0 1px 4px rgba(15, 23, 42, 0.10);
  --q-shadow-card:      0 2px 12px rgba(62, 133, 81, 0.08);
  --q-shadow-card-hover:0 4px 20px rgba(62, 133, 81, 0.13);
  --q-shadow-btn:       0 18px 42px rgba(46, 107, 65, 0.28);
  --q-shadow-btn-hover: 0 22px 54px rgba(46, 107, 65, 0.36);
  --q-shadow-panel:     0 24px 80px rgba(15, 23, 42, 0.07);
  --q-shadow-form:      0 24px 80px rgba(15, 23, 42, 0.10);

  /* ── Espaciados (derivados de paddings/gaps recurrentes) ─────────────── */
  --q-space-1:          4px;
  --q-space-2:          8px;
  --q-space-3:          12px;
  --q-space-4:          16px;
  --q-space-5:          20px;
  --q-space-6:          24px;
  --q-space-8:          32px;
  --q-space-12:         48px;
  --q-space-14:         56px;
}

/* ============================================================================
   COMPONENTES REUTILIZABLES (alineados a la landing, consumen las --q-*)
   ============================================================================ */

/* ── Botones ─────────────────────────────────────────────────────────────
   Derivado de .btn-primary / .btn-secondary / .transcribe-form button. */
.q-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--q-radius-xl);
  font-family: var(--q-font-sans);
  font-size: 0.97rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.q-btn--primary {
  background: var(--q-gradient-primary);
  color: #FFFFFF;
  font-weight: 800;
  box-shadow: var(--q-shadow-btn);
}
.q-btn--primary:hover {
  background: var(--q-gradient-hover);
  transform: translateY(-1px);
  box-shadow: var(--q-shadow-btn-hover);
  color: #FFFFFF;
}
.q-btn--primary:active { transform: translateY(0); }

.q-btn--secondary {
  background: var(--q-surface);
  border: 1px solid var(--q-border);
  color: var(--q-ink);
}
.q-btn--secondary:hover {
  border-color: var(--q-border-strong);
  color: var(--q-brand);
}

.q-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── Input ───────────────────────────────────────────────────────────────
   Derivado de .transcribe-form input. */
.q-input {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--q-radius-xl);
  background: var(--q-surface);
  color: var(--q-ink);
  font-family: var(--q-font-sans);
  font-size: 1rem;
  box-shadow: inset 0 0 0 1px rgba(220, 227, 241, 0.85);
}
.q-input::placeholder { color: var(--q-placeholder); }
.q-input:focus {
  outline: 4px solid var(--q-focus-ring);
  border-color: rgba(60, 143, 134, 0.55);
  box-shadow: inset 0 0 0 1px var(--q-focus-inset);
}

/* ── Card ────────────────────────────────────────────────────────────────
   Derivado de .product-card / .product-card--live. */
.q-card {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-2);
  padding: 22px 20px;
  background: var(--q-surface);
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius-lg);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.q-card--interactive {
  border-color: var(--q-border-strong);
  box-shadow: var(--q-shadow-card);
}
.q-card--interactive:hover {
  border-color: var(--q-brand);
  box-shadow: var(--q-shadow-card-hover);
}

/* ── Field (label + control) ─────────────────────────────────────────────
   Derivado de .rf-field del formulario de solicitud real. */
.q-field {
  display: flex;
  flex-direction: column;
  gap: var(--q-space-1);
  font-size: 0.9rem;
}
.q-field > span { font-weight: 600; color: var(--q-ink-2); }
.q-field em { font-weight: 400; color: var(--q-muted); font-style: normal; }