:root {
  --azul: #2b3478; --azul-2: #3d4799; --tinta: #1d2033; --gris: #6b6f80; --linea: #e3e5ee;
  --fondo: #f6f7fb; --blanco: #fff; --ok: #1e7d4f; --aviso: #b54708; --alerta: #b42318;
  --ok-bg: #e8f5ee; --aviso-bg: #fff4e5; --alerta-bg: #fdecea; --radio: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--tinta); background: var(--fondo); }
a { color: var(--azul-2); }
header { background: var(--azul); color: #fff; }
header .dentro { max-width: 1100px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; gap: 16px; }
header .marca { font-weight: 700; letter-spacing: .02em; }
header .marca span { font-weight: 400; opacity: .75; margin-left: 8px; }
header nav { margin-left: auto; display: flex; gap: 16px; font-size: 14px; }
header nav a { color: #fff; opacity: .85; text-decoration: none; }
main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }
h1 { font-size: 24px; margin: 0 0 4px; }
h2 { font-size: 18px; margin: 28px 0 12px; }
.sub { color: var(--gris); margin: 0 0 20px; }
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; }
.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 6px; }
label small { font-weight: 400; color: var(--gris); }
input[type=text], input[type=password], input[type=email], textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #cfd3e1; border-radius: 8px; font: inherit; background: #fff; }
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus { outline: 2px solid var(--azul-2); outline-offset: -1px; border-color: transparent; }
.zona-archivos { border: 2px dashed #c6cbe0; border-radius: var(--radio); padding: 18px; text-align: center; background: #fafbff; }
.zona-archivos.sobre { border-color: var(--azul-2); background: #eef0fb; }
.zona-archivos p { margin: 6px 0 0; color: var(--gris); font-size: 13px; }
.lista-archivos { list-style: none; padding: 0; margin: 10px 0 0; text-align: left; font-size: 14px; }
.lista-archivos li { padding: 4px 0; border-bottom: 1px solid var(--linea); }
button, .boton { display: inline-block; background: var(--azul); color: #fff; border: 0; border-radius: 8px; padding: 11px 20px;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
button:hover, .boton:hover { background: var(--azul-2); }
.boton.sec { background: #fff; color: var(--azul); border: 1px solid #c6cbe0; }
.mensajes { list-style: none; padding: 0; margin: 0 0 16px; }
.mensajes li { background: var(--aviso-bg); color: var(--aviso); padding: 10px 14px; border-radius: 8px; margin-bottom: 6px; }
table.encargos { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
table.encargos th, table.encargos td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linea); font-size: 14px; vertical-align: top; }
table.encargos th { background: #f0f2f8; font-weight: 600; color: var(--gris); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.e-terminado { background: var(--ok-bg); color: var(--ok); }
.e-procesando, .e-en-cola { background: #eef0fb; color: var(--azul-2); }
.e-error { background: var(--alerta-bg); color: var(--alerta); }
.cifras span { margin-right: 10px; font-size: 13px; }
.c-alerta { color: var(--alerta); } .c-pendiente { color: var(--aviso); } .c-hecho { color: var(--ok); }
.estado-caja { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radio); background: #eef0fb; margin-bottom: 20px; }
.estado-caja.error { background: var(--alerta-bg); color: var(--alerta); }
.estado-caja.terminado { background: var(--ok-bg); color: var(--ok); }
.giro { width: 18px; height: 18px; border: 3px solid #c6cbe0; border-top-color: var(--azul); border-radius: 50%; animation: g 1s linear infinite; }
@keyframes g { to { transform: rotate(360deg); } }
.piezas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.pieza-res { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.pieza-res .vista { background: #eceef4; display: flex; gap: 6px; padding: 10px; overflow-x: auto; }
.pieza-res .vista img { max-height: 260px; background: #fff; border: 1px solid var(--linea); cursor: zoom-in; }
.pieza-res .pie { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; }
section.pieza { background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); padding: 16px 18px; margin-bottom: 14px; }
section.pieza h3 { margin: 0 0 6px; font-size: 16px; }
section.pieza h4 { margin: 12px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
section.pieza ul { margin: 0; padding-left: 20px; }
section.pieza li { margin: 3px 0; }
h4.alerta, ul.alerta { color: var(--alerta); } h4.pendiente { color: var(--aviso); } h4.hecho { color: var(--ok); }
ul.hecho { color: #344; }
.instrucciones { white-space: pre-wrap; background: #fafbff; border: 1px solid var(--linea); border-radius: 8px; padding: 12px; font-size: 14px; }
.nota { font-size: 13px; color: var(--gris); }
.visor { position: fixed; inset: 0; background: rgba(15, 18, 40, .85); display: none; align-items: center; justify-content: center; z-index: 10; cursor: zoom-out; }
.visor img { max-width: 95vw; max-height: 95vh; background: #fff; }
.visor.abierto { display: flex; }
@media (max-width: 760px) { .rejilla { grid-template-columns: 1fr; } table.encargos .ocultar { display: none; } }