:root {
  --rojo: #EB0A1E;
  --negro: #14171A;
  --gris: #6B7280;
  --borde: #E3E7EB;
  --fondo: #F4F6F8;
  --ok: #128A4E;
  --warn: #B45309;
  --err: #C81E1E;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Barlow', Arial, sans-serif;
  color: var(--negro);
  background: var(--fondo);
  font-size: 15px;
}

h1, h2 { font-family: 'Barlow Condensed', Arial, sans-serif; letter-spacing: .5px; }

/* ---------- Tarjetas ---------- */

.card {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rojo) 0 55%, var(--negro) 55% 100%);
}

/* ---------- Login ---------- */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.login-card { width: 100%; max-width: 400px; text-align: center; margin: 0; }
.login-logo { width: 64px; margin: 8px auto 12px; display: block; }
.login-title { margin: 0; font-size: 28px; }
.login-sub { margin: 2px 0 20px; color: var(--gris); font-size: 13px; }
.login-sub .marca { font-weight: 700; letter-spacing: 2px; margin-right: 6px; color: var(--negro); }
.login-hint { color: var(--gris); font-size: 13px; line-height: 1.5; margin: 0 0 20px; }

.login-card .lbl { text-align: left; }
.inp-codigo { text-align: center; font-size: 26px; letter-spacing: 10px; font-weight: 600; }

/* ---------- Formularios ---------- */

.lbl {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gris);
  margin-bottom: 6px;
}

.inp {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: inherit;
}

.inp:focus { outline: 2px solid rgba(235, 10, 30, .35); outline-offset: 1px; border-color: var(--rojo); }
textarea.inp { resize: vertical; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.f-full { grid-column: 1 / -1; }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }

.btn {
  font: inherit;
  font-weight: 600;
  border-radius: 8px;
  padding: 11px 18px;
  border: 1px solid transparent;
  cursor: pointer;
}

.btn[disabled] { opacity: .6; cursor: progress; }
.btn-primary { background: var(--rojo); color: #fff; width: 100%; margin-top: 18px; }
.btn-primary:hover:not([disabled]) { background: #c50918; }
.btn-link { background: none; color: var(--gris); width: 100%; margin-top: 6px; text-decoration: underline; }
.btn-ghost { background: none; border-color: var(--borde); color: var(--negro); padding: 7px 14px; }

/* ---------- Mensajes ---------- */

.msg { margin: 14px 0 0; font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 8px; text-align: left; }
.msg-error { background: rgba(200, 30, 30, .08); color: var(--err); }
.msg-ok { background: rgba(18, 138, 78, .1); color: var(--ok); }

/* ---------- Panel ---------- */

.topbar { background: #fff; border-bottom: 1px solid var(--borde); }
.topbar-in { max-width: 860px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 12px; }
.topbar-logo { width: 40px; }
.topbar-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.topbar-txt strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-txt span { font-size: 12px; color: var(--gris); }

.main { max-width: 860px; margin: 0 auto; padding: 24px 20px 8px; }
.h2 { margin: 4px 0 4px; font-size: 22px; }
.sub { margin: 0 0 20px; color: var(--gris); font-size: 13px; }
.pie { text-align: center; color: var(--gris); font-size: 12px; padding: 12px 20px 32px; }

/* ---------- Listado ---------- */

.lista { display: flex; flex-direction: column; gap: 10px; }

.item {
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.item-main { flex: 1; min-width: 200px; }
.item-titulo { font-weight: 600; }
.item-det { font-size: 13px; color: var(--gris); margin-top: 2px; }
.item-obs { font-size: 13px; margin-top: 6px; }
.item-importe { font-weight: 600; white-space: nowrap; }

.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.pill-PENDIENTE { background: rgba(180, 83, 9, .12); color: var(--warn); }
.pill-EN_ANALISIS { background: rgba(37, 99, 235, .12); color: #2563EB; }
.pill-APROBADA { background: rgba(18, 138, 78, .12); color: var(--ok); }
.pill-RECHAZADA { background: rgba(200, 30, 30, .1); color: var(--err); }

.vacio { color: var(--gris); font-size: 14px; padding: 8px 0; }