:root {
  --fondo: #fafaf8;
  --tinta: #0b1220;
  --tenue: #5b6472;
  --acento: #0e5fd8;
  --borde: #e4e4dd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.55;
}

.topbar {
  border-bottom: 1px solid var(--borde);
  padding: 1rem 1.5rem;
}

.marca {
  color: var(--tinta);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
}

main {
  margin: 0 auto;
  max-width: 72rem;
  padding: 3rem 1.5rem;
}

.hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  max-width: 26ch;
}

.bajada {
  color: var(--tenue);
  font-size: 1.125rem;
  max-width: 60ch;
}

.nota {
  border-left: 3px solid var(--acento);
  color: var(--tenue);
  font-size: 0.95rem;
  margin-top: 2rem;
  padding-left: 0.875rem;
}

.pie {
  border-top: 1px solid var(--borde);
  color: var(--tenue);
  font-size: 0.875rem;
  padding: 1.5rem;
}

/* ── navegación ──────────────────────────────────────────────────────── */
.topbar { align-items: center; display: flex; gap: 1rem; justify-content: space-between; }
.nav { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.9375rem; }
.nav a { color: var(--tenue); text-decoration: none; }
.nav a:hover { color: var(--tinta); }
.org-actual { color: var(--tinta); font-weight: 600; }
.inline { display: inline; }

/* ── avisos ──────────────────────────────────────────────────────────── */
.avisos { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.aviso { border-left: 3px solid var(--borde); border-radius: 6px; margin-bottom: 0.5rem;
         padding: 0.75rem 1rem; background: #fff; }
.aviso-ok { border-left-color: #159a6b; }
.aviso-error { border-left-color: #c8462f; }
.aviso-aviso { border-left-color: #c98a12; }

/* ── formularios ─────────────────────────────────────────────────────── */
.formulario { max-width: 32rem; }
.formulario.ancho { max-width: 46rem; }
.formulario label, .fila label { display: block; margin-bottom: 1rem; font-size: 0.9375rem; }
.formulario small { color: var(--tenue); display: block; font-size: 0.8125rem; margin-top: 0.25rem; }
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=number], select, textarea {
  border: 1px solid var(--borde); border-radius: 8px; font: inherit; margin-top: 0.35rem;
  padding: 0.55rem 0.7rem; width: 100%; background: #fff; color: var(--tinta);
}
input:focus, select:focus, textarea:focus { border-color: var(--acento); outline: 2px solid rgba(14,95,216,0.15); }
.casilla { align-items: center; display: flex; gap: 0.5rem; }
.casilla input { margin: 0; width: auto; }
button { background: var(--acento); border: 0; border-radius: 999px; color: #fff;
         cursor: pointer; font: inherit; font-weight: 600; padding: 0.6rem 1.25rem; }
button:hover { filter: brightness(1.08); }
button.enlace { background: none; color: var(--tenue); font-weight: 400; padding: 0;
                text-decoration: underline; }
button.enlace.peligro { color: #c8462f; }
button.secundario-btn { background: #fff; border: 1px solid var(--borde); color: var(--tinta); }
.fila { align-items: center; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0; }
.fila input, .fila select { margin-top: 0; width: auto; min-width: 12rem; }
.acciones { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0; }

/* ── listados ────────────────────────────────────────────────────────── */
h2 { font-size: 1.125rem; letter-spacing: -0.01em; margin: 2.5rem 0 0.75rem; }
.tenue { color: var(--tenue); }
.secundario { color: var(--tenue); font-size: 0.9375rem; }
.secundario a { color: var(--acento); }
.tabla { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
.tabla th { border-bottom: 1px solid var(--borde); color: var(--tenue); font-weight: 500;
            padding: 0.5rem 0.75rem 0.5rem 0; text-align: left; }
.tabla td { border-bottom: 1px solid var(--borde); padding: 0.75rem 0.75rem 0.75rem 0;
            vertical-align: top; }
.tabla a { color: var(--acento); }
/* Tablas anchas: scroll dentro de su caja, nunca en el body. */
.listado { overflow-x: auto; }
.tarjetas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
            list-style: none; padding: 0; }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 1.25rem; }
.tarjeta h2 { margin-top: 0; }
.metricas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
            list-style: none; margin: 2rem 0; padding: 0; }
.metricas li { background: #fff; border: 1px solid var(--borde); border-radius: 12px; padding: 1rem 1.25rem; }
.cifra { display: block; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.etiqueta { color: var(--tenue); font-size: 0.8125rem; }
.archivos { list-style: none; padding: 0; }
.archivos li { border-bottom: 1px solid var(--borde); padding: 0.6rem 0; }
code { background: #f2f2ec; border-radius: 4px; font-size: 0.85em; padding: 0.1rem 0.3rem; }

/* ── estados ─────────────────────────────────────────────────────────── */
.estado { border-radius: 999px; font-size: 0.8125rem; padding: 0.15rem 0.6rem; background: #f2f2ec; }
.estado-aprobado, .estado-pagado { background: #dff3e9; }
.estado-rechazado, .estado-anulado { background: #f8e0da; }
.estado-en_revision { background: #fdf0d5; }
.marca-aviso { background: #fdf0d5; border-radius: 999px; font-size: 0.75rem; padding: 0.1rem 0.5rem; }

/* ── portal del cliente ──────────────────────────────────────────────── */
.portal main { max-width: 40rem; }
.portal .pie { border-top: 1px solid var(--borde); margin-top: 3rem; padding: 1.5rem 0 0; }

/* Botón como enlace (correos y portal de pago). */
.boton { background: var(--acento); border-radius: 999px; color: #fff; display: inline-block;
         font-weight: 600; padding: 0.7rem 1.4rem; text-decoration: none; }
.boton:hover { filter: brightness(1.08); }
.estado-emitido, .estado-enviado, .estado-pendiente, .estado-creado { background: #e7eefc; }
.estado-vencido, .estado-revisar { background: #fdf0d5; }