/* ImpreBox - Impresiones Faciles : hoja de estilo de las paginas del cliente */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg:#eef2f8; --card:#ffffff; --ink:#0f172a; --muted:#5c6b84;
  --brand:#1d4ed8; --brand-soft:#dbe6ff; --line:#d3dcea;
  --ok:#0f9d6b; --ok-soft:#dcf7ec; --err:#d13b3b; --err-soft:#fde5e5;
}

body{
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg); color:var(--ink); min-height:100vh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}

.top{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--card); border-bottom:2px solid var(--line); padding:12px 16px;
}
.logo{ height:38px; width:auto; display:block; }
.pill{
  background:var(--brand-soft); color:var(--brand); font-weight:800; font-size:12px;
  letter-spacing:.5px; padding:6px 12px; border-radius:999px; white-space:nowrap;
}

.caja{
  flex:1; width:100%; max-width:560px; margin:0 auto; padding:20px 16px 40px;
}
.caja h1{ font-size:24px; line-height:1.2; margin-bottom:8px; }
.sub{ color:var(--muted); font-size:15px; line-height:1.5; margin-bottom:16px; }
.chico{ color:var(--muted); font-size:13px; margin-top:8px; }

.reloj{
  display:flex; align-items:center; justify-content:space-between; background:var(--card);
  border:2px solid var(--line); border-radius:12px; padding:10px 14px; margin-bottom:16px;
  font-size:14px; color:var(--muted);
}
.reloj b{ font-size:20px; color:var(--brand); font-variant-numeric:tabular-nums; }

form{ display:flex; flex-direction:column; gap:14px; }
.campo{ display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:700; }
.campo span{ color:var(--muted); font-weight:700; }
input[type=file], input[type=number], select{
  width:100%; padding:12px; border:2px solid var(--line); border-radius:12px; background:var(--card);
  font-size:16px; color:var(--ink); font-family:inherit;
}
.archivo input[type=file]{ padding:10px; }
.fila{ display:flex; gap:12px; }
.fila .campo{ flex:1; }
.check{ display:flex; align-items:center; gap:10px; font-size:15px; background:var(--card);
  border:2px solid var(--line); border-radius:12px; padding:12px; }
.check input{ width:20px; height:20px; }

.tarifas{
  display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted);
  background:var(--card); border:2px dashed var(--line); border-radius:12px; padding:12px;
}
.tarifas b{ color:var(--ink); }
.nota{ font-size:12.5px; color:var(--muted); line-height:1.5; }

.btn-primario{
  display:block; text-align:center; text-decoration:none; background:var(--brand); color:#fff;
  border:0; border-radius:14px; padding:16px 20px; font-size:18px; font-weight:800;
  font-family:inherit; cursor:pointer; letter-spacing:.3px;
}
.btn-primario:disabled{ opacity:.6; }

.aviso{ background:var(--card); border:2px solid var(--line); border-radius:16px; padding:18px; }
.aviso.error{ border-color:#f3c9c9; background:var(--err-soft); }
.aviso h1{ font-size:22px; margin-bottom:8px; }
.aviso p{ color:var(--muted); line-height:1.55; margin-bottom:12px; }

.estado-grande{
  width:96px; height:96px; border-radius:50%; background:var(--brand-soft); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:800;
  margin:4px auto 14px;
}
.estado-grande.ok{ background:var(--ok-soft); color:var(--ok); }
.estado-grande.error{ background:var(--err-soft); color:var(--err); }
.caja > h1, .caja > .sub{ text-align:center; }

.progreso{ height:12px; border-radius:999px; background:var(--line); overflow:hidden; margin:16px 0 6px; }
.barra{ height:100%; background:var(--brand); border-radius:999px; transition:width .4s linear; }

.resumen{
  width:100%; border-collapse:collapse; margin-top:18px; background:var(--card);
  border:2px solid var(--line); border-radius:12px; overflow:hidden; font-size:14px;
}
.resumen td{ padding:10px 12px; border-bottom:1px solid var(--line); }
.resumen tr:last-child td{ border-bottom:0; }
.resumen td:first-child{ color:var(--muted); width:45%; }

.pie{ text-align:center; color:var(--muted); font-size:12px; padding:14px; }