/* ============================================================================
   GesDCloud · site.css — Sistema de Diseño Táctico / Flat (fuente compartida)
   ----------------------------------------------------------------------------
   Alineado con cajserver_analytics/assets/tactical_theme.css:
   paleta slate fría, IBM Plex Sans/Mono, radio 4px, sombra mínima, transiciones
   120ms lineales, sin gradientes, sin elevaciones flotantes, sin translateY.
   Marca GesDCloud = azul de sistema #0f6cbd. (El morado #660099 es de Cajebel
   y NO aparece aquí.)

   Estrategia: se definen los tokens tácticos canónicos + aliases con el
   vocabulario legacy (--line, --fg-dim, --r-sm…) que ya usan las páginas, de
   modo que la mayoría de selectores se restilan sin tocarse.
   ============================================================================ */

:root {
  /* Paleta slate (Sistema Táctico/Flat) */
  --bg: #f8fafc;            --surface: #ffffff;
  --border: #e2e8f0;        --rule: #f1f5f9;
  --hover-bg: #f8fafc;      --selected: #eef2f7;
  --border-hover: #cbd5e1;
  --text: #1e293b;          --text-strong: #0f172a;
  --text-head: #334155;     --muted: #475569;
  --muted-soft: #6c757d;    --empty: #64748b;

  /* Acento (azul de sistema; morado #660099 PROHIBIDO) */
  --accent: #0f6cbd;  --accent-hover: #0c5896;  --accent-active: #0a4a80;
  --accent-soft: #e6f1fb;  --positive: #2e7d32;  --negative: #c00000;

  /* Banda oscura "Proceso" → slate-900 del propio sistema */
  --ink-bg: #0f172a;  --ink-line: #334155;
  --on-ink: #f1f5f9;  --on-ink-dim: #94a3b8;
  --on-ink-accent: #7cb3e2; /* #0f6cbd solo da 3.3:1 sobre slate-900 */

  /* Geometría / movimiento */
  --radius: 4px;  --radius-badge: 10px;
  --shadow: 0 1px 2px rgba(15,23,42,.05);  --speed: 120ms;
  --maxw: 1200px;  --pad: clamp(20px, 4vw, 56px);

  --font-sans: "IBM Plex Sans", Inter, Roboto, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* Aliases de compatibilidad (vocabulario legacy) */
  --bg-elev: #f1f5f9;  --bg-card: var(--surface);  --bg-ink: var(--ink-bg);
  --line: var(--border);  --line-soft: var(--rule);  --line-strong: var(--border-hover);
  --fg: var(--text);  --fg-dim: var(--muted);  --fg-mute: var(--muted-soft);
  --accent-ink: #ffffff;  --on-ink-line: var(--ink-line);
  --r-sm: var(--radius);  --r-md: var(--radius);  --r-lg: var(--radius);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
input, textarea, button, select { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #fff; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
section { padding-block: clamp(72px, 10vw, 132px); }

/* ---------- Typography ---------- */
h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  color: var(--text-strong);
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}
p { margin: 0; }

.lede {
  font-size: clamp(17px, 1.4vw, 20px);
  color: var(--muted);
  line-height: 1.55;
  text-wrap: pretty;
  max-width: 56ch;
}

/* ---------- Label mono (eyebrow y derivados) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted-soft);
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--border-hover); }
.eyebrow.on-ink { color: var(--on-ink-dim); }
.eyebrow.on-ink::before { background: var(--ink-line); }

/* ---------- Buttons (sin transform, sin slide de flecha) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px 20px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  transition: background-color var(--speed) linear, border-color var(--speed) linear, color var(--speed) linear;
  white-space: nowrap;
}
.btn:hover { background: var(--accent-hover); }
.btn:active { background: var(--accent-active); }
.btn--ghost {
  background: var(--surface);
  color: var(--muted);
  border-color: var(--border-hover);
}
.btn--ghost:hover { background: var(--surface); color: var(--accent); border-color: var(--accent); }
.btn--lg { padding: 14px 24px; font-size: 16px; }
.btn--on-ink { background: #fff; color: var(--ink-bg); }
.btn--on-ink:hover { background: #fff; color: var(--accent); }
.btn--on-ink.btn--ghost { background: transparent; color: var(--on-ink); border-color: var(--ink-line); }
.btn--on-ink.btn--ghost:hover { background: transparent; color: #fff; border-color: var(--on-ink); }

/* ---------- Badges (mismos valores que .badge-estado--* del sistema) ---------- */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-badge);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.badge--info    { background: #e6f1fb; color: #0c5896; }
.badge--neutral { background: #eef2f7; color: #475569; }
.badge--ok      { background: #e7f6ec; color: #1f7a3d; }
.badge--warn    { background: #fef6e7; color: #92600a; }
.badge--bad     { background: #fdecea; color: #b42318; }

/* ---------- Formularios ---------- */
.field label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.field input, .field textarea {
  background: var(--surface);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius);
  padding: 13px 14px;
  color: var(--text);
  font-size: 15px;
  outline: none;
  width: 100%;
  font-family: inherit;
  transition: border-color var(--speed) linear, box-shadow var(--speed) linear;
}
.field input:focus, .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field.invalid input, .field.invalid textarea { border-color: var(--negative); }
.field .err {
  color: var(--negative);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .4px;
}

/* ---------- Carga mecánica (patrón .tac-cargando del sistema) ---------- */
.tac-loading {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  animation: tac-blink 900ms steps(2, start) infinite;
}
@keyframes tac-blink { 50% { opacity: .25; } }

/* ---------- Reveal (fade seco, sin transform) ---------- */
.reveal { opacity: 0; transition: opacity var(--speed) linear; }
.reveal.in-view { opacity: 1; }
.reveal-delay-1 { transition-delay: 40ms; }
.reveal-delay-2 { transition-delay: 80ms; }
.reveal-delay-3 { transition-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; }
  html { scroll-behavior: auto; }
}