:root {
  --fondo: #f4f6f8;
  --tarjeta: #ffffff;
  --texto: #1f2933;
  --suave: #616e7c;
  --borde: #d9e2ec;
  --primario: #1f4e79;
  --primario-hover: #163a5c;
  --ok: #1e7b4f;
  --ok-fondo: #e6f4ec;
  --error: #b42318;
  --error-fondo: #fdecea;
  --aviso: #8a5a00;
  --aviso-fondo: #fff4d6;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.45;
}
header {
  background: var(--primario);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
header h1 { font-size: 17px; margin: 0; font-weight: 600; }
header .usuario { font-size: 13px; opacity: .9; display: flex; gap: 12px; align-items: center; }
header button { background: transparent; border: 1px solid rgba(255,255,255,.6); color: #fff; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
main { max-width: 860px; margin: 24px auto; padding: 0 16px; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 20px; margin-bottom: 18px; }
.tarjeta h2 { font-size: 16px; margin: 0 0 14px; }
label { display: block; font-size: 13px; color: var(--suave); margin: 12px 0 4px; }
input, select { width: 100%; padding: 9px 10px; border: 1px solid var(--borde); border-radius: 6px; font-size: 15px; background: #fff; color: var(--texto); }
button.principal { background: var(--primario); color: #fff; border: 0; padding: 10px 18px; border-radius: 6px; font-size: 15px; cursor: pointer; margin-top: 16px; }
button.principal:hover { background: var(--primario-hover); }
button.principal:disabled { background: #9fb3c8; cursor: not-allowed; }
.mensaje { padding: 10px 12px; border-radius: 6px; margin-top: 14px; font-size: 14px; white-space: pre-line; }
.mensaje.ok { background: var(--ok-fondo); color: var(--ok); }
.mensaje.error { background: var(--error-fondo); color: var(--error); }
.mensaje.aviso { background: var(--aviso-fondo); color: var(--aviso); }
.oculto { display: none; }
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.dato { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; }
.dato .n { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dato .t { font-size: 12px; color: var(--suave); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--borde); }
th { color: var(--suave); font-weight: 500; font-size: 12px; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-scroll { overflow-x: auto; }
.login { max-width: 380px; margin: 60px auto; }
.progreso { height: 6px; background: var(--borde); border-radius: 3px; overflow: hidden; margin-top: 14px; }
.progreso div { height: 100%; width: 0; background: var(--primario); transition: width .2s; }