:root {
  --marino: #1b2a4a; --dorado: #b8963e; --fondo: #f5f6f8; --tarjeta: #fff; --texto: #1f2430;
  --suave: #5b6475; --borde: #d9dde5; --ok: #1f7a4d; --error: #b3261e; --D: #c0392b; --I: #d68910; --S: #1f7a4d; --C: #2e5c9a;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; background: var(--fondo); color: var(--texto); line-height: 1.45; }
header { background: var(--marino); color: #fff; padding: 14px 16px; border-bottom: 3px solid var(--dorado); }
header .ancho { display: flex; align-items: center; gap: 14px; }
header img { height: 42px; background: #fff; border-radius: 4px; padding: 3px; }
header h1 { font-size: 1.2rem; margin: 0; }
header p { margin: 2px 0 0; font-size: .85rem; opacity: .85; }
.ancho { max-width: 920px; margin: 0 auto; }
main { padding: 16px; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
h2 { font-size: 1.05rem; color: var(--marino); margin: 0 0 10px; border-left: 4px solid var(--dorado); padding-left: 8px; }
label { display: block; font-size: .9rem; font-weight: 600; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=tel], input[type=password] { width: 100%; padding: 9px 10px; border: 1px solid var(--borde); border-radius: 6px; font-size: 1rem; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
button { background: var(--marino); color: #fff; border: 0; border-radius: 6px; padding: 10px 18px; font-size: 1rem; cursor: pointer; }
button.sec { background: #fff; color: var(--marino); border: 1px solid var(--marino); }
button:disabled { opacity: .5; cursor: default; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { border-bottom: 1px solid var(--borde); padding: 7px 6px; text-align: left; vertical-align: top; }
th { background: #eef0f4; color: var(--marino); }
.grupo td.op { width: 70px; text-align: center; }
.grupo input[type=radio] { width: 20px; height: 20px; cursor: pointer; }
.grupo tr.mas { background: #e8f4ec; }
.grupo tr.menos { background: #fbeceb; }
.aviso { padding: 10px 12px; border-radius: 6px; margin: 10px 0; }
.aviso.error { background: #fbeceb; color: var(--error); }
.aviso.ok { background: #e8f4ec; color: var(--ok); }
.pendiente { outline: 2px solid var(--error); }
.dim { display: inline-block; min-width: 26px; text-align: center; font-weight: 700; color: #fff; border-radius: 4px; padding: 1px 6px; }
.dim.D { background: var(--D); } .dim.I { background: var(--I); } .dim.S { background: var(--S); } .dim.C { background: var(--C); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.barra { position: relative; height: 14px; background: #eef0f4; border-radius: 3px; }
.barra span { position: absolute; top: 0; height: 14px; border-radius: 3px; }
.barra::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; border-left: 1px solid var(--suave); }
.clic { cursor: pointer; } .clic:hover { background: #f2f5fb; }
.suave { color: var(--suave); font-size: .88rem; }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@media (max-width: 600px) { .grupo td.op { width: 52px; } th, td { padding: 6px 4px; } }
@media print {
  body { background: #fff; } .no-imprimir { display: none !important; }
  .tarjeta { border: 0; padding: 0 0 8px; break-inside: avoid; }
  header { background: #fff; color: var(--marino); }
  .dim, .barra span { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}