/* public/styles.css — móvil primero */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #f7f5f2; color: #2b2b2b; }
header { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; background: #1e3a2f; color: #fff; }
header h1 { font-size: 1.1rem; margin: 0; }
main { padding: 1rem; max-width: 720px; margin: 0 auto; }
.oculto { display: none !important; }

#pasos { display: flex; gap: .5rem; padding: .6rem 1rem; font-size: .8rem; color: #888; }
#pasos .paso.activo { color: #1e3a2f; font-weight: 700; }

.intro { color: #555; }
#dropzone { border: 2px dashed #b5ae9f; border-radius: 12px; padding: 2rem 1rem; text-align: center; background: #fff; }
#dropzone.encima { border-color: #1e3a2f; background: #eef5f1; }
#lista-ficheros { list-style: none; padding: 0; font-size: .9rem; }
#lista-ficheros li { padding: .3rem 0; border-bottom: 1px solid #eee; }

.btn { display: inline-block; border: 1px solid #1e3a2f; color: #1e3a2f; background: #fff; padding: .6rem 1.2rem; border-radius: 8px; font-size: 1rem; cursor: pointer; }
.btn.primario { background: #1e3a2f; color: #fff; }
.btn:disabled { opacity: .4; cursor: default; }
.ghost { background: none; border: none; color: inherit; text-decoration: underline; cursor: pointer; font-size: .9rem; }
.fila { display: flex; gap: .5rem; flex-wrap: wrap; margin: .8rem 0; align-items: center; }
.fila input, .fila select { flex: 1; min-width: 140px; padding: .5rem; border: 1px solid #ccc; border-radius: 6px; }

.estado { font-size: .9rem; color: #555; }
.error { color: #b00020; font-size: .9rem; }
.aviso { background: #fff3cd; padding: .6rem 1rem; font-size: .9rem; }
.panel { background: #fff; border: 1px solid #e2ddd2; border-radius: 10px; padding: .8rem; margin: .8rem 0; }
.leyenda { font-size: .8rem; color: #777; }

/* Tabla de revisión */
.cat-bloque { margin: 1rem 0; }
.cat-bloque h3 input { font-size: 1rem; font-weight: 700; border: none; background: transparent; width: 100%; }
.producto { display: grid; grid-template-columns: 1fr 84px; gap: .3rem; padding: .5rem; border-bottom: 1px solid #eee; background: #fff; }
.producto.duda { background: #fff8e1; }
.producto input { border: 1px solid transparent; border-radius: 4px; padding: .2rem .3rem; font: inherit; width: 100%; background: transparent; }
.producto input:not([readonly]):hover, .producto input:not([readonly]):focus { border-color: #bbb; background: #fff; }
.producto .precio { text-align: right; }
.producto .notas { grid-column: 1 / -1; font-size: .8rem; color: #8a6d00; }
.producto .variantes { grid-column: 1 / -1; font-size: .85rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.producto .variantes span { display: inline-flex; gap: .2rem; align-items: center; }
.producto .variantes input.v-precio { width: 64px; text-align: right; }
.producto .existe { grid-column: 1 / -1; color: #b00020; font-size: .75rem; }
.producto label.duda-toggle { grid-column: 1 / -1; font-size: .75rem; color: #8a6d00; }

/* Vista previa carta QR */
.carta-qr { background: #fffdf8; border: 1px solid #e8dfc8; border-radius: 14px; padding: 1.2rem; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.carta-qr h4 { margin: 1rem 0 .4rem; font-variant: small-caps; letter-spacing: .05em; border-bottom: 1px solid #d9cfae; padding-bottom: .2rem; color: #5c4d1f; }
.carta-qr .plato { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem 0; font-size: .95rem; }
.carta-qr .plato .nombre { flex: 1; }
.carta-qr .plato .pts { border-bottom: 2px dotted #cbbd91; flex: 0 1 40px; margin-bottom: .3rem; }
.carta-qr .vlinea { font-size: .8rem; color: #777; padding-left: .8rem; }
.cta { margin: 1.2rem 0; padding: 1rem; background: #1e3a2f; color: #fff; border-radius: 12px; text-align: center; }
.cta a { color: #ffd97a; font-weight: 700; }

dialog { border: none; border-radius: 12px; padding: 1.2rem; width: min(92vw, 360px); }
dialog::backdrop { background: rgba(0,0,0,.4); }
dialog input { width: 100%; padding: .5rem; margin: .3rem 0; border: 1px solid #ccc; border-radius: 6px; }

@media (min-width: 640px) {
  header h1 { font-size: 1.4rem; }
  .producto { grid-template-columns: 1fr 110px; }
}