/* ==========================================================================
   Rectificados ANXAJO S.L. — Sistema de diseño (variables CSS)
   Los valores son provisionales; cámbialos por la paleta corporativa.
   ========================================================================== */

:root {
  /* ── Color ─────────────────────────────────────────────────────────────── */
  --color-base:        #0E1116; /* antracita: fondos oscuros */
  --color-ink:         #14181D; /* texto principal */
  --color-muted:       #5B6671; /* texto secundario, metadatos */
  --color-bg:          #F4F6F8; /* fondo general */
  --color-surface:     #FFFFFF; /* tarjetas y superficies */
  --color-line:        #D7DCE1; /* líneas finas técnicas */
  --color-steel:       #8C949D; /* gris acero, detalles */
  --color-accent:      #2756A8; /* azul corporativo ANXAJO */
  --color-accent-soft: #E8EFF9; /* fondo de acento suave */
  --color-accent-hover:#1E4A94; /* acento hover */
  --color-ok:          #1E9E6A; /* estado correcto */
  --color-warn:        #C7531B; /* aviso */
  --color-error:       #DC2626; /* error */
  --color-error-soft:  #FEF2F2; /* fondo error */

  /* ── Radio y líneas ────────────────────────────────────────────────────── */
  --radius: 5px;
}

/* ── Tipografía ──────────────────────────────────────────────────────────── */
.font-display { font-family: "Space Grotesk", sans-serif; }
.font-body    { font-family: "Inter", sans-serif; }
.font-mono    { font-family: "IBM Plex Mono", monospace; }

/* ── Reset base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-font-smoothing: antialiased; }
body {
  height: 100%;
  font-family: "Inter", sans-serif;
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.5;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }

/* ── Componentes reutilizables ───────────────────────────────────────────── */

/* Botón primario */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--color-accent);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-primary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Botón secundario */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--color-surface); }

/* Botón ghost */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  color: var(--color-accent);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  transition: background 0.15s;
}
.btn-ghost:hover { background: var(--color-accent-soft); }

/* Campo de formulario */
.form-field { display: flex; flex-direction: column; gap: 6px; }
.form-label {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
}
.form-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--color-ink);
  transition: border-color 0.15s;
}
.form-input::placeholder { color: var(--color-steel); }
.form-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.form-input--error { border-color: var(--color-error); }
.form-input--error:focus { box-shadow: 0 0 0 3px var(--color-error-soft); }

textarea.form-input { height: auto; padding: 12px 14px; resize: vertical; }

/* Badge de estado */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 500;
}
.badge--ok { background: #ECFDF5; color: var(--color-ok); }
.badge--warn { background: var(--color-accent-soft); color: var(--color-accent); }
.badge--inactive { background: var(--color-bg); color: var(--color-steel); }
.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Placeholder de imagen */
.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-line);
  color: var(--color-steel);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  text-align: center;
  padding: 16px;
  border-radius: var(--radius);
  min-height: 200px;
}