/* PediloFlow · estilos de acceso y panel (mismo lenguaje visual que la landing) */
:root {
  --marca: #0f9464;
  --marca-oscuro: #0b7a52;
  --marca-suave: #e6f6ee;
  --tinta: #0d2119;
  --tinta-suave: #4f6159;
  --linea: #e1eae5;
  --fondo: #f6f9f7;
  --blanco: #fff;
  --error: #b42318;
  --error-fondo: #fdecea;
  --radio: 14px;
  --fuente: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fuente);
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.5;
  font-size: 16px;
}
h1, h2, p { margin: 0; }
h1 { font-size: clamp(1.6rem, 3vw, 2rem); letter-spacing: -0.03em; line-height: 1.15; font-weight: 700; }
h2 { font-size: 1.15rem; letter-spacing: -0.02em; font-weight: 700; }
a { color: var(--marca-oscuro); }
:focus-visible { outline: 3px solid #7fd1ae; outline-offset: 2px; border-radius: 6px; }

.sub { color: var(--tinta-suave); margin-top: 6px; }

/* Marca */
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); }
.marca-logo {
  width: 34px; height: 34px; border-radius: 10px; background: var(--marca); color: #fff;
  display: grid; place-items: center; font-weight: 700;
}
.marca-texto { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.03em; }

/* Botones */
.boton {
  font: inherit; font-weight: 600; border: 1px solid var(--linea); background: var(--blanco); color: var(--tinta);
  padding: 11px 18px; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
.boton:hover { border-color: #c8d8d0; }
.boton-primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.boton-primario:hover { background: var(--marca-oscuro); border-color: var(--marca-oscuro); }
.boton-ancho { width: 100%; padding: 13px 18px; margin-top: 6px; }

/* Avisos */
.aviso { padding: 12px 14px; border-radius: 10px; margin: 16px 0; font-size: .95rem; }
.aviso-ok { background: var(--marca-suave); color: #0a5c3d; }
.aviso-error { background: var(--error-fondo); color: var(--error); }

/* ---------- Acceso / registro ---------- */
body.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background: radial-gradient(900px 500px at 15% -10%, #dff3e9 0%, transparent 60%), var(--fondo); }
.acceso-caja {
  width: 100%; max-width: 460px; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 20px; padding: 32px 28px; box-shadow: 0 20px 50px -30px rgba(13, 33, 25, .35);
}
.acceso-caja .marca { margin-bottom: 22px; }
.formulario { margin-top: 22px; display: grid; gap: 16px; }
.campo label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.campo input {
  width: 100%; font: inherit; padding: 12px 14px; border: 1px solid #ccdad3; border-radius: 10px;
  background: #fff; color: var(--tinta);
}
.campo input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px #bfe8d5; }
.campo.con-error input { border-color: var(--error); }
.input-prefijo { display: flex; align-items: stretch; border: 1px solid #ccdad3; border-radius: 10px; overflow: hidden; background: #fff; }
.input-prefijo:focus-within { border-color: var(--marca); box-shadow: 0 0 0 3px #bfe8d5; }
.input-prefijo span { padding: 12px 0 12px 14px; color: var(--tinta-suave); white-space: nowrap; background: #f3f8f5; padding-right: 4px; }
.input-prefijo input { border: 0; border-radius: 0; box-shadow: none; padding-left: 4px; }
.input-prefijo input:focus { box-shadow: none; }
.ayuda { color: var(--tinta-suave); font-size: .85rem; margin-top: 6px; }
.ayuda.ok { color: #0a6b46; }
.ayuda.mal { color: var(--error); }
.error { color: var(--error); font-size: .88rem; margin-top: 6px; }
.pie-acceso { margin-top: 20px; text-align: center; color: var(--tinta-suave); font-size: .95rem; }

/* ---------- Panel ---------- */
body.panel { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.lateral {
  background: var(--blanco); border-right: 1px solid var(--linea); padding: 22px 16px;
  display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh;
}
.menu { display: flex; flex-direction: column; gap: 4px; }
.menu-item {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 12px;
  border-radius: 10px; color: var(--tinta-suave); text-decoration: none; font-weight: 500;
}
.menu-item:hover:not(.deshabilitado):not(.activo) { background: var(--fondo); }
.menu-item.activo { background: var(--marca-suave); color: #0a5c3d; font-weight: 600; }
.menu-item.deshabilitado { opacity: .6; cursor: default; }
.menu-item small { font-size: .72rem; background: var(--fondo); border: 1px solid var(--linea); padding: 1px 8px; border-radius: 999px; }
.lateral-pie { margin-top: auto; border-top: 1px solid var(--linea); padding-top: 14px; display: grid; gap: 8px; }
.lateral-negocio { display: grid; }
.lateral-negocio span { color: var(--tinta-suave); font-size: .85rem; }
.enlace-salir { font-weight: 600; font-size: .92rem; }

.contenido { padding: 32px clamp(16px, 4vw, 48px) 56px; max-width: 1040px; width: 100%; min-width: 0; }
.encabezado { margin-bottom: 24px; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.stat { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 18px; display: grid; gap: 4px; align-content: start; }
.stat-titulo { color: var(--tinta-suave); font-size: .9rem; }
.stat-valor { font-size: 2rem; letter-spacing: -0.03em; line-height: 1.1; }
.stat-nota { color: var(--tinta-suave); font-size: .82rem; }
.barra { height: 8px; background: var(--marca-suave); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.barra span { display: block; height: 100%; background: var(--marca); border-radius: 999px; }

.bloque { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 22px; margin-top: 18px; }
.copiar { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.copiar input { flex: 1 1 240px; font: inherit; padding: 11px 14px; border: 1px solid #ccdad3; border-radius: 10px; background: var(--fondo); color: var(--tinta); }

.pasos { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 14px; }
.pasos li { display: flex; gap: 12px; align-items: flex-start; }
.pasos p { color: var(--tinta-suave); font-size: .92rem; }
.paso-estado {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #c8d8d0;
  display: grid; place-items: center; font-size: .8rem; color: #fff; margin-top: 2px;
}
.pasos .hecho .paso-estado { background: var(--marca); border-color: var(--marca); }

/* Móvil: el menú pasa arriba en una franja deslizable */
@media (max-width: 860px) {
  body.panel { grid-template-columns: minmax(0, 1fr); }
  .lateral, .contenido { min-width: 0; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .menu { order: 3; flex-direction: row; overflow-x: auto; width: 100%; padding-bottom: 4px; }
  .menu-item { white-space: nowrap; }
  .lateral-pie { margin: 0 0 0 auto; border: 0; padding: 0; text-align: right; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Etapa 2: productos y categorías ---------- */
.aviso-info { background: #eef4ff; color: #1d3f8a; }
.aviso a { color: inherit; font-weight: 600; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.opcional { font-weight: 400; color: var(--tinta-suave); }
.volver { display: inline-block; margin-bottom: 10px; font-size: .92rem; text-decoration: none; font-weight: 600; }
.volver:hover { text-decoration: underline; }

.encabezado-fila { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }

.boton-chico { padding: 7px 12px; font-size: .88rem; border-radius: 8px; }
.boton-peligro { color: var(--error); }
.boton-peligro:hover { border-color: #f1b8b3; background: var(--error-fondo); }
.boton[disabled] { opacity: .4; cursor: not-allowed; }

.campo select, .campo textarea, .filtro select {
  width: 100%; font: inherit; padding: 12px 14px; border: 1px solid #ccdad3; border-radius: 10px;
  background: #fff; color: var(--tinta);
}
.campo textarea { resize: vertical; min-height: 96px; }
.campo select:focus, .campo textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px #bfe8d5; }
.campo.con-error select, .campo.con-error textarea { border-color: var(--error); }
.campo input[type="file"] { padding: 9px; background: var(--fondo); }

.filtro { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.filtro label { font-weight: 600; font-size: .92rem; }
.filtro select { width: auto; min-width: 180px; padding: 9px 12px; }

/* Lista de productos */
.lista-prod, .lista-cat { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.prod {
  display: grid; grid-template-columns: 64px 1fr auto auto auto; align-items: center; gap: 14px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px;
}
.prod.oculto .prod-foto, .prod.oculto .prod-datos, .prod.oculto .prod-precio { opacity: .55; }
.prod-foto { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: var(--marca-suave); display: grid; place-items: center; }
.prod-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.prod-foto span { font-weight: 700; font-size: 1.4rem; color: var(--marca-oscuro); }
.prod-datos { display: grid; min-width: 0; }
.prod-datos strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prod-meta { color: var(--tinta-suave); font-size: .85rem; }
.prod-precio { font-weight: 700; font-variant-numeric: tabular-nums; }
.insignia { font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.insignia-ok { background: var(--marca-suave); color: #0a5c3d; }
.insignia-off { background: #eef0ef; color: var(--tinta-suave); }
.prod-acciones, .cat-acciones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.prod-acciones form, .cat-acciones form { display: inline-flex; gap: 6px; margin: 0; }

.vacio { text-align: center; padding: 40px 22px; }
.vacio .boton { margin-top: 16px; }

/* Formulario de producto */
.form-panel { display: grid; grid-template-columns: 1fr 340px; gap: 24px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; align-items: start; }
.form-col { display: grid; gap: 16px; align-content: start; }
.form-pie { grid-column: 1 / -1; display: flex; gap: 10px; border-top: 1px solid var(--linea); padding-top: 18px; }
.checks { display: grid; gap: 10px; }
.check { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; margin: 0; }
.check input { width: 18px; height: 18px; accent-color: var(--marca); }
.foto-caja { aspect-ratio: 1; border-radius: 12px; background: var(--marca-suave); overflow: hidden; display: grid; place-items: center; margin-bottom: 10px; border: 1px dashed #b9dccb; }
.foto-caja img { width: 100%; height: 100%; object-fit: cover; }
.foto-vacia { color: var(--tinta-suave); font-size: .92rem; }

/* Categorías */
.fila-form { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; flex-wrap: wrap; }
.fila-form .campo { flex: 1 1 260px; }
.lista-cat { margin-top: 18px; }
.cat { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; }
.cat-nombre { display: flex; gap: 8px; align-items: center; margin: 0; }
.cat-nombre input { flex: 1; font: inherit; padding: 9px 12px; border: 1px solid #ccdad3; border-radius: 8px; min-width: 0; }
.cat-nombre input:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px #bfe8d5; }
.cat-cant { color: var(--tinta-suave); font-size: .88rem; white-space: nowrap; }

@media (max-width: 860px) {
  .prod { grid-template-columns: 56px 1fr auto; }
  .prod-foto { width: 56px; height: 56px; }
  .prod .insignia { grid-column: 2; justify-self: start; }
  .prod-acciones { grid-column: 1 / -1; justify-content: flex-start; }
  .form-panel { grid-template-columns: 1fr; padding: 18px; }
  .cat { grid-template-columns: 1fr; }
  .cat-acciones { justify-content: flex-start; }
}

/* ---------- Etapa 4: pedidos ---------- */
.menu-item .cuenta { background: var(--marca); color: #fff; font-size: .75rem; font-weight: 700; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; border: 0; }
.bloque-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bloque-cab a { font-size: .92rem; font-weight: 600; }

.insignia-nuevo { background: #eef4ff; color: #1d3f8a; }
.insignia-confirmado { background: #fff4d6; color: #7a4b00; }
.insignia-entregado { background: var(--marca-suave); color: #0a5c3d; }
.insignia-cancelado { background: #f1f1f1; color: #6b6b6b; }
.insignia-grande { font-size: .95rem; padding: 6px 16px; }

.filtros-estado { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 12px; }
.chip-estado { flex: none; text-decoration: none; color: var(--tinta); background: var(--blanco); border: 1px solid var(--linea); padding: 8px 14px; border-radius: 999px; font-weight: 500; font-size: .92rem; }
.chip-estado span { color: var(--tinta-suave); margin-left: 4px; font-variant-numeric: tabular-nums; }
.chip-estado.activo { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; }
.chip-estado.activo span { color: #d7f3e6; }

.buscar-pedidos { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.buscar-pedidos input[type="search"] { flex: 1 1 240px; font: inherit; padding: 10px 14px; border: 1px solid #ccdad3; border-radius: 10px; background: #fff; color: var(--tinta); min-width: 0; }
.buscar-pedidos input[type="search"]:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px #bfe8d5; }

.lista-ped { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ped { display: grid; grid-template-columns: 56px 1fr auto auto auto; gap: 14px; align-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; text-decoration: none; color: var(--tinta); }
.ped:hover { border-color: #b9dccb; }
.ped-num { font-weight: 700; color: var(--marca-oscuro); font-variant-numeric: tabular-nums; }
.ped-datos { display: grid; min-width: 0; }
.ped-datos strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ped-resumen { color: var(--tinta-suave); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ped-fecha { color: var(--tinta-suave); font-size: .88rem; white-space: nowrap; }
.ped-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lista-ped-compacta { margin-top: 12px; }
.paginacion { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 18px; color: var(--tinta-suave); font-size: .92rem; }

.detalle-ped { display: grid; gap: 16px; }
.detalle-ped .bloque { margin-top: 0; }
.dato-cliente { font-size: 1.15rem; font-weight: 600; margin-top: 8px; }
.notas-ped { margin-top: 8px; background: var(--fondo); border-radius: 10px; padding: 10px 12px; overflow-wrap: anywhere; }
.detalle-ped .ayuda { margin-top: 10px; }
.tabla-items { width: 100%; border-collapse: collapse; margin: 12px 0 14px; }
.tabla-items th, .tabla-items td { padding: 10px 6px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.tabla-items thead th { font-size: .82rem; color: var(--tinta-suave); font-weight: 600; }
.tabla-items .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla-items td small { display: block; color: var(--tinta-suave); font-size: .82rem; }
.tabla-items tfoot th, .tabla-items tfoot td { font-size: 1.15rem; font-weight: 700; border-bottom: 0; }
.acciones-estado { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.acciones-estado form { margin: 0; }
.eliminar-ped { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linea); }

@media (max-width: 860px) {
  .ped { grid-template-columns: 48px 1fr auto; gap: 6px 12px; }
  .ped-fecha { grid-column: 2; grid-row: 2; }
  .ped-total { grid-column: 3; grid-row: 1; }
  .ped .insignia { grid-column: 3; grid-row: 2; justify-self: end; }
  .ped-resumen { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ---------- Etapa 5: diseño del catálogo ---------- */
.diseno-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.form-diseno { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 24px; display: grid; gap: 22px; }
.form-diseno .form-pie { border-top: 1px solid var(--linea); padding-top: 18px; }
.etiqueta { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 8px; }

.colores { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.muestra { width: 38px; height: 38px; border-radius: 50%; border: 3px solid #fff; background: var(--m); box-shadow: 0 0 0 1px #c8d8d0; cursor: pointer; padding: 0; }
.muestra:hover { box-shadow: 0 0 0 2px #9fbfb0; }
.muestra[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--tinta); }
.campo .muestra-propia { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 500; font-size: .9rem; cursor: pointer; padding: 4px 12px 4px 4px; border: 1px solid var(--linea); border-radius: 999px; background: #fff; }
.muestra-propia input[type="color"] { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; overflow: hidden; }
.muestra-propia input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.muestra-propia input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.muestra-propia input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }

/* Vista previa del catálogo */
.vista-previa-caja { position: sticky; top: 24px; }
.vp-titulo { font-weight: 600; font-size: .92rem; color: var(--tinta-suave); margin-bottom: 10px; }
.vp { width: 100%; max-width: 300px; border: 1px solid var(--linea); border-radius: 24px; overflow: hidden; background: #f7f9f8; box-shadow: 0 20px 40px -28px rgba(13, 33, 25, .5); position: relative; padding-bottom: 64px; }
.vp-cab { background: var(--c); color: var(--c-sobre); padding: 18px 16px 14px; display: flex; gap: 10px; align-items: center; transition: background .15s; }
.vp-logo { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: #fff; flex: none; }
.vp-txt { display: grid; min-width: 0; }
.vp-txt strong { font-size: 1.05rem; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.vp-txt span { font-size: .8rem; opacity: .9; overflow-wrap: anywhere; }
.vp-busca { margin: -1px 12px 0; transform: translateY(-6px); background: #fff; color: #7b8983; font-size: .82rem; padding: 9px 12px; border-radius: 10px; box-shadow: 0 4px 10px -6px rgba(0,0,0,.4); }
.vp-chips { display: flex; gap: 6px; padding: 4px 12px 10px; }
.vp-chip { font-size: .75rem; padding: 4px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--linea); }
.vp-chip-on { background: var(--c); border-color: var(--c); color: var(--c-sobre); font-weight: 600; }
.vp-prod { margin: 0 12px; background: #fff; border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.vp-foto { aspect-ratio: 2 / 1; background: var(--c-suave); display: grid; place-items: center; font-weight: 700; font-size: 1.6rem; color: var(--c-tinta); }
.vp-prod strong { display: block; font-size: .85rem; padding: 8px 10px 0; }
.vp-pie { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 10px; }
.vp-precio { font-weight: 700; color: var(--c-tinta); font-size: .9rem; }
.vp-btn { background: var(--c); color: var(--c-sobre); font-size: .75rem; font-weight: 600; padding: 6px 12px; border-radius: 8px; }
.vp-barra { position: absolute; left: 12px; right: 12px; bottom: 12px; background: var(--c); color: var(--c-sobre); border-radius: 12px; padding: 11px 14px; display: flex; justify-content: space-between; font-size: .78rem; font-weight: 600; }

@media (max-width: 960px) {
  .diseno-grid { grid-template-columns: 1fr; }
  .vista-previa-caja { position: static; order: -1; }
  .vp { margin: 0 auto; }
}

/* Botón de WhatsApp en Diseño */
.etiqueta-sub { margin-top: 14px; font-weight: 500; }
.campo > .check { margin-bottom: 4px; }
.vp-wsp { position: absolute; right: 12px; bottom: 66px; width: 34px; height: 34px; border-radius: 50%; background: #1fa855; box-shadow: 0 6px 14px -6px rgba(0,0,0,.5); }
.vp-wsp::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; border: 2.5px solid #fff; }

/* ---------- Celular: panel ---------- */
@media (max-width: 600px) {
  body { font-size: 15.5px; }
  .contenido { padding: 20px 14px 48px; }
  h1 { font-size: 1.55rem; }
  .bloque { padding: 16px; }
  .form-diseno, .form-panel { padding: 16px; }
  .tarjetas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 14px; }
  .stat-valor { font-size: 1.4rem; white-space: nowrap; }
  .encabezado-fila { align-items: flex-start; }
  .copiar input { flex: 1 1 100%; }
  .copiar .boton { flex: 1 1 auto; text-align: center; }
  .acciones-estado .boton { width: 100%; }
  .acciones-estado form { flex: 1 1 100%; }
  .prod-acciones .boton { flex: 1 1 auto; }
  .prod-acciones form { flex: 1 1 auto; }
  .prod-acciones form .boton { width: 100%; }
  .cat-nombre { flex-wrap: wrap; }
  .fila-form .boton { width: 100%; }
  .buscar-pedidos .boton { flex: 1 1 auto; }
  .diseno-grid { gap: 16px; }
  .acceso-caja { padding: 24px 18px; border-radius: 16px; }
}
@media (pointer: coarse) {
  .boton, .boton-chico { min-height: 44px; }
  .menu-item { min-height: 44px; }
  .chip-estado { min-height: 44px; display: inline-flex; align-items: center; }
  .muestra { width: 44px; height: 44px; }
  .campo input, .campo select, .campo textarea { min-height: 44px; }
  .check input { width: 22px; height: 22px; }
}

/* Ubicación del botón de WhatsApp (Diseño) */
.opciones-wsp { display: grid; gap: 8px; margin-top: 4px; }
.campo .opcion-wsp, .opcion-wsp { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linea); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 400; margin: 0; }
.opcion-wsp input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--marca); flex: none; }
.opcion-wsp span { display: grid; gap: 2px; }
.opcion-wsp strong { font-weight: 600; font-size: .95rem; }
.opcion-wsp small { color: var(--tinta-suave); font-size: .84rem; }
.campo .opcion-wsp { font-weight: 400; margin: 0; }
.campo .check { display: flex; }
.opcion-wsp:has(input:checked) { border-color: var(--marca); background: var(--marca-suave); }
.opcion-wsp:has(input:focus-visible) { outline: 3px solid #7fd1ae; outline-offset: 2px; }

.vp-wsp.izq { right: auto; left: 12px; }
.vp-cab-wsp { margin: 10px 12px 0; }
.vp-cab-wsp span { display: inline-block; background: #fff; color: #0f6b3a; font-size: .72rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; box-shadow: 0 4px 10px -6px rgba(0,0,0,.4); }
.vp-cab-wsp[hidden] { display: none; }
.vp-wsp[hidden] { display: none; }
@media (max-width: 600px) {
  /* vista previa más compacta en el celular: se ve el efecto sin ocupar toda la pantalla */
  .vp { max-width: 100%; padding-bottom: 60px; }
  .vp-prod .vp-foto { aspect-ratio: 3 / 1; }
}

/* Casillas y botones de opción: no heredan el aspecto de los campos de texto (relleno, recuadro al enfocar, alto táctil) */
.campo input[type="checkbox"], .campo input[type="radio"] { padding: 0; min-height: 0; box-shadow: none; border-radius: 0; }
.campo input[type="checkbox"]:focus, .campo input[type="radio"]:focus { box-shadow: none; }
.campo input[type="radio"] { border-radius: 50%; }

/* ---------- Mi cuenta, legales y administración ---------- */
.form-cuenta { display: grid; gap: 14px; margin-top: 14px; max-width: 480px; }
.plan-linea { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; }
.zona-peligro { border-color: #f1c4bf; background: #fffafa; }
.zona-peligro h2 { color: var(--error); }
.separador { border: 0; border-top: 1px solid var(--linea); margin: 18px 0; }
.check-legal { align-items: flex-start; font-weight: 400; font-size: .92rem; }
.check-legal span { line-height: 1.4; }
.legal-pie { margin-top: 14px; text-align: center; font-size: .82rem; color: var(--tinta-suave); }
.legal-pie a { color: var(--tinta-suave); }
.banner-suplantar { position: sticky; top: 0; z-index: 20; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: #1f2937; color: #fff; padding: 10px 14px; margin: -32px calc(-1 * clamp(16px, 4vw, 48px)) 18px; }
.banner-suplantar .boton { background: #fff; color: #1f2937; }
.banner-suplantar span { font-size: .92rem; }

/* Páginas legales */
body.legal { background: var(--blanco); }
.legal-cab { max-width: 760px; margin: 0 auto; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--linea); }
.legal-cab nav { display: flex; gap: 16px; font-size: .95rem; }
.legal-texto { max-width: 760px; margin: 0 auto; padding: 28px 20px 40px; }
.legal-texto h1 { margin-bottom: 4px; }
.legal-texto h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.legal-texto h3 { font-size: 1rem; margin: 16px 0 6px; }
.legal-texto p, .legal-texto li { line-height: 1.65; }
.legal-texto p { margin: 10px 0; }
.legal-texto ul { padding-left: 22px; margin: 8px 0; }
.legal-fecha { color: var(--tinta-suave); font-size: .9rem; margin-bottom: 18px; }
.legal-pie-pagina { text-align: center; padding: 0 20px 40px; font-size: .92rem; }

/* Administración */
.etiqueta-admin { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #1f2937; padding: 3px 10px; border-radius: 999px; align-self: flex-start; }
body.admin .menu-item.activo { background: #eceff3; color: #1f2937; }
.lista-simple { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.lista-simple li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.lista-simple li:last-child { border-bottom: 0; }
.lista-simple a { text-decoration: none; color: var(--tinta); font-weight: 600; }
.lista-simple a:hover { text-decoration: underline; }
.lista-simple small { display: block; color: var(--tinta-suave); font-weight: 400; font-size: .85rem; }
.lista-simple span { color: var(--tinta-suave); font-size: .92rem; text-align: right; }
.lista-simple li > span:first-child, .lista-simple li > a { text-align: left; }
.lista-simple-grande li { padding: 12px 0; }
.dos-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.dos-col .bloque { margin-top: 18px; }
.grafico-barras { width: 100%; height: 90px; margin-top: 10px; display: block; }
.barra-on { fill: var(--marca); }
.barra-off { fill: #dfe8e3; }
.filtros-adm { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr auto auto; gap: 10px; align-items: start; margin-bottom: 16px; }
.filtros-adm .campo { margin: 0; }
.filtros-adm select, .filtros-adm input { width: 100%; }
.lista-adm { gap: 8px; }
.adm-fila { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.1fr) 120px minmax(0, 1.3fr) auto; gap: 14px; align-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 12px 14px; text-decoration: none; color: var(--tinta); }
.adm-fila:hover { border-color: #b9c3cf; }
.adm-suspendido { background: #fbfbfb; opacity: .85; }
.adm-nombre { display: grid; min-width: 0; }
.adm-nombre strong, .adm-nombre small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-fila small { color: var(--tinta-suave); font-size: .82rem; display: block; }
.adm-plan { display: grid; gap: 2px; justify-items: start; }
.adm-num { color: var(--tinta-suave); font-size: .9rem; white-space: nowrap; }
.adm-fecha { color: var(--tinta-suave); font-size: .88rem; }
.marca-admin { font-style: normal; font-size: .68rem; font-weight: 700; background: #1f2937; color: #fff; padding: 1px 7px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.acciones-cab { margin: 0 0 16px; }
.codigo { background: #f1f4f2; border: 1px solid var(--linea); border-radius: 10px; padding: 10px 12px; font-size: .84rem; overflow-x: auto; margin: 8px 0 14px; }
code { background: #f1f4f2; padding: 1px 6px; border-radius: 6px; font-size: .88em; }
.lista-log small { display: block; overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .dos-col { grid-template-columns: 1fr; }
  .filtros-adm { grid-template-columns: 1fr 1fr; }
  .filtros-adm .campo-busca { grid-column: 1 / -1; }
  .adm-fila { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; }
  .adm-nombre { grid-column: 1 / -1; }
  .adm-fecha { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .banner-suplantar { margin: -20px -14px 14px; }
  .form-cuenta { max-width: none; }
  .lista-simple li > span { text-align: left; }
}

/* Textos largos (links, emails) nunca deben ensanchar la pantalla */
.bloque p, .bloque .sub, .aviso, .encabezado .sub, .lista-simple li > *, .adm-nombre small { overflow-wrap: anywhere; }
.lista-simple li > * { min-width: 0; }
.lista-simple li > span:last-child { flex: 0 1 auto; }
.lista-simple-grande li > a, .lista-simple-grande li > span:first-child { flex: 1 1 180px; }

/* Pulido de móvil y espaciados */
.tarjetas { margin-bottom: 18px; }
.form-cuenta .check, .check-legal { font-weight: 400; }
.etiqueta { margin-top: 16px; margin-bottom: 2px; }
.plan-linea + .sub + p, .bloque > .sub + p { margin-top: 12px; }
.adm-num { text-align: right; }
@media (max-width: 860px) {
  .lateral-pie { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; }
  .lateral-pie .lateral-negocio { flex-basis: 100%; }
  body.admin .lateral-pie .lateral-negocio { display: none; }
  .acciones-cab { display: grid; grid-template-columns: 1fr; }
  .acciones-cab .boton { width: 100%; justify-content: center; text-align: center; }
  .adm-num { text-align: right; }
}
@media (max-width: 860px) {
  body.admin .menu-item { padding-left: 11px; padding-right: 11px; }
  .filtros-adm select { font-size: .92rem; padding-left: 10px; padding-right: 26px; }
}
@media (max-width: 860px) {
  body.admin .menu { gap: 0; }
  body.admin .menu-item { padding-left: 9px; padding-right: 9px; }
}
.campo .check-legal, .form-cuenta .campo .check { font-weight: 400; }
.lista-simple li > span strong { color: var(--tinta); }

/* ---------- Planes y ventana de mejora ---------- */
.planes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.plan-card { position: relative; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.plan-card h3 { margin: 0; font-size: 1.1rem; }
.plan-precio { margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.plan-card ul { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 8px; flex: 1; font-size: .94rem; }
.plan-card li { padding-left: 24px; position: relative; line-height: 1.4; }
.plan-card li::before { content: "✓"; position: absolute; left: 0; color: var(--marca); font-weight: 800; }
.plan-destacado { border: 2px solid var(--marca); }
.plan-actual { background: #f6faf8; }
.plan-cinta { position: absolute; top: -11px; right: 16px; background: var(--marca); color: #fff; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; letter-spacing: .02em; }
.plan-estado { text-align: center; font-weight: 700; color: var(--tinta-suave); padding: 11px 0; }
.mejorar-plan { display: inline-block; margin-top: 4px; font-size: .85rem; font-weight: 700; color: var(--marca); }
.barra-uso { height: 8px; background: #e3ebe6; border-radius: 999px; overflow: hidden; margin: 0 0 14px; }
.barra-uso span { display: block; height: 100%; background: var(--marca); border-radius: 999px; }
.barra-uso span.barra-llena { background: #d97706; }

dialog.modal-planes { border: 0; border-radius: 18px; padding: 24px; width: min(860px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow-y: auto; box-shadow: 0 24px 70px rgba(0,0,0,.28); background: var(--blanco); color: var(--tinta); }
dialog.modal-planes::backdrop { background: rgba(15, 23, 20, .55); }
.modal-cab { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.modal-cab h2 { margin: 0 0 4px; font-size: 1.35rem; }
.modal-x { border: 0; background: #eef2ef; width: 38px; height: 38px; border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer; flex: none; color: var(--tinta); }
.modal-pie { text-align: center; margin: 4px 0 14px; }

@media (max-width: 860px) {
  .planes-grid { grid-template-columns: 1fr; }
  dialog.modal-planes { padding: 18px 16px; }
  .modal-cab h2 { font-size: 1.15rem; }
  /* En celular: primero los planes pagos, y el Gratis al final */
  .plan-card { order: 1; }
  .plan-destacado { order: 0; }
  .plan-card:first-child:not(.plan-destacado) { order: 2; }
}
.plan-card ul { align-content: start; }
@media (max-width: 860px) {
  body.admin .menu { flex-wrap: wrap; overflow-x: visible; gap: 2px 0; }
}

/* ---------- Diseño: vista de productos y vista previa ---------- */
.opciones-vista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.opcion-vista { position: relative; display: flex; flex-direction: column; gap: 8px; border: 1.5px solid var(--linea); border-radius: 14px; padding: 12px; cursor: pointer; background: var(--blanco); }
.opcion-vista input { position: absolute; opacity: 0; pointer-events: none; }
.opcion-vista:has(input:checked) { border-color: var(--marca); box-shadow: 0 0 0 3px rgba(15, 148, 100, .18); }
.opcion-vista:has(input:focus-visible) { outline: 3px solid var(--marca); outline-offset: 2px; }
.opcion-vista.bloqueada, .opcion-wsp.bloqueada { opacity: .6; cursor: not-allowed; }
.ov-icono svg { width: 100%; height: 44px; fill: #c5d3cb; display: block; }
.opcion-vista:has(input:checked) .ov-icono svg { fill: var(--marca); }
.ov-txt { display: grid; gap: 2px; }
.ov-txt small { color: var(--tinta-suave); font-size: .8rem; line-height: 1.35; }
.check-fotos { margin-top: 12px; }
@media (max-width: 600px) {
  .opciones-vista { grid-template-columns: 1fr; }
  .opcion-vista { flex-direction: row; align-items: center; }
  .ov-icono { width: 64px; flex: none; }
}

/* vista previa de los productos (3 vistas) */
.vp-prods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 12px; }
.vp-prods .vp-prod { margin: 0; }
.vp-prods .vp-foto { aspect-ratio: 1.3 / 1; font-size: 1.3rem; }
.vp-info strong { padding: 6px 8px 0; font-size: .78rem; }
.vp-info small { display: block; padding: 0 8px; font-size: .68rem; color: var(--tinta-suave); line-height: 1.3; }
.vp-info .vp-pie { padding: 5px 8px 8px; }
.vp-prods .vp-btn { padding: 4px 9px; font-size: .68rem; }
.vp[data-vista="lista"] .vp-prods, .vp[data-vista="carta"] .vp-prods { grid-template-columns: 1fr; }
.vp[data-vista="lista"] .vp-prod { display: flex; }
.vp[data-vista="lista"] .vp-foto { width: 58px; flex: none; aspect-ratio: auto; }
.vp[data-vista="lista"] .vp-info { flex: 1; min-width: 0; padding-bottom: 2px; }
.vp[data-vista="carta"] .vp-prods { gap: 0; background: #fff; border: 1px solid var(--linea); border-radius: 12px; padding: 0 10px; }
.vp[data-vista="carta"] .vp-prod { display: flex; gap: 8px; border: 0; border-bottom: 1px dashed var(--linea); border-radius: 0; padding: 8px 0; background: transparent; }
.vp[data-vista="carta"] .vp-prod:last-child { border-bottom: 0; }
.vp[data-vista="carta"] .vp-foto { width: 38px; height: 38px; aspect-ratio: auto; flex: none; border-radius: 8px; font-size: .9rem; }
.vp[data-vista="carta"] .vp-info { flex: 1; display: grid; grid-template-columns: 1fr auto; column-gap: 8px; align-items: start; }
.vp[data-vista="carta"] .vp-info strong, .vp[data-vista="carta"] .vp-info small { padding-left: 0; padding-right: 0; grid-column: 1; }
.vp[data-vista="carta"] .vp-info .vp-pie { display: contents; }
.vp[data-vista="carta"] .vp-precio { grid-column: 2; grid-row: 1; }
.vp[data-vista="carta"] .vp-btn { grid-column: 2; grid-row: 2; justify-self: end; }
.vp[data-fotos="0"] .vp-foto { display: none; }
.vp[data-modo="catalogo"] .vp-btn, .vp[data-modo="catalogo"] .vp-barra, .vp[data-modo="consulta"] .vp-barra { display: none; }

/* ---------- Estadísticas ---------- */
.tabs-periodo { display: inline-flex; background: #eef2ef; border-radius: 12px; padding: 4px; gap: 2px; }
.tabs-periodo a { padding: 8px 14px; border-radius: 9px; text-decoration: none; color: var(--tinta-suave); font-weight: 600; font-size: .92rem; }
.tabs-periodo a.activo { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.var { font-size: .8rem; font-weight: 600; }
.var-sube { color: #15803d; } .var-baja { color: #b42318; } .var-igual, .var-nd { color: var(--tinta-suave); font-weight: 500; }
.menu-item .candado { margin-left: 6px; font-size: .75rem; }
.grafico-visitas .barra-on { fill: #5b8def; }
.top-lista { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.top-fila { display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; }
.top-fila strong { overflow-wrap: anywhere; min-width: 0; }
.top-fila span { color: var(--tinta-suave); white-space: nowrap; }
.barra-h { height: 8px; background: #e3ebe6; border-radius: 999px; overflow: hidden; margin-top: 5px; }
.barra-h span { display: block; height: 100%; background: var(--marca); border-radius: 999px; }
.semana { display: flex; align-items: flex-end; gap: 8px; height: 130px; margin: 14px 0 6px; }
.semana-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.semana-barra { width: 100%; max-width: 34px; background: var(--marca); border-radius: 6px 6px 2px 2px; }
.semana-num { font-size: .78rem; font-weight: 700; } .semana-dia { font-size: .78rem; color: var(--tinta-suave); }
.estados-resumen { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.estad-bloqueo { text-align: center; max-width: 560px; margin: 20px auto; padding: 32px 24px; }
.estad-candado { font-size: 2.4rem; }
.estad-gancho { font-size: 1.02rem; }
.estad-lista { text-align: left; max-width: 420px; margin: 18px auto 22px; padding-left: 22px; display: grid; gap: 8px; }
@media (max-width: 600px) { .tabs-periodo { width: 100%; } .tabs-periodo a { flex: 1; text-align: center; padding: 9px 4px; } }

.funciones-plan { border: 1px solid var(--linea); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.funciones-plan legend { padding: 0 6px; font-weight: 700; font-size: .9rem; }
.opciones-vista .opcion-vista { display: flex; flex-direction: column; font-weight: 400; }
.opciones-vista .ov-txt strong { font-weight: 700; }
@media (max-width: 600px) {
  .opciones-vista .opcion-vista { flex-direction: row; align-items: center; gap: 14px; }
  .opciones-vista .ov-icono { width: 64px; flex: none; }
}

/* ---------- Mi catálogo: pestañas y pedido ---------- */
.tabs-cat { display: inline-flex; background: #eef2ef; border-radius: 12px; padding: 4px; gap: 2px; margin: 0 0 18px; max-width: 100%; }
.tabs-cat button { border: 0; background: transparent; padding: 10px 18px; border-radius: 9px; font: inherit; font-weight: 600; font-size: .95rem; color: var(--tinta-suave); cursor: pointer; }
.tabs-cat button[aria-selected="true"] { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.tabs-cat button:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.tab-panel[hidden] { display: none; }
.diseno-grid[data-tab="pedidos"] .vp, .diseno-grid[data-tab="pedidos"] .vp-titulo-prev { display: none; }
.diseno-grid[data-tab="apariencia"] .resumen-pedido { display: none; }
.check-bloque { padding: 10px 0 4px; font-weight: 600; }
.sub-campo { margin: 4px 0 12px 28px; padding-left: 14px; border-left: 3px solid var(--linea); display: grid; gap: 8px; }
.sub-campo[hidden], .costo-fijo[hidden] { display: none; }
.sub-campo label { font-weight: 500; }
.costo-fijo input { max-width: 180px; }
.resumen-pedido { background: var(--blanco); border: 1px solid var(--linea); border-radius: 18px; padding: 16px 18px; max-width: 320px; }
.resumen-lista { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 8px; font-size: .92rem; line-height: 1.4; }
.resumen-lista small { display: block; color: var(--tinta-suave); }
.resumen-lista .lo-nuevo { color: var(--marca-oscura, #0b6b48); font-weight: 600; }
@media (max-width: 600px) { .tabs-cat { display: flex; width: 100%; } .tabs-cat button { flex: 1; padding: 10px 6px; } .resumen-pedido { max-width: none; } .sub-campo { margin-left: 10px; } }

.etq-entrega { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
.etq-envio { background: #e6f0ff; color: #1d3f8a; } .etq-retiro { background: #fff1d6; color: #7a4b00; }
.datos-entrega { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; font-size: .95rem; overflow-wrap: anywhere; }

/* ---------- Horarios y mensajes ---------- */
.tabs-cat { overflow-x: auto; scrollbar-width: none; }
.tabs-cat button { white-space: nowrap; }
.diseno-grid[data-tab="horarios"], .diseno-grid[data-tab="mensajes"] { grid-template-columns: minmax(0, 1fr); }
.diseno-grid[data-tab="horarios"] .vista-previa-caja, .diseno-grid[data-tab="mensajes"] .vista-previa-caja { display: none; }
.dia-fila { display: grid; grid-template-columns: 130px 1fr auto; gap: 8px 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.dia-nombre { font-weight: 600; padding: 0; }
.dia-turnos { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.turno { display: inline-flex; align-items: center; gap: 8px; }
.turno[hidden], [data-turno2][hidden], .dia-cerrado { display: none; }
.turno input[type="time"] { width: auto; min-width: 104px; padding: 9px 10px; font: inherit; border: 1px solid #cdd8d3; border-radius: 10px; }
.dia-off .dia-turnos { display: none; }
.dia-off .dia-cerrado { display: inline; color: var(--tinta-suave); font-size: .9rem; }
.enlace-mini { border: 0; background: none; padding: 6px 0; color: var(--marca); font: inherit; font-weight: 600; font-size: .88rem; cursor: pointer; text-decoration: underline; }
#horarios-grilla { margin-top: 8px; }
#horarios-grilla[hidden], #aviso-campos[hidden] { display: none; }
.variables-msg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 18px; }
.var-chip { border: 1px solid var(--linea); background: #f4f7f5; border-radius: 999px; padding: 6px 12px; font: inherit; font-size: .84rem; font-family: ui-monospace, monospace; cursor: pointer; }
.var-chip:hover { border-color: var(--marca); }
.msg-preview { margin: 8px 0 2px; padding: 10px 12px; background: #e9f7ef; border-radius: 12px; font-size: .9rem; line-height: 1.45; color: #114b2c; overflow-wrap: anywhere; }
.campo textarea { width: 100%; font: inherit; padding: 12px 14px; border: 1px solid #cdd8d3; border-radius: 10px; resize: vertical; }
@media (max-width: 600px) { .dia-fila { grid-template-columns: 1fr; gap: 6px; } .tabs-cat { display: flex; } .tabs-cat button { flex: 1 0 auto; padding: 10px 12px; } }

/* ---------- Avisar al cliente ---------- */
.avisos-lista { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.aviso-item { display: flex; justify-content: space-between; gap: 14px; align-items: center; border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; background: var(--blanco); }
.aviso-sugerido { border-color: var(--marca); background: #f3faf6; }
.aviso-cuerpo { min-width: 0; }
.aviso-txt { margin: 6px 0 0; font-size: .9rem; line-height: 1.45; color: var(--tinta-suave); overflow-wrap: anywhere; }
.aviso-acc { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; flex: none; }
.etq-sugerido { font-size: .7rem; font-weight: 700; background: var(--marca); color: #fff; padding: 2px 8px; border-radius: 999px; vertical-align: middle; }
@media (max-width: 600px) { .aviso-item { flex-direction: column; align-items: stretch; } .aviso-acc { justify-content: stretch; } .aviso-acc .boton { flex: 1; text-align: center; } }

/* ---------- Kit QR ---------- */
.kit-qr-fila { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.kit-qr-caja { width: 200px; height: 200px; flex: none; border: 1px solid var(--linea); border-radius: 14px; overflow: hidden; background: #fff; }
.kit-qr-caja svg { display: block; width: 100%; height: 100%; }
.kit-qr-info { flex: 1; min-width: 240px; display: grid; gap: 8px; }
.kit-url { margin: 0; overflow-wrap: anywhere; font-weight: 600; }
.kit-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 10px; }
.kit-vista { min-width: 0; background: #e9eeeb; border-radius: 14px; padding: 16px; display: flex; justify-content: center; }
.kit-marco { --s: .5; position: relative; box-shadow: 0 10px 30px -14px rgba(0,0,0,.45); background: #fff; overflow: hidden; max-width: 100%; }
.kit-marco .kit-hoja { transform: scale(var(--s)); transform-origin: top left; }
.kit-tips { display: grid; gap: 8px; padding-left: 22px; margin: 8px 0 0; }
@media (max-width: 860px) { .kit-grid { grid-template-columns: minmax(0, 1fr); } .kit-qr-caja { width: 160px; height: 160px; } }

/* La hoja (mm reales: lo que se ve es lo que se imprime) */
.kit-hoja { width: 210mm; height: 297mm; background: #fff; color: #16211c; font-family: "Onest", system-ui, sans-serif; box-sizing: border-box; overflow: hidden; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.kit-hoja .k-logo { width: 26mm; height: 26mm; object-fit: cover; border-radius: 5mm; background: #fff; }
.kit-hoja .k-qr { background: #fff; }
.kit-hoja .k-qr svg { display: block; width: 100%; height: 100%; }
.kit-afiche { display: flex; flex-direction: column; align-items: center; }
.kit-afiche .ka-cab { width: 100%; height: 50mm; background: var(--c); color: var(--sobre); display: flex; align-items: center; justify-content: center; gap: 8mm; padding: 0 14mm; box-sizing: border-box; }
.kit-afiche .ka-cab-vacia { height: 22mm; }
.kit-afiche .k-nombre { font-size: 12mm; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.kit-afiche .ka-titulo { margin: 16mm 14mm 10mm; text-align: center; font-size: 15mm; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--tinta); }
.kit-afiche .k-qr { width: 120mm; height: 120mm; padding: 4mm; border: 3mm solid var(--c); border-radius: 8mm; box-sizing: border-box; }
.kit-afiche .ka-sub { margin: 10mm 16mm 0; text-align: center; font-size: 7.5mm; line-height: 1.3; color: #3d4a43; }
.kit-afiche .ka-link { margin: auto 0 14mm; padding: 3mm 8mm; background: var(--suave); color: var(--tinta); border-radius: 99mm; font-size: 6mm; font-weight: 700; }
.kit-tarjetas { display: grid; grid-template-columns: repeat(2, 99mm); grid-template-rows: repeat(4, 70.5mm); justify-content: center; align-content: center; }
.kit-tarjeta { box-sizing: border-box; width: 99mm; height: 70.5mm; border: .25mm dashed #9aa5a0; display: flex; align-items: center; gap: 4mm; padding: 5mm; overflow: hidden; }
.kit-tarjeta .k-qr { width: 44mm; height: 44mm; flex: none; padding: 1.5mm; border: 1.2mm solid var(--c); border-radius: 3mm; box-sizing: border-box; }
.kt-texto { min-width: 0; display: grid; gap: 1.6mm; }
.kt-cab { display: flex; align-items: center; gap: 2mm; }
.kit-tarjeta .k-logo { width: 9mm; height: 9mm; border-radius: 2mm; }
.kit-tarjeta .k-nombre { font-size: 3.4mm; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.kt-titulo { margin: 0; font-size: 5mm; font-weight: 800; line-height: 1.12; color: var(--tinta); overflow-wrap: anywhere; }
.kt-sub { margin: 0; font-size: 3.1mm; line-height: 1.25; color: #3d4a43; overflow-wrap: anywhere; }
.kt-link { margin: 0; font-size: 2.8mm; font-weight: 700; color: var(--tinta); overflow-wrap: anywhere; }
#kit-print { display: none; }
@media print {
  @page { size: A4; margin: 0; }
  body.kit-imprimiendo { display: block !important; background: #fff !important; }
  body.kit-imprimiendo > *:not(#kit-print) { display: none !important; }
  body.kit-imprimiendo #kit-print { display: block; }
  body.kit-imprimiendo #kit-print .kit-hoja { transform: none; }
}

.kit-escaneos { margin: 0; padding: 8px 12px; background: #e9f7ef; border-radius: 10px; font-size: .92rem; color: #114b2c; }

.insignia-agotado { background: #1f2937; color: #fff; }

/* ---------- Avisos de pedidos ---------- */
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: grid; gap: 10px; max-width: min(360px, calc(100vw - 32px)); }
.toast { display: grid; gap: 2px; background: #16211c; color: #fff; text-decoration: none; padding: 14px 16px; border-radius: 14px; box-shadow: 0 12px 34px -10px rgba(0,0,0,.5); border-left: 5px solid var(--marca); animation: toast-entra .35s ease; transition: opacity .4s, transform .4s; }
.toast span { color: #cfd9d3; font-size: .9rem; overflow-wrap: anywhere; }
.toast-fuera { opacity: 0; transform: translateY(10px); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 860px) { .toasts { top: 12px; bottom: auto; left: 12px; right: 12px; max-width: none; } }

/* ---------- Guía de inicio ---------- */
.guia-inicio { border-color: #bfe3d0; background: linear-gradient(180deg, #f6fcf9, #fff); margin-bottom: 18px; }
.guia-cuenta { font-weight: 700; color: var(--marca); font-size: .92rem; }
.guia-lista { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 4px; }
.guia-lista li { display: flex; gap: 12px; align-items: center; padding: 8px 4px; border-radius: 10px; }
.guia-marca { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 2px solid #c5d3cb; display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff; }
.guia-hecho .guia-marca { background: var(--marca); border-color: var(--marca); }
.guia-txt { display: grid; text-decoration: none; color: var(--tinta); min-width: 0; }
.guia-txt small { color: var(--tinta-suave); font-size: .84rem; overflow-wrap: anywhere; }
.guia-txt em { font-style: normal; font-weight: 400; color: var(--tinta-suave); font-size: .85rem; }
.guia-hecho .guia-txt strong { text-decoration: line-through; color: var(--tinta-suave); font-weight: 600; }
.guia-lista li:not(.guia-hecho):hover { background: #eef7f2; }
.guia-pie { margin: 8px 0 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.migraciones-lista { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 4px; }
.migraciones-lista span { color: inherit; opacity: .85; }
#bloque-pedido-cfg .campo > label:not(.check):not(.solo-lector) { margin-top: 12px; }
#bloque-pedido-cfg .campo > label.check { margin: 6px 0; }

/* ---------- Carteles animados (toasts) y botones "cargando" ---------- */
html.js [data-flash] { display: none; }   /* con JavaScript, el aviso del servidor se muestra como cartel */
.toast-ok, .toast-error, .toast-info { display: flex; align-items: flex-start; gap: 12px; position: relative; overflow: hidden; padding: 14px 14px 16px 14px; user-select: text; pointer-events: auto; }
.toast-ok { border-left-color: #1fa855; } .toast-error { border-left-color: #ef5350; } .toast-info { border-left-color: #5b8def; }
.toast-icono { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; background: #1fa855; color: #fff; margin-top: 1px; }
.toast-error .toast-icono { background: #ef5350; } .toast-info .toast-icono { background: #5b8def; }
.toast-texto { flex: 1; min-width: 0; font-size: .95rem; line-height: 1.4; color: #fff; overflow-wrap: anywhere; }
.toast-x { flex: none; background: transparent; border: 0; color: #9fb0a8; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.toast-x:hover { color: #fff; }
.toast-barra::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255,255,255,.35); transform-origin: left; animation: toast-barra var(--ms, 4500ms) linear forwards; }
.toast-pausa::after { animation-play-state: paused; }
@keyframes toast-barra { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.cargando { position: relative; color: transparent !important; pointer-events: none; }
.cargando::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid currentColor; border-color: #6b7b73 #6b7b73 transparent transparent; animation: girar .7s linear infinite; }
.boton-primario.cargando::after { border-color: #fff #fff transparent transparent; }
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .toast, .toast-barra::after, .cargando::after { animation: none; } }

/* Red de seguridad: si el JavaScript del panel no llegó a cargar, los avisos vuelven a mostrarse como banner */
html.sin-pf [data-flash] { display: block; }

/* ---------- Guardar sin recargar: botón ocupado ---------- */
.boton.cargando { position: relative; color: transparent !important; pointer-events: none; }
.boton.cargando::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-color: #fff #fff transparent transparent; animation: girar .7s linear infinite; }
.boton:not(.boton-primario):not(.boton-peligro).cargando::after { border-color: var(--marca) var(--marca) transparent transparent; }
@keyframes girar { to { transform: rotate(360deg); } }
form[aria-busy="true"] { opacity: .85; transition: opacity .15s; }

/* ---------- Administración > Emails ---------- */
.barra-peligro { fill: #d9534f; }
.linea-cuota { stroke: #d9534f; stroke-width: .8; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; }
.tabs-emails { margin: 4px 0 14px; overflow-x: auto; max-width: 100%; }
.tabs-emails a { white-space: nowrap; }
.lista-emails li { align-items: flex-start; }
.em-cuenta { display: grid; gap: 6px; min-width: 0; flex: 1 1 220px; }
.em-cuenta a { text-decoration: none; color: inherit; display: grid; }
.em-cuenta strong, .em-cuenta small { overflow-wrap: anywhere; }
.em-cifras { text-align: right; white-space: nowrap; display: grid; justify-items: end; }
.em-cifras strong { font-size: 1.15rem; color: var(--tinta); }
.em-cifras small { color: var(--tinta-suave); font-size: .8rem; }
.lista-simple strong small { color: var(--tinta-suave); font-weight: 400; font-size: .8rem; margin-left: 4px; }
@media (max-width: 600px) { .em-cifras { text-align: left; justify-items: start; } }


/* ---------- Seguimiento en el panel ---------- */
.seg-link-panel { margin: 0 0 14px; padding: 12px 14px; background: #f3faf6; border: 1px solid #cfe9db; border-radius: 12px; }
.seg-link-panel label { display: block; margin-bottom: 8px; }
.seg-link-fila { display: flex; gap: 8px; flex-wrap: wrap; }
.seg-link-fila input { flex: 1 1 220px; min-width: 0; font: inherit; font-size: .85rem; padding: 8px 10px; border: 1px solid #cdd8d3; border-radius: 8px; background: #fff; }
.form-aviso { display: inline; margin: 0; }

/* Cobro con Mercado Pago: marca de pago en los pedidos */
.etq-pago { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; background: #eef2ef; color: #3a4a42; }
.etq-pago-ok { background: #dcf3e4; color: #14532d; }
.etq-pago-espera { background: #fff1cf; color: #7a4b00; }
.etq-pago-mal { background: #fde2e2; color: #8a1c1c; }

/* Suscripciones a los planes */
.sus-estado { display: inline-block; font-weight: 600; font-size: .85rem; padding: 2px 10px; border-radius: 99px; background: #eef1ef; color: var(--tinta); }
.sus-estado-ok { background: #e3f4ea; color: #0b6b44; }
.sus-estado-espera { background: #fff4d6; color: #7a5200; }
.sus-estado-mal { background: #fde8e6; color: #9b1c12; }
.acciones-fila { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.acciones-fila form { margin: 0; }

/* ---------- Alarma de pedidos nuevos (suena hasta que se atiende) ---------- */
.alarma-pedidos { grid-column: 1 / -1; align-self: start; position: sticky; top: 0; z-index: 3000; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 14px; background: #b42318; color: #fff; font-weight: 700; animation: alarma-pulso 1.6s ease-in-out infinite; }
.alarma-pedidos .alarma-texto { flex: 1 1 110px; min-width: 0; line-height: 1.3; }
.alarma-pedidos .alarma-aviso { display: block; font-size: 12.5px; font-weight: 600; opacity: .92; }
.alarma-pedidos .alarma-aviso:empty { display: none; }
.alarma-pedidos a.alarma-ver { color: #fff; text-decoration: underline; padding: 8px 0; font-size: 14px; white-space: nowrap; }
.alarma-pedidos button.alarma-silenciar { min-height: 40px; padding: 8px 14px; border: 0; border-radius: 10px; background: #fff; color: #7a1a12; font: inherit; font-weight: 800; cursor: pointer; }
@keyframes alarma-pulso { 50% { background: #d92d20; } }
/* El panel es una grilla (menú + contenido): con el cartel arriba, la fila del cartel mide lo que mide y el resto se reparte lo demás */
body.panel:has(> .alarma-pedidos) { grid-template-rows: auto 1fr; }
html:has(.alarma-pedidos) { scroll-padding-top: 120px; }   /* lo que se enfoca o se lleva a la vista no queda tapado por el cartel */
@media (max-width: 860px) { body.panel:has(> .alarma-pedidos) { grid-template-rows: auto auto 1fr; } }
@media (prefers-reduced-motion: reduce) { .alarma-pedidos { animation: none; } }

/* Ajustes del sonido (volumen, repetición, pantalla encendida) */
.avisos-ajustes { position: fixed; top: 64px; right: 12px; z-index: 3100; width: min(340px, calc(100vw - 24px)); display: grid; gap: 12px; padding: 16px; background: #fff; border: 1px solid #dfe7e3; border-radius: 14px; box-shadow: 0 18px 50px rgba(16, 35, 29, .2); }
.avisos-ajustes .ajuste { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.avisos-ajustes .ajuste-check { display: flex; align-items: center; gap: 8px; }
.avisos-ajustes select { min-height: 42px; padding: 8px 10px; border: 1px solid #cfd9d4; border-radius: 10px; font: inherit; background: #fff; }
.avisos-ajustes .ayuda { margin: 0; font-size: 12.5px; color: #5a6a64; }

/* Cobro de un pedido que se paga por fuera (efectivo, transferencia...) */
.cobro-manual { display: inline-block; margin-left: 10px; }
.check-cobrado { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; }
.ped-cobro { display: block; margin-top: 5px; }
.ped-cobro .etq-pago { white-space: normal; }

/* Menú del panel: emoji adelante de cada sección; el texto queda pegado al emoji y los globitos (pedidos nuevos, candado) a la derecha */
body.panel .menu-item { justify-content: flex-start; gap: 8px; }
body.panel .menu-item small, body.panel .menu-item .candado { margin-left: auto; }
.menu-icono { flex: 0 0 auto; width: 1.35em; text-align: center; font-size: 1.05em; line-height: 1; }

/* ---------- Pedidos en la computadora: resumen del día, detalle al costado, acciones rápidas, tablero ---------- */
/* En celular y tablet no cambia nada: lo nuevo aparece solo en pantallas grandes. */
.barra-hoy, .pedidos-herramientas, .filtros-extra, .ped-acciones, .panel-detalle, .tablero, .ped-hace { display: none; }
.pedidos-herramientas[hidden], .panel-detalle[hidden], .tablero[hidden] { display: none !important; }
@media (min-width: 1100px) {
  .barra-hoy { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 0 0 16px; }
  .hoy-dato { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 12px 16px; }
  .hoy-dato span { display: block; font-size: .8rem; color: var(--tinta-suave); }
  .hoy-dato strong { display: block; font-size: 1.55rem; line-height: 1.2; font-variant-numeric: tabular-nums; }
  .hoy-dato small { display: block; font-size: .78rem; color: var(--tinta-suave); }
  .hoy-alerta { border-color: #e29a92; background: #fff5f3; }
  .hoy-alerta small { color: #b42318; font-weight: 700; }
  .pedidos-herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 12px; }
  .pedidos-herramientas .vistas { display: inline-flex; gap: 6px; }
  .pedidos-herramientas [aria-pressed="true"] { background: var(--marca); border-color: var(--marca); color: #fff; }
  .pedidos-herramientas .atajos { color: var(--tinta-suave); font-size: .8rem; }
  .filtros-extra { display: flex; align-items: center; }
  .filtro-rotulo { flex: none; align-self: center; color: var(--tinta-suave); font-size: .85rem; font-weight: 600; margin-left: 4px; }
  .filtros-extra .chip-estado { min-height: 36px; padding: 4px 12px; font-size: .86rem; }

  .pedidos-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
  .pedidos-cuerpo.con-detalle { grid-template-columns: minmax(0, 1fr) minmax(380px, 430px); }
  .panel-detalle { display: block; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; padding: 16px 18px; }
  .panel-detalle .volver, .panel-detalle .sub-volver { display: none; }
  .panel-detalle .encabezado h1 { font-size: 1.35rem; }
  .panel-detalle-cerrar { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--tinta-suave); }

  .fila-ped { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
  .fila-ped .ped { grid-template-columns: 56px 1fr auto auto auto; }
  .fila-ped .ped-fecha { grid-column: auto; grid-row: auto; }
  .fila-ped .ped-total { grid-column: auto; grid-row: auto; }
  .fila-ped .ped .insignia { grid-column: auto; grid-row: auto; justify-self: auto; }
  .ped-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 150px; }
  .fila-ped.seleccionada > .ped, .tarjeta-ped.seleccionada { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca-suave); }
  .ped-hace { display: block; font-size: .72rem; color: var(--tinta-suave); }
  .ped-hace-alerta { color: #b42318; font-weight: 700; }
  .fila-espera > .ped, .tarjeta-ped.fila-espera { background: #fff6f4; border-color: #efb7af; }
  .fila-nueva > .ped { animation: pedido-nuevo 2.6s ease-out; }
  @keyframes pedido-nuevo { 0% { background: #d9f3e6; transform: translateY(-6px); } 100% { transform: none; } }

  .tablero:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .tablero-col { background: #eef3f0; border-radius: 14px; padding: 10px; min-height: 220px; }
  .tablero-col h2 { display: flex; justify-content: space-between; align-items: center; margin: 4px 6px 10px; font-size: .95rem; }
  .tablero-col h2 span { background: var(--blanco); border-radius: 999px; padding: 1px 10px; font-size: .8rem; }
  .tablero-vacio { margin: 16px 8px; color: var(--tinta-suave); font-size: .88rem; text-align: center; }
  .tarjeta-ped { background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; cursor: pointer; }
  .tarjeta-ped header { display: flex; justify-content: space-between; gap: 8px; }
  .tarjeta-ped .ped-resumen { margin: 4px 0; }
  .tarjeta-etq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 8px; }
  .tarjeta-etq .ped-hace { display: inline; }
  .tarjeta-ped .ped-acciones { justify-content: flex-start; min-width: 0; }
  .tarjeta-ped:focus-visible { outline: 3px solid #1b6fe0; outline-offset: 2px; }
}
.toast .toast-deshacer { margin-left: 12px; border: 0; border-radius: 8px; padding: 4px 10px; background: rgba(255, 255, 255, .18); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }

/* Pedidos en la computadora: cada fila es UNA tarjeta (el enlace + sus acciones). Con el detalle abierto la lista es angosta: las acciones pasan debajo. */
@media (min-width: 1100px) {
  .fila-ped { gap: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); grid-template-columns: minmax(0, 1fr) 300px; }
  .fila-ped > .ped, .fila-ped.seleccionada > .ped, .fila-ped.fila-espera > .ped, .fila-ped.fila-nueva > .ped { border: 0; background: transparent; border-radius: 0; box-shadow: none; animation: none; }
  .fila-ped:hover { border-color: #b9dccb; }
  .fila-ped.seleccionada { border-color: var(--marca); box-shadow: 0 0 0 2px var(--marca-suave); }
  .fila-ped.fila-espera { background: #fff6f4; border-color: #efb7af; }
  .fila-ped.fila-nueva { animation: pedido-nuevo 2.6s ease-out; }
  .fila-ped > .ped-acciones { padding: 0 12px; min-width: 0; }
  .con-detalle .fila-ped { grid-template-columns: minmax(0, 1fr); }
  .con-detalle .fila-ped > .ped-acciones { justify-content: flex-start; padding: 0 14px 12px; }
}

/* Tablero: el detalle del pedido es un panel flotante a la derecha (las tres columnas conservan todo el ancho) */
@media (min-width: 1100px) {
  .pedidos-cuerpo.modo-tablero.con-detalle { grid-template-columns: minmax(0, 1fr); }
  .modo-tablero .panel-detalle { position: fixed; top: 12px; right: 12px; bottom: 12px; width: 440px; max-height: none; z-index: 60; box-shadow: 0 24px 70px rgba(16, 35, 29, .28); }
  .tarjeta-ped header { flex-wrap: wrap; }
  .tarjeta-ped .ped-total { white-space: nowrap; }
}

/* ---------- Pedidos en la computadora: detalle compacto (poco scroll), barra de acciones fija y uso de todo el ancho ---------- */
@media (min-width: 1100px) {
  /* La pantalla de pedidos aprovecha el ancho disponible (antes quedaba un costado vacío en pantallas grandes) */
  .contenido:has(#pedidos-app) { max-width: min(1760px, 100%); }
  .pedidos-cuerpo.con-detalle { grid-template-columns: minmax(0, 1fr) minmax(420px, 520px); }
  .pedidos-principal { container: pedidos / inline-size; }
  /* Si la lista tiene lugar, los botones van en la misma línea que el pedido (menos alto por fila) */
  @container pedidos (min-width: 760px) {
    .pedidos-cuerpo .fila-ped { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .pedidos-cuerpo .fila-ped > .ped-acciones { flex-wrap: nowrap; padding: 0 12px; justify-content: flex-end; min-width: 0; }
  }
  /* Con poco lugar (por ejemplo, laptop con el detalle abierto) la fila se acomoda en dos líneas: la fecha deja de pisar al nombre */
  @container pedidos (max-width: 640px) {
    .fila-ped > .ped { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; }
    .fila-ped > .ped .ped-num { grid-row: 1 / span 2; }
    .fila-ped > .ped .ped-datos { grid-column: 2; grid-row: 1; }
    .fila-ped > .ped .ped-total { grid-column: 3; grid-row: 1; }
    .fila-ped > .ped .ped-fecha { grid-column: 2; grid-row: 2; }
    .fila-ped > .ped .insignia { grid-column: 3; grid-row: 2; justify-self: end; }
  }
  /* Los textos largos de cobro no parten la fila en tres renglones */
  .ped-cobro .etq-pago { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
  .fila-ped > .ped { padding-block: 10px; }

  /* Detalle al costado: compacto */
  .panel-detalle { padding: 0; }
  .panel-detalle .detalle-fragmento { padding: 0 16px 14px; }
  .detalle-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 34px 8px 0; }
  .detalle-cab h2 { margin: 0; font-size: 1.3rem; }
  .detalle-cab .sub { margin: 0; }
  .detalle-cab .insignia { margin-left: auto; }
  .barra-acciones { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 -16px 12px; padding: 8px 16px 10px; background: var(--blanco); border-bottom: 1px solid var(--linea); }
  .barra-acciones form { margin: 0; display: inline-flex; align-items: center; gap: 8px; }
  .barra-acciones .boton { width: auto; min-height: 40px; padding-inline: 14px; white-space: nowrap; }
  .barra-acciones .check-cobrado { margin: 0; font-size: .85rem; }
  .mas-acciones { position: relative; }
  .mas-acciones > summary { list-style: none; cursor: pointer; }
  .mas-acciones > summary::-webkit-details-marker { display: none; }
  .mas-lista { position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; min-width: 220px; display: grid; gap: 8px; padding: 10px; background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px; box-shadow: 0 14px 40px rgba(16, 35, 29, .2); }
  .mas-lista form { display: grid; }
  .mas-lista .boton { width: 100%; justify-content: center; }
  .panel-detalle .detalle-ped { gap: 10px; }
  .panel-detalle .bloque { padding: 12px 14px; }
  .panel-detalle .bloque h2 { font-size: 1rem; margin: 0 0 6px; }
  .panel-detalle .dato-cliente { margin-top: 0; font-size: 1.05rem; }
  .panel-detalle .datos-entrega { grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: .9rem; margin: 6px 0 4px; }
  .panel-detalle .datos-entrega li:has(.etq-pago), .panel-detalle .datos-entrega li:has(.etq-entrega) { grid-column: 1 / -1; }
  .panel-detalle .notas-ped { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: #fff8e1; }
  .panel-detalle .detalle-ped .ayuda { display: none; }
  .panel-detalle .avisar-det .ayuda { display: block; }
  .panel-detalle .tabla-items { margin: 4px 0 8px; font-size: .92rem; }
  .panel-detalle .tabla-items th, .panel-detalle .tabla-items td { padding: 5px 4px; }
  .panel-detalle .tabla-items tfoot th, .panel-detalle .tabla-items tfoot td { font-size: 1.05rem; }
  .panel-detalle .pie-detalle { padding: 8px 14px; }
  /* «Avisar al cliente» plegado: el texto de cada mensaje se ve entero (antes quedaba una letra por línea) */
  .avisar-det > summary { cursor: pointer; font-weight: 700; list-style: none; }
  .avisar-det > summary::-webkit-details-marker { display: none; }
  .avisar-det > summary small { font-weight: 400; color: var(--tinta-suave); margin-left: 6px; }
  .avisar-det[open] > summary { margin-bottom: 10px; }
  .panel-detalle .aviso-item { flex-direction: column; align-items: stretch; }
  .panel-detalle .aviso-cuerpo { width: 100%; }
  .panel-detalle .aviso-acc { justify-content: flex-start; }
  .panel-detalle .aviso-acc .boton { flex: 0 1 auto; }
  .panel-detalle .seg-link-fila input { flex: 1 1 160px; }
}

/* Estado de impresión de la comanda */
.etq-impreso { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; vertical-align: middle; background: #eef2ef; color: #3a4a42; margin-left: 4px; white-space: nowrap; }
.etq-sin-imprimir { background: #fff1cf; color: #7a4b00; }
.ped-cobro .etq-impreso:first-child { margin-left: 0; }

/* Laptops (poca altura): el encabezado de pedidos ocupa menos para que se vean antes los pedidos */
@media (min-width: 1100px) and (max-height: 900px) {
  .contenido:has(#pedidos-app) { padding-top: 18px; }
  #pedidos-app .encabezado { margin-bottom: 8px; }
  #pedidos-app .encabezado .sub { display: none; }
  .barra-hoy { gap: 10px; margin-bottom: 10px; }
  .hoy-dato { padding: 8px 12px; }
  .hoy-dato strong { font-size: 1.25rem; }
  .pedidos-herramientas .atajos { display: none; }
  .pedidos-herramientas { margin-bottom: 8px; }
  #chips-pedidos .filtros-estado { margin-bottom: 8px; }
  .filtros-extra .chip-estado { min-height: 32px; padding-block: 2px; }
}