/* Gestión Balbuena — pensado para el móvil, al sol, con dedos gordos */
:root {
  --fondo: #f1f4ee;
  --papel: #ffffff;
  --tinta: #1b2a21;
  --suave: #5b6b60;
  --linea: #d5ddd3;
  --hoja: #2c5e2e;      /* verde del logo */
  --hoja-osc: #1d4320;
  --flor: #b3242c;      /* rojo del logo */
  --lima: #d8ea4c;      /* lima de la web */
  --aviso: #a86a00;
  --azul: #245a8f;
  --r: 14px;
  --letra: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sombra: 0 1px 0 rgba(27, 42, 33, .08), 0 6px 18px -10px rgba(27, 42, 33, .25);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font: 500 18px/1.45 var(--letra);
  font-variant-numeric: tabular-nums;
}
a { color: var(--hoja); }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }

/* barra de arriba */
.barra {
  position: sticky; top: 0; z-index: 10; background: var(--hoja-osc); color: #fff;
  display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 60px;
}
.barra a.atras {
  display: inline-flex; align-items: center; gap: 6px; color: #fff; text-decoration: none; font-weight: 700;
  background: rgba(255,255,255,.12); border-radius: 999px; padding: 8px 14px 8px 10px; font-size: 17px;
}
.barra .titulo { font-weight: 800; font-size: 19px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra .quien { font-size: 15px; opacity: .85; white-space: nowrap; }
.barra .quien a { color: #fff; }
.barra img { height: 40px; width: auto; }

main { max-width: 860px; margin: 0 auto; padding: 18px 16px 120px; }
h1 { font-size: 28px; line-height: 1.15; margin: 6px 0 16px; font-weight: 800; letter-spacing: -.01em; }
h2 { font-size: 21px; margin: 28px 0 10px; font-weight: 800; }
p { margin: 0 0 12px; }
.suave { color: var(--suave); }
.peq { font-size: 15px; }

/* inicio: baldosas grandes */
.baldosas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.baldosa {
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 132px;
  background: var(--papel); border-radius: var(--r); padding: 16px; text-decoration: none; color: var(--tinta);
  box-shadow: var(--sombra); border: 2px solid transparent;
}
.baldosa:active { transform: scale(.98); }
.baldosa svg { width: 40px; height: 40px; color: var(--hoja); }
.baldosa b { font-size: 20px; line-height: 1.15; }
.baldosa small { display: block; color: var(--suave); font-size: 15px; font-weight: 500; margin-top: 2px; }
.baldosa.grande { grid-column: 1 / -1; background: var(--hoja); color: #fff; min-height: 110px; flex-direction: row; align-items: center; justify-content: flex-start; }
.baldosa.grande svg { color: var(--lima); width: 48px; height: 48px; flex: none; }
.baldosa.grande small { color: #dfe9d9; }
.baldosa .num { font-size: 15px; font-weight: 800; background: var(--lima); color: var(--tinta); border-radius: 999px; padding: 2px 10px; align-self: flex-start; }

/* botones */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  min-height: 60px; padding: 12px 18px; border-radius: var(--r); border: 2px solid var(--hoja);
  background: var(--papel); color: var(--hoja); font: 800 19px/1.2 var(--letra);
  text-decoration: none; cursor: pointer; text-align: center;
}
.btn svg { width: 26px; height: 26px; flex: none; }
.btn.prin { background: var(--hoja); color: #fff; }
.btn.enorme { min-height: 76px; font-size: 22px; }
.btn.rojo { border-color: var(--flor); color: var(--flor); }
.btn.rojo.prin { background: var(--flor); color: #fff; }
.btn.wa { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }
.btn.gris { border-color: var(--linea); color: var(--tinta); }
.btn[disabled] { opacity: .5; }
.botones { display: grid; gap: 10px; margin: 16px 0; }
.botones.dos { grid-template-columns: 1fr 1fr; }

/* formularios */
label.campo { display: block; margin: 0 0 14px; font-weight: 700; font-size: 16px; }
label.campo span { display: block; margin-bottom: 6px; }
input, select, textarea {
  width: 100%; font: 500 19px/1.3 var(--letra); color: var(--tinta);
  background: var(--papel); border: 2px solid var(--linea); border-radius: 12px; padding: 13px 14px; min-height: 56px;
}
input:focus, select:focus, textarea:focus { border-color: var(--hoja); outline: none; box-shadow: 0 0 0 3px rgba(44,94,46,.18); }
textarea { min-height: 90px; }
.fila { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.caja { background: var(--papel); border-radius: var(--r); padding: 16px; box-shadow: var(--sombra); margin-bottom: 14px; }

/* elegir con botones gordos (fecha, repartidor, sí/no) */
.elige { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.elige input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.elige label { flex: 1 1 auto; min-width: 30%; text-align: center; padding: 14px 12px; border: 2px solid var(--linea);
  background: var(--papel); border-radius: 12px; font-weight: 800; cursor: pointer; }
.elige input:checked + label { background: var(--hoja); border-color: var(--hoja); color: #fff; }
.elige input:focus-visible + label { outline: 3px solid var(--azul); }

/* etiquetas: Sí · No · cuántas */
.si-no { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; margin-top: 10px; align-items: stretch; }
.si-no .elige { margin: 0; display: flex; }
.si-no .elige label { min-width: 0; width: 100%; display: grid; place-items: center; }
.si-no input[inputmode] { font-size: 22px; font-weight: 800; text-align: center; padding: 8px; }
.si-no input[disabled] { background: #eef1ec; }

/* listas */
.lista { display: grid; gap: 10px; }
.item {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  background: var(--papel); border-radius: var(--r); padding: 14px 16px; text-decoration: none; color: var(--tinta);
  box-shadow: var(--sombra); border-left: 6px solid var(--linea);
}
.item b { font-size: 19px; }
.item .der { text-align: right; font-weight: 800; font-size: 19px; white-space: nowrap; }
.item .sub { grid-column: 1 / -1; color: var(--suave); font-size: 15px; }
.item.borrador { border-left-color: #9aa59d; }
.item.enviado { border-left-color: var(--azul); }
.item.aceptado { border-left-color: var(--hoja); }
.item.rechazado, .item.anulada { border-left-color: var(--flor); }
.item.en-reparto, .item.pendiente { border-left-color: var(--aviso); }
.item.entregado, .item.facturado, .item.entregada { border-left-color: var(--tinta); }

.estado { display: inline-block; font-size: 14px; font-weight: 800; border-radius: 999px; padding: 3px 10px; background: #e7ece5; color: var(--tinta); white-space: nowrap; }
.estado.enviado { background: #dce8f4; color: var(--azul); }
.estado.aceptado { background: #dbeed9; color: var(--hoja-osc); }
.estado.rechazado, .estado.anulada { background: #f6dcdd; color: var(--flor); }
.estado.en-reparto, .estado.pendiente { background: #f7ead0; color: #7a4d00; }
.estado.entregado, .estado.facturado, .estado.entregada { background: var(--tinta); color: #fff; }

.filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.filtros a { flex: none; padding: 10px 16px; border-radius: 999px; background: var(--papel); color: var(--tinta); text-decoration: none; font-weight: 700; border: 2px solid var(--linea); font-size: 16px; }
.filtros a.si { background: var(--tinta); border-color: var(--tinta); color: #fff; }

.buscar { position: sticky; top: 60px; z-index: 5; background: var(--fondo); padding: 6px 0 10px; }

/* tabla de líneas */
table.lineas { width: 100%; border-collapse: collapse; font-size: 17px; }
table.lineas td { padding: 10px 4px; border-bottom: 1px solid var(--linea); vertical-align: top; }
table.lineas td.n { text-align: right; white-space: nowrap; }
table.lineas tr.tot td { border: 0; font-weight: 800; }
table.lineas tr.gran td { font-size: 22px; font-weight: 800; border-top: 3px solid var(--tinta); }

/* tarjeta de entrega (repartidor) */
.entrega { background: var(--papel); border-radius: 18px; box-shadow: var(--sombra); padding: 18px; margin-bottom: 18px; border-top: 8px solid var(--aviso); }
.entrega.hecha { border-top-color: var(--hoja); opacity: .8; }
.entrega h2 { margin: 0 0 4px; font-size: 24px; }
.entrega .dir { font-size: 18px; margin-bottom: 10px; }
.entrega ul { margin: 8px 0 14px; padding-left: 22px; }
.entrega li { margin-bottom: 4px; }
.hora { display: inline-block; background: var(--lima); color: var(--tinta); font-weight: 800; border-radius: 8px; padding: 2px 10px; margin-bottom: 8px; }

/* firma: el momento importante */
.hoja-firma { background: var(--papel); border-radius: 18px; box-shadow: var(--sombra); padding: 14px; }
.lienzo { position: relative; border: 2px dashed var(--hoja); border-radius: 14px; background: #fff; touch-action: none; }
.lienzo canvas { display: block; width: 100%; height: 240px; border-radius: 12px; }
.lienzo .linea-firma { position: absolute; left: 22px; right: 22px; bottom: 54px; border-bottom: 2px solid #b8c4b9; pointer-events: none; }
.lienzo .aqui { position: absolute; left: 22px; bottom: 22px; color: var(--suave); font-weight: 700; pointer-events: none; font-size: 15px; }
.lienzo.firmado .aqui { display: none; }

/* mensajes */
.aviso { border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px; font-weight: 600; }
.aviso.ok { background: #dbeed9; color: var(--hoja-osc); }
.aviso.mal { background: #f6dcdd; color: #7d1219; }
.aviso.info { background: #fff6d6; color: #5d4500; }
.hecho { text-align: center; padding: 30px 10px 10px; }
.hecho .circulo { width: 110px; height: 110px; border-radius: 50%; background: var(--hoja); color: #fff; display: grid; place-items: center; margin: 0 auto 18px; }
.hecho .circulo svg { width: 64px; height: 64px; }
@media (prefers-reduced-motion: no-preference) {
  .hecho .circulo { animation: aparece .45s cubic-bezier(.2,.9,.3,1.3) both; }
  @keyframes aparece { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
}

/* entrar: nombres grandes + teclado */
.nombres { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.nombres button { min-height: 96px; font: 800 21px var(--letra); border-radius: var(--r); border: 2px solid var(--linea); background: var(--papel); color: var(--tinta); cursor: pointer; box-shadow: var(--sombra); }
.nombres button small { display: block; font-size: 14px; font-weight: 600; color: var(--suave); }
.puntos { display: flex; gap: 16px; justify-content: center; margin: 18px 0 22px; }
.puntos i { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--hoja); }
.puntos i.lleno { background: var(--hoja); }
.teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 360px; margin: 0 auto; }
.teclado button { min-height: 72px; font: 800 30px var(--letra); border-radius: 16px; border: 0; background: var(--papel); color: var(--tinta); box-shadow: var(--sombra); cursor: pointer; }
.teclado button:active { background: var(--lima); }
.teclado button.vacio { visibility: hidden; }

.total-vivo { position: fixed; left: 0; right: 0; bottom: 0; background: var(--tinta); color: #fff; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); z-index: 20; }
.total-vivo .dentro { max-width: 860px; margin: 0 auto; display: flex; gap: 12px; align-items: center; }
.total-vivo .cifra { flex: 1; font-size: 15px; }
.total-vivo .cifra b { display: block; font-size: 26px; }
.total-vivo .btn { width: auto; min-width: 46%; }

.linea-ed { background: var(--papel); border-radius: var(--r); padding: 12px; box-shadow: var(--sombra); margin-bottom: 10px; display: grid; gap: 8px; grid-template-columns: 1fr 1fr 1fr; }
.linea-ed .ancho { grid-column: 1 / -1; }
.linea-ed label { font-size: 14px; font-weight: 700; }
.linea-ed .quitar { grid-column: 1 / -1; background: none; border: 0; color: var(--flor); font: 700 16px var(--letra); text-align: right; cursor: pointer; padding: 4px; }
.sugerencias { display: grid; gap: 6px; margin-top: 6px; }
.sugerencias button { text-align: left; background: #f6f9f3; border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; font: 600 16px var(--letra); color: var(--tinta); cursor: pointer; }
.sugerencias button small { color: var(--suave); display: block; font-weight: 500; }

.vacio-txt { text-align: center; padding: 40px 10px; color: var(--suave); }
.stock0 { color: var(--flor); font-weight: 800; }
details.mas summary { cursor: pointer; font-weight: 700; color: var(--hoja); padding: 10px 0; }

@media (min-width: 720px) {
  .baldosas { grid-template-columns: repeat(3, 1fr); }
  .baldosa.grande { grid-column: span 3; }
  .nombres { grid-template-columns: repeat(3, 1fr); }
}
@media print {
  .barra, .no-imprimir, .total-vivo { display: none !important; }
  body { background: #fff; }
}