/* Interfaz de la app (pensada primero para celular, se amplía en computador) */
:root { --azul: #1d3a5f; --naranja: #d9822b; --borde: #d0d7de; --suave: #f4f6f8; --texto: #1f2328; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto); background: #eef1f4; margin: 0; }

.barra { background: var(--azul); color: #fff; padding: 10px 16px; display: flex; gap: 10px; align-items: center;
  position: sticky; top: 0; z-index: 10; padding-top: max(10px, env(safe-area-inset-top)); }
.barra img { width: 34px; height: 34px; border-radius: 6px; background: #fff; object-fit: contain; }
.barra .marca { font-size: 1.05rem; }
.barra .menu { margin-left: auto; display: flex; gap: 4px; }
.barra .menu a { color: #fff; text-decoration: none; font-weight: 600; padding: 8px 10px; border-radius: 6px; }
.barra .menu a:hover { background: rgba(255,255,255,.12); }

.contenedor { max-width: 960px; margin: 16px auto; padding: 0 12px; }
.tarjeta { background: #fff; border: 1px solid var(--borde); border-radius: 10px; padding: 16px; margin-bottom: 14px; }
h2 { margin: 0 0 12px; font-size: 1.05rem; color: var(--azul); }
.aviso { background: #fff; border-left: 4px solid var(--naranja); border-radius: 6px; padding: 10px 14px; margin-bottom: 14px; }

.rejilla { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 700px) {
  .rejilla { grid-template-columns: 1fr 1fr; }
  .rejilla .ancho { grid-column: 1 / -1; }
  .rejilla.tres { grid-template-columns: 1fr 1fr 1.4fr; }
  .contenedor { padding: 0 20px; margin-top: 24px; }
  .tarjeta { padding: 22px; }
}
label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; color: #444; }
/* 16px en los campos evita que el iPhone haga zoom al tocarlos */
input, textarea { width: 100%; padding: 11px 10px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; font-size: 16px; background: #fff; }
input:focus, textarea:focus { outline: 2px solid var(--azul); border-color: transparent; }
textarea { resize: vertical; }
.ayuda { font-size: .82rem; color: #57606a; }
.ayuda code { background: var(--suave); padding: 1px 4px; border-radius: 4px; }
.check { display: flex; gap: 10px; align-items: center; margin-top: 12px; font-weight: 500; }
.check input { width: 22px; height: 22px; }

.item { border: 1px solid var(--borde); border-radius: 8px; padding: 12px; margin-bottom: 12px; background: #fafbfc; }
.item > label { margin-top: 10px; }
.item .rejilla { margin-top: 10px; }
.item-cab { display: flex; justify-content: space-between; align-items: center; }
.item-total { text-align: right; margin-top: 10px; }

.resumen { margin-top: 14px; border-radius: 8px; overflow: hidden; border: 1px solid var(--borde); }
.resumen div { display: flex; justify-content: space-between; gap: 10px; padding: 10px 12px; background: #e6eef7; color: var(--azul); }
.resumen div.naranja { background: #fdf1e3; color: var(--naranja); }

.btn { background: var(--azul); color: #fff; border: 0; border-radius: 8px; padding: 11px 18px; font: inherit; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-block; text-align: center; }
.btn.sec { background: #fff; color: var(--azul); border: 1px solid var(--azul); }
.btn.peq { padding: 6px 12px; font-size: .85rem; }
.btn.grande { padding: 14px 22px; font-size: 1.05rem; }
.barra-enviar { position: sticky; bottom: 0; background: linear-gradient(transparent, #eef1f4 30%); padding: 16px 0 max(16px, env(safe-area-inset-bottom)); }
.barra-enviar .btn { width: 100%; }
@media (min-width: 700px) { .barra-enviar { text-align: right; } .barra-enviar .btn { width: auto; } }

.acciones-doc { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 0; }
@media (max-width: 640px) { .acciones-doc .btn { flex: 1; } }

/* Historial: tabla en computador, tarjetas en celular */
.lista { width: 100%; border-collapse: collapse; }
.lista th, .lista td { padding: 10px 8px; border-bottom: 1px solid var(--borde); text-align: left; }
.lista th { background: var(--suave); font-size: .85rem; }
.lista .num { text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
  .lista thead { display: none; }
  .lista tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
  .lista td { border: 0; padding: 0; }
  .lista td.oculto-movil { display: none; }
}

.login { max-width: 380px; margin: 10vh auto; }
.login img { display: block; width: 120px; margin: 0 auto 10px; }
.error { color: #b42318; font-weight: 600; }

@media print { .no-imprimir { display: none !important; } }

/* Verificación en dos pasos */
.qr { max-width: 240px; margin: 8px auto; background: #fff; }
.qr svg { width: 100%; height: auto; display: block; }
.secreto { display: inline-block; margin-top: 4px; font-size: 15px; letter-spacing: 1px; word-break: break-all; }
.respaldos { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.respaldos code { display: block; text-align: center; background: var(--suave); padding: 10px; border-radius: 6px; font-size: 17px; letter-spacing: 1px; }