:root {
  font: 100%/1.5 Arial, sans-serif;
  color: #29211c;
  background: #fff6e7;
}

* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(100%, 640px); margin: auto; padding: 24px 16px; }
h1 { color: #a02f1c; margin: 0; line-height: 1.2; }
h2 { font-size: 1.25rem; }
label { display: block; font-weight: bold; margin-bottom: 8px; }
input, button { font: inherit; border: 1px solid #705c4d; border-radius: 8px; padding: 10px 12px; }
input[type="password"],
#formulario-agenda input { width: 100%; margin-bottom: 12px; }
#agenda, #panel-pedidos, #panel-productos, #editor-categorias, #editor-horario, #panel-estadisticas { padding: 12px; margin: 16px 0; background: white; border-radius: 8px; }
#agenda > summary, #panel-pedidos > summary, #panel-productos > summary, #editor-categorias > summary, #editor-horario > summary, #panel-estadisticas > summary { font-weight: bold; cursor: pointer; }
.fila-categoria { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-bottom: 12px; }
.fila-categoria label { flex: 1 1 160px; min-width: 0; margin: 0; }
.fila-categoria input { display: block; width: 100%; }
.fila-categoria button { padding: 8px; }
.fila-categoria button:disabled { cursor: not-allowed; }
#categorias-estado:empty { display: none; }
.recordar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-weight: normal; }
.recordar input { margin: 0; }
button { background: #a02f1c; color: white; cursor: pointer; font-weight: bold; }
button:disabled { opacity: .65; cursor: wait; }
.fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; margin: 8px 0; border-radius: 8px; background: white; }
.fila span { display: block; }
.fila button { flex: 0 0 auto; max-width: 55%; }
.estado { font-size: .9rem; color: #5d493c; }
#salir { margin-top: 20px; }
#mensaje:empty { display: none; }

.editor-producto { margin: -4px 0 14px; padding: 8px 12px; border-radius: 8px; background: white; }
.editor-producto summary { cursor: pointer; }
.editor-producto form { margin-top: 12px; }
.editor-producto input,
.editor-producto textarea { display: block; width: 100%; margin: 4px 0 10px; }
.editor-producto textarea { font: inherit; padding: 8px; border: 1px solid #705c4d; border-radius: 8px; resize: vertical; }
.editor-producto p { margin-bottom: 0; }
.editor-producto p:empty { display: none; }

.turno-horario { margin: 0 0 12px; padding: 12px; border: 1px solid #c9c2bb; border-radius: 8px; }
.dias-turno, .horas-turno { display: flex; flex-wrap: wrap; gap: 10px; }
.dias-turno label { margin: 0; font-weight: normal; }
.horas-turno { margin-top: 12px; }
.horas-turno input { display: block; }
#formulario-horario > button { margin: 4px 4px 4px 0; }
#horario-estado:empty { display: none; }

#vista-pedidos { max-width: 100%; font: inherit; padding: 8px; margin-bottom: 8px; }
#pedidos-estado:empty { display: none; }
.pedido-cocina { margin: 12px 0; padding: 12px; border: 1px solid #c9c2bb; border-radius: 8px; }
.pedido-cocina h2, .pedido-cocina p { margin: 0 0 8px; }
.pedido-cocina li { margin-bottom: 8px; overflow-wrap: anywhere; }
.pedido-cocina small { display: block; }
.acciones-cocina { display: flex; flex-wrap: wrap; gap: 8px; }

#formulario-estadisticas { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
#formulario-estadisticas label { flex: 1 1 135px; margin: 0; }
#formulario-estadisticas input { display: block; width: 100%; }
.periodos-estadisticas { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.periodos-estadisticas button { background: white; color: #a02f1c; }
.periodos-estadisticas button:hover:not(:disabled) { background: #fff6e7; }
#estadisticas-estado:empty { display: none; }
#estadisticas-resumen, #estadisticas-cobros { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); }
#estadisticas-resumen > div, #estadisticas-cobros > div { background: #fff6e7; border-radius: 8px; padding: 10px; }
#estadisticas-resumen dt, #estadisticas-cobros dt { color: #5d493c; font-size: .9rem; }
#estadisticas-resumen dd, #estadisticas-cobros dd { margin: 0; font-size: 1.2rem; font-weight: bold; }
.detalle-estadisticas { margin: 16px 0; }
.detalle-estadisticas > summary { font-weight: bold; cursor: pointer; }
.tabla-estadisticas { overflow-x: auto; border: 1px solid #e5ddd3; border-radius: 8px; }
.detalle-estadisticas table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.detalle-estadisticas th, .detalle-estadisticas td {
  padding: 8px 10px;
  border-bottom: 1px solid #e5ddd3;
  text-align: right;
  white-space: nowrap;
}
.detalle-estadisticas th:first-child { text-align: left; }
.detalle-estadisticas thead, .detalle-estadisticas tbody tr:nth-child(even) { background: #fff6e7; }
.detalle-estadisticas tbody tr:last-child > * { border-bottom: 0; }

#catalogo-estado:empty { display: none; }
.formulario-catalogo fieldset { min-width: 0; margin: 0 0 12px; padding: 8px; border: 1px solid #c9c2bb; border-radius: 8px; }
.formulario-catalogo select { display: block; width: 100%; font: inherit; padding: 8px; }
.formulario-catalogo input[type="checkbox"] { display: inline; width: auto; margin-left: 8px; }
.opcion-catalogo { padding: 8px 0; margin-bottom: 8px; border-bottom: 1px solid #c9c2bb; }
.opcion-catalogo button { background: white; color: #a02f1c; }

#comanda-impresa { display: none; }

@media print {
  :root { color: black; background: white; }
  body.imprimiendo-comanda > main { display: none; }
  #comanda-impresa:not([hidden]) {
    display: block;
    max-width: 78mm;
    padding: 0 2mm;
    font-size: 11pt;
    overflow-wrap: anywhere;
  }
  #comanda-impresa .titulo-comanda { font-weight: bold; }
  #comanda-impresa h2 { font-size: 13pt; break-after: avoid; }
  #comanda-impresa ul { padding-left: 1.2em; }
  #comanda-impresa li { margin-bottom: 0.4em; break-inside: avoid; }
  #comanda-impresa small { display: block; font-size: 10pt; }
  #comanda-impresa .instrucciones-cocina { white-space: pre-wrap; }
}
#editor-entrega { padding: 12px; margin: 16px 0; background: white; border-radius: 8px; }
#editor-entrega > summary { font-weight: bold; cursor: pointer; }
#campos-entrega { min-width: 0; margin: 0; padding: 12px; border: 1px solid #c9c2bb; border-radius: 8px; }
#modo-entrega, #minimo-entrega { display: block; width: 100%; margin-bottom: 12px; font: inherit; }
#modo-entrega { padding: 8px; }
#campos-entrega > button { margin: 4px 4px 4px 0; }
#editor-entrega-estado:empty { display: none; }
#panel > details > h2 {
  margin: 20px 0 10px;
  padding-top: 12px;
  border-top: 1px solid #e5ddd3;
  color: #705c4d;
  font-size: 1.05rem;
}
#alta-producto > details { margin: 0 0 18px; border: 2px solid #b38321; }
#alta-producto > details > summary {
  padding: 12px;
  border-radius: 6px;
  background: #f5b841;
  color: #29211c;
  font-weight: bold;
}
#alta-producto > details > summary:hover { background: #ffd06b; }
.crear-producto { background: #f5b841; color: #29211c; border-color: #b38321; }
.crear-producto:hover { background: #ffd06b; }
.formulario-catalogo h3 { font-size: 1rem; margin: 18px 0 10px; color: #705c4d; }
.editor-producto input[type="checkbox"] { display: inline; width: auto; margin-left: 8px; }
#editor-negocio { padding: 12px; margin: 16px 0; background: white; border-radius: 8px; }
#editor-negocio > summary { font-weight: bold; cursor: pointer; }
#campos-negocio { min-width: 0; padding: 12px; border: 1px solid #c9c2bb; border-radius: 8px; }
#campos-negocio input, #campos-negocio textarea, #formulario-pagos textarea { display: block; width: 100%; margin: 4px 0 12px; }
#campos-negocio textarea, #formulario-pagos textarea { padding: 10px; font: inherit; border: 1px solid #705c4d; border-radius: 8px; resize: vertical; }
#negocio-estado:empty { display: none; }
#buscar-historial, #paginas-historial { margin: 12px 0; }
#folio-historial { max-width: 100%; }
#filtro-metodo-historial, #filtro-estado-activos { margin-bottom: 10px; }
#metodo-historial, #estado-activos { max-width: 100%; padding: 8px; font: inherit; }
#buscar-historial button, #paginas-historial button { margin: 4px 4px 4px 0; }
#paginas-historial span { display: inline-block; margin-right: 4px; }
.control-cobro { margin: 10px 0; padding: 10px; border: 1px solid #e5ddd3; border-radius: 8px; }
.control-cobro p { font-weight: bold; }
.control-cobro summary { cursor: pointer; }
.control-cobro label { margin-top: 8px; }
.control-cobro input, .control-cobro select { display: block; width: 100%; margin: 4px 0 8px; }
.control-cobro select { padding: 10px 12px; font: inherit; }