@font-face {
  font-family: 'Acumin Pro';
  src: url('/fonts/AcuminPro-Light.otf') format('opentype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro';
  src: url('/fonts/AcuminPro-Regular.otf') format('opentype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro';
  src: url('/fonts/AcuminPro-Semibold.otf') format('opentype');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro';
  src: url('/fonts/AcuminPro-Bold.otf') format('opentype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --brand-primary: #084BFA;
  --brand-secondary: #1AD0FB;
  --brand-tertiary: #2CEECC;
  --brand-gradient: linear-gradient(135deg, #084BFA 0%, #1AD0FB 100%);
  --accent-orange-digital: #FF6A00;

  --neutral-0: #FFFFFF;
  --neutral-100: #D9D9D6;
  --neutral-400: #888B8D;
  --neutral-700: #53565A;
  --neutral-900: #000000;

  --font-primary: 'Acumin Pro', 'Encode Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --radio: 8px;
  --sombra: 0 1px 4px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--neutral-700);
  background: var(--neutral-0);
}

h1, h2, h3 { color: var(--brand-primary); font-weight: 600; margin: 0 0 0.5em; }
h1 { font-weight: 300; font-size: 1.9rem; }

a { color: var(--brand-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: var(--neutral-0);
  border-bottom: 1px solid var(--neutral-100);
}
.navbar .logo { height: 32px; }
.navbar nav { display: flex; gap: 1.25rem; align-items: center; }
.navbar nav a { color: var(--neutral-700); font-weight: 600; }
.navbar nav a:hover { color: var(--brand-primary); text-decoration: none; }
.navbar form { margin: 0; }
.navbar button.link {
  background: none; border: none; color: var(--neutral-700); font-family: inherit;
  font-weight: 600; font-size: 1rem; cursor: pointer; padding: 0;
}
.navbar button.link:hover { color: var(--brand-primary); }

main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

.card {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-100);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--neutral-100); }
th { color: var(--neutral-700); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.02em; }
tr:hover td { background: #f5f8ff; }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }

.btn {
  display: inline-block;
  background: var(--brand-primary);
  color: var(--neutral-0);
  border: none;
  border-radius: var(--radio);
  padding: 0.6rem 1.1rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.95rem;
}
.btn:hover { background: #0640d1; text-decoration: none; }
.btn.secundario {
  background: transparent;
  color: var(--brand-primary);
  border: 1px solid var(--brand-primary);
}

.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  background: rgba(8, 75, 250, 0.1);
  color: var(--brand-primary);
}
.badge.ok { background: rgba(44, 238, 204, 0.18); color: #0a8a73; }
.badge.error { background: rgba(255, 106, 0, 0.15); color: #b34c00; }

.filtros { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.filtros input, .filtros select {
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--neutral-100);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: 0.9rem;
}
.filtros input:focus, .filtros select:focus, textarea:focus { outline: none; border-color: var(--brand-primary); }

textarea {
  width: 100%;
  font-family: 'Courier New', monospace;
  font-size: 0.85rem;
  border: 1px solid var(--neutral-100);
  border-radius: var(--radio);
  padding: 0.75rem;
}

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-gradient);
}
.login-card {
  background: var(--neutral-0);
  border-radius: var(--radio);
  box-shadow: 0 8px 30px rgba(0,0,0,0.2);
  padding: 2.5rem;
  width: 100%;
  max-width: 360px;
  text-align: center;
}
.login-card img { height: 40px; margin-bottom: 1.5rem; }
.login-card input {
  width: 100%;
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--neutral-100);
  border-radius: var(--radio);
  font-family: inherit;
}
.login-card .btn { width: 100%; }
.error-msg { color: #b3002d; font-size: 0.9rem; margin-bottom: 0.75rem; }

.banner-prueba {
  background: var(--accent-orange-digital);
  color: var(--neutral-0);
  font-weight: 700;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.stat { font-size: 1.6rem; font-weight: 700; color: var(--brand-primary); }
.muted { color: var(--neutral-400); font-size: 0.85rem; }

footer {
  text-align: center;
  color: var(--neutral-400);
  font-size: 0.8rem;
  padding: 2rem 1rem 1rem;
}

/* Formularios de negocio (circuito GIdL) */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.85rem 1.25rem; }
.form-grid .ancho { grid-column: 1 / -1; }
.campo label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.3rem; }
.campo .ayuda { display: block; color: var(--neutral-400); font-size: 0.78rem; margin-top: 0.2rem; }
.campo input, .campo select, .tabla-form input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--neutral-100);
  border-radius: var(--radio);
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--neutral-0);
}
.campo input:focus, .campo select:focus, .tabla-form input:focus { outline: none; border-color: var(--brand-primary); }
.campo input[readonly], .campo select:disabled { background: #f2f4f8; color: var(--neutral-400); }
fieldset.seccion { border: 0; padding: 0; margin: 0 0 1.25rem; }
fieldset.seccion legend { font-weight: 700; color: var(--brand-primary); margin-bottom: 0.6rem; font-size: 0.95rem; }
.tabla-form { overflow-x: auto; }
.tabla-form table { min-width: 980px; }
.tabla-form th { font-size: 0.78rem; white-space: nowrap; }
.tabla-form td { padding: 0.25rem; }
.tabla-form input { padding: 0.4rem 0.45rem; font-size: 0.85rem; }
.aviso-ok { border-color: #0a8a73 !important; }
.aviso-error { border-color: #b34c00 !important; }
details.tecnico { margin-top: 1rem; }
details.tecnico summary { cursor: pointer; color: var(--neutral-400); font-size: 0.85rem; }

/* Circuito de la liquidación */
.paso-a-paso { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; }
.paso-a-paso li { flex: 1 1 160px; display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.75rem; border-radius: var(--radio); background: #f2f4f8; color: var(--neutral-400); font-size: 0.88rem; }
.paso-a-paso .paso-num { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--neutral-0); font-weight: 700; }
.paso-a-paso li.hecho { background: #e3f6f1; color: #0a6b59; }
.paso-a-paso li.hecho .paso-num { background: #0a8a73; color: var(--neutral-0); }
.paso-a-paso li.actual { background: #e8efff; color: var(--brand-primary); font-weight: 600; }
.paso-a-paso li.actual .paso-num { background: var(--brand-primary); color: var(--neutral-0); }
.paso-a-paso li.desvio { background: #fff1e6; color: #b34c00; }
.paso-a-paso li.desvio .paso-num { background: #b34c00; color: var(--neutral-0); }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
.accion-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }
.accion-form input[type=text] { min-width: 260px; padding: 0.5rem 0.65rem; border: 1px solid var(--neutral-100); border-radius: var(--radio); font-family: inherit; }
.chips-etapas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: #f2f4f8; color: inherit; font-size: 0.85rem; text-decoration: none; border: 1px solid transparent; }
.chip:hover { border-color: var(--brand-primary); text-decoration: none; }
.chip.activo { background: var(--brand-primary); color: var(--neutral-0); }
.chip-num { font-weight: 700; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.4rem; }
.checklist li { color: var(--neutral-400); }
.checklist li.ok { color: #0a6b59; font-weight: 600; }
.badge.etapa-ENVIADA, .badge.etapa-CERRADA { background: #e3f6f1; color: #0a6b59; }
.badge.etapa-PARA_REVISAR { background: #e8efff; color: var(--brand-primary); }
.badge.etapa-PENDIENTE_DATOS, .badge.etapa-PENDIENTE_APROBACION, .badge.etapa-ENVIO_CON_ERROR, .badge.etapa-RECHAZADA { background: #fff1e6; color: #b34c00; }

.tabla-detalle { font-size: 0.82rem; }
.tabla-detalle th, .tabla-detalle td { white-space: nowrap; }