*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:Ubuntu,"Trebuchet MS",Verdana,sans-serif;color:#1d2a35;
  background:#0f6fb4 linear-gradient(180deg,#5cc3f2 0%,#1f8fd6 55%,#0e5f9c 100%) fixed;
  display:flex;align-items:center;justify-content:center;padding:24px 16px}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.10;
  background-image:linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%),
  linear-gradient(45deg,#fff 25%,transparent 25%,transparent 75%,#fff 75%);
  background-size:24px 24px;background-position:0 0,12px 12px}
.marco{position:relative;width:100%;max-width:400px;background:#fff;border:2px solid #10304a;border-radius:10px;
  box-shadow:0 4px 0 #10304a,0 18px 40px rgba(0,0,0,.25);overflow:hidden}
.marco.ancho{max-width:960px}
.franja{background:linear-gradient(#3fa6ea,#1d7fc6);color:#fff;border-bottom:2px solid #10304a;padding:10px 14px;
  font-weight:700;font-size:15px;text-shadow:0 1px 0 rgba(0,0,0,.35);display:flex;align-items:center;gap:8px}
.franja .x{margin-left:auto;font-weight:400;font-size:12px;opacity:.9}
.franja a{color:#fff}
.cuerpo{padding:22px 22px 24px}
.logo{font-size:34px;font-weight:800;text-align:center;letter-spacing:.5px;color:#1d7fc6;
  text-shadow:0 2px 0 #10304a,0 -1px 0 #10304a,2px 0 0 #10304a,-2px 0 0 #10304a;margin:4px 0 6px}
.logo b{color:#ffcc1f}
.sub{text-align:center;color:#56687a;font-size:14px;margin:0 0 18px;line-height:1.4}
label{display:block;font-size:13px;font-weight:700;margin:0 0 6px}
input[type=text],input[type=password],input[type=number]{width:100%;font:inherit;font-size:16px;padding:11px 12px;
  border:2px solid #b9c7d3;border-radius:7px;background:#f6f9fb;outline:none}
input:focus{border-color:#1d7fc6;background:#fff}
input.codigo{text-align:center;text-transform:uppercase;letter-spacing:3px;font-weight:700;font-size:20px}
.btn{display:inline-block;width:100%;margin-top:14px;font:inherit;font-weight:700;font-size:16px;color:#fff;cursor:pointer;
  background:linear-gradient(#5fcf3c,#37a51e);border:2px solid #1f5e12;border-radius:7px;padding:11px;
  box-shadow:0 3px 0 #1f5e12;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #1f5e12}
.btn.chico{width:auto;margin:0;padding:5px 10px;font-size:13px;box-shadow:0 2px 0 #1f5e12}
.btn.gris{background:linear-gradient(#f2f4f6,#d6dde3);color:#1d2a35;border-color:#7d8c99;box-shadow:0 2px 0 #7d8c99;text-shadow:none}
.btn.rojo{background:linear-gradient(#f06a5b,#cf3b2c);border-color:#7a1d14;box-shadow:0 2px 0 #7a1d14}
.error{background:#fde8e6;border:2px solid #e3887e;color:#8a2116;border-radius:7px;padding:9px 11px;font-size:14px;margin-bottom:14px}
.bien{background:#e7f7e0;border:2px solid #8bcf73;color:#25601a;border-radius:7px;padding:9px 11px;font-size:14px;margin-bottom:14px}
.nota{text-align:center;font-size:12px;color:#7a8a98;margin-top:16px}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.fila>div{flex:1 1 160px}
table{width:100%;border-collapse:collapse;font-size:14px;margin-top:16px}
th{text-align:left;background:#eef3f7;border-bottom:2px solid #c7d3dd;padding:8px;font-size:12px;text-transform:uppercase;color:#56687a}
td{border-bottom:1px solid #e3e9ee;padding:8px;vertical-align:middle}
tr.off td{opacity:.5}
.cod{font-family:Consolas,monospace;font-weight:700;letter-spacing:1px;white-space:nowrap}
.acciones{display:flex;gap:6px;flex-wrap:wrap}
.acciones form{margin:0}
.tabla{overflow-x:auto}
.nuevo{font-size:26px;text-align:center;font-family:Consolas,monospace;font-weight:800;letter-spacing:3px;
  background:#fff8d6;border:2px dashed #e0b400;border-radius:8px;padding:12px;margin:6px 0 4px;user-select:all}
.disp{font-size:12px;color:#56687a;margin:4px 0 0;padding-left:16px}
.disp li{margin:2px 0;white-space:nowrap}