@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600&display=swap');

:root {
  --petroleo: #0E4D4B;
  --mandarina: #E8772E;
  --crema: #F7F3EA;
  --carbon: #1F2328;
  --borde: #E3DCCB;
  --tarjeta: #FFFDF8;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--crema);
  color: var(--carbon);
  font: 16px/1.6 'Titillium Web', system-ui, sans-serif;
}
header {
  background: var(--petroleo);
  color: var(--crema);
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
header .marca { font-weight: 600; letter-spacing: .06em; font-size: 13px; opacity: .85; }
header h1 { margin: 4px 0 0; font-size: 22px; font-weight: 600; }
header form { margin: 0; }
header button.salir {
  background: transparent;
  border: 1px solid var(--crema);
  color: var(--crema);
  border-radius: 8px;
  padding: 8px 14px;
  font: 600 14px 'Titillium Web', sans-serif;
  cursor: pointer;
}
main { max-width: 1040px; margin: 0 auto; padding: 24px 16px 64px; }
h2 { color: var(--petroleo); font-weight: 600; font-size: 19px; margin: 30px 0 10px; }
.aviso {
  background: #FCEFD9;
  border: 1px solid var(--mandarina);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 14px;
  margin-bottom: 18px;
}
.kpis { display: flex; gap: 14px; flex-wrap: wrap; }
.kpi {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 16px 20px;
  min-width: 150px;
  flex: 1;
}
.kpi .num { font-size: 30px; font-weight: 600; color: var(--petroleo); }
.kpi.destacado .num { color: var(--mandarina); }
.kpi .etiqueta { font-size: 13px; color: #5B5F66; }
.flujo {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.flujo .detalle { font-size: 13px; color: #5B5F66; }
.estado-chip {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.estado-chip.activo { background: var(--petroleo); }
.estado-chip.pausado { background: #8a7b4f; }
.estado-chip.error { background: #B3261E; }
.estado-chip.inactivo { background: #9aa0a6; }
table { width: 100%; border-collapse: collapse; margin: 10px 0; background: var(--tarjeta); }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--borde); font-size: 14px; vertical-align: top; }
th { color: var(--petroleo); }
tr.valido { background: #F1F8F3; }
.pill { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600; }
.pill.ok { background: var(--petroleo); color: #fff; }
.pill.no { background: var(--borde); color: #5B5F66; }
.pill.descartado { background: #eee; color: #999; text-decoration: line-through; }
.login-wrap { max-width: 380px; margin: 80px auto; padding: 0 16px; }
.login-wrap .tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 24px; }
.login-wrap label { display: block; font-size: 13px; margin: 12px 0 4px; }
.login-wrap input { width: 100%; padding: 10px; border-radius: 8px; border: 1px solid var(--borde); font: 15px 'Titillium Web', sans-serif; }
.login-wrap button { margin-top: 18px; width: 100%; background: var(--mandarina); color: #fff; border: 0; border-radius: 10px; padding: 12px; font: 600 15px 'Titillium Web', sans-serif; cursor: pointer; }
.login-wrap .error { color: #B3261E; font-size: 14px; margin-top: 10px; }
.selector { margin-bottom: 16px; }
.selector select { padding: 8px; border-radius: 8px; border: 1px solid var(--borde); font: 15px 'Titillium Web', sans-serif; }
.boton-exportar { display: inline-block; margin: 10px 0; background: var(--petroleo); color: #fff; border-radius: 8px; padding: 10px 16px; text-decoration: none; font-weight: 600; font-size: 14px; }
.nota { font-size: 13px; color: #5B5F66; }
h3 { color: var(--petroleo); font-weight: 600; font-size: 16px; margin: 22px 0 6px; }
.tabla { overflow-x: auto; }
.pill.revisar { background: var(--mandarina); color: #fff; }
.motivo { font-size: 12px; color: #5B5F66; margin-top: 4px; }
.motivo code { font-size: 11px; background: #fff; border: 1px solid var(--borde); border-radius: 4px; padding: 0 4px; }
.filtro { margin: 6px 0; font-size: 14px; }
.filtro select { padding: 6px; border-radius: 8px; border: 1px solid var(--borde); font: 14px 'Titillium Web', sans-serif; }