/* Recepta: menú lateral agrupado en bloques (Operación, Gestión, Personas…) y tarjeta de estado al pie */
:root { --lateral: 300px; }
.lateral .nav { padding-right: 2px; scrollbar-width: thin; overflow-x: hidden; }
.lateral .nav a, .grupo-boton { padding: 7px 12px; }
.lateral .sub a { white-space: nowrap; overflow: hidden; }
/* El texto se recorta con "…" y la etiqueta Plus queda siempre entera a la derecha */
.lateral .sub a .texto-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.grupo + .grupo, .grupo + a, a + .grupo { margin-top: 0; }
.titulo-menu { font-size: 0.66rem; font-weight: 800; color: var(--pizarra); text-transform: uppercase; letter-spacing: 0.08em; padding: 14px 12px 4px; opacity: 0.85; }
.lateral .nav > .titulo-menu:first-child { padding-top: 2px; }

/* Tarjeta "Tu mes con Recepta" */
.estado-lateral {
  margin: 10px 4px 0; padding: 12px 12px 10px; border-radius: 14px; flex: none;
  background: var(--niebla); border: 1px solid var(--perla); display: grid; gap: 6px; font-size: 0.8rem;
}
.estado-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.estado-cabeza b { font-size: 0.82rem; }
.pastilla-viva {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  background: var(--menta-suave); color: var(--menta-texto); font-size: 0.66rem; font-weight: 800;
}
.pastilla-viva::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--menta); animation: latido 1.8s ease-in-out infinite; }
@keyframes latido { 50% { opacity: 0.35; } }
.estado-dato { display: flex; justify-content: space-between; gap: 8px; color: var(--pizarra); font-weight: 600; }
.estado-dato b { color: var(--tinta); font-variant-numeric: tabular-nums; }
.estado-dato b.ahorro-horas { color: var(--menta-texto); }
.estado-revisar { margin-top: 4px; font-weight: 800; color: var(--cobalto); }
.estado-ok { margin-top: 4px; font-weight: 700; color: var(--menta-texto); }
@media (max-height: 760px) { .estado-lateral .estado-dato:nth-of-type(2) { display: none; } }
@media (prefers-reduced-motion: reduce) { .pastilla-viva::before { animation: none; } }

/* Menú más ancho y aireado: se leen enteros los nombres */
.lateral .nav a, .grupo-boton { font-size: 0.95rem; }
.lateral .sub a { font-size: 0.93rem; padding-top: 8px; padding-bottom: 8px; }

/* Pestañas arriba de la pantalla: juntan secciones parecidas (Productos · Categorías · Etiquetas…) */
.pestanas {
  max-width: var(--ancho); margin: 0 auto; padding: 22px 16px 0; display: flex; gap: 4px;
  overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--perla);
}
.pestanas[hidden] { display: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a {
  flex: none; padding: 9px 14px 11px; color: var(--pizarra); font-weight: 700; font-size: 0.92rem; text-decoration: none;
  border-bottom: 2.5px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; white-space: nowrap;
}
.pestanas a:hover { color: var(--tinta); background: var(--perla-suave); text-decoration: none; }
.pestanas a[aria-current='page'] { color: var(--cobalto); border-bottom-color: var(--cobalto); }
.pestanas:not([hidden]) + main { padding-top: 22px; }
@media (max-width: 900px) { .pestanas { padding-top: 12px; } }

/* Nombre abajo a la izquierda: abre Mi perfil */
.perfil-enlace { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; border-radius: 10px; padding: 4px 6px 4px 4px; margin-left: -4px; transition: background 0.15s; }
.perfil-enlace:hover, .perfil-enlace[aria-current='page'] { background: var(--perla-suave); text-decoration: none; }
.perfil-enlace .quien { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }

/* Mi perfil */
.perfil-cabecera { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 16px; }
.avatar-grande { width: 64px; height: 64px; font-size: 1.4rem; flex: none; }
.perfil-quien { flex: 1; min-width: 200px; } .perfil-quien h2 { margin: 0 0 2px; }
.perfil-avance { width: min(320px, 100%); display: grid; gap: 4px; }
.perfil-grilla { grid-template-columns: 1.4fr 1fr; }
.logo-negocio { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.logo-vista { width: 120px; height: 120px; border-radius: 16px; border: 1px dashed var(--perla); display: grid; place-items: center; background: #fff; overflow: hidden; flex: none; }
.logo-vista img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-negocio label.boton { margin: 0; cursor: pointer; }
@media (max-width: 1000px) { .perfil-grilla { grid-template-columns: 1fr; } }

/* Contador de cambios de precio pendientes en el menú: en "Precios" y, con el grupo cerrado, en "Inventario" */
.grupo-boton .contador.en-grupo { margin-left: auto; }
.grupo-boton .contador.en-grupo:not(.oculto) + .flecha { margin-left: 8px; }
.lateral .grupo-boton { justify-content: flex-start; }   /* siempre a la izquierda, tenga o no contador */
.grupo.abierto .grupo-boton .contador.en-grupo { display: none; }
.lateral .sub a .contador { margin-left: auto; flex: none; }
.grupo.abierto .grupo-boton .contador.en-grupo + .flecha { margin-left: auto; }