/* Recepta — menú lateral (reemplaza la barra de arriba) e Inventario. Usa los colores de styles.css. */

/* ---- Menú lateral ---------------------------------------------------------------------- */
:root { --lateral: 248px; }
.armazon { min-height: 100vh; }
.lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--lateral); z-index: 30;
  background: var(--hoja); border-right: 1px solid var(--perla);
  display: flex; flex-direction: column; padding: 16px 12px; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lateral .marca-enlace { padding: 4px 10px 18px; }
.lateral .marca { font-size: 1.3rem; }
.lateral .marca .logo { width: 32px; height: 32px; }
.cargar {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 4px 18px; padding: 11px; border-radius: 12px;
  background: var(--cobalto); color: #fff; font-weight: 800; box-shadow: 0 6px 16px rgba(43, 75, 255, 0.25);
  transition: background 0.15s, transform 0.15s;
}
.cargar:hover { background: var(--cobalto-hondo); color: #fff; text-decoration: none; transform: translateY(-1px); }
.cargar .icono { width: 18px; height: 18px; }
.lateral .nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; overflow-x: visible; flex: 1; padding-left: 0; }
.lateral .nav a, .grupo-boton {
  display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--tinta);
  font-weight: 600; font-size: 0.95rem; border: 0; background: none; width: 100%; text-align: left; position: relative; cursor: pointer;
  border-bottom: 0;
}
.lateral .nav a:hover, .grupo-boton:hover { background: var(--perla-suave); text-decoration: none; color: var(--tinta); border-color: transparent; }
.lateral .icono { width: 19px; height: 19px; color: var(--pizarra); flex: none; }
.lateral .nav > a[aria-current='page'], .grupo.activo > .grupo-boton { background: var(--cobalto-suave); color: var(--cobalto); }
.lateral .nav > a[aria-current='page'] .icono, .grupo.activo > .grupo-boton .icono { color: var(--cobalto); }
.lateral .contador { margin-left: auto; }
.grupo-boton .flecha { margin-left: auto; width: 16px; height: 16px; transition: transform 0.2s; }
.grupo.abierto .flecha { transform: rotate(180deg); }
.sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.grupo.abierto .sub { grid-template-rows: 1fr; }
.sub > div { overflow: hidden; margin-left: 21px; border-left: 1px solid var(--perla); }
.lateral .sub a { padding: 7px 12px 7px 20px; font-size: 0.9rem; font-weight: 500; border-radius: 0 8px 8px 0; gap: 0; }
.lateral .sub a[aria-current='page'] { color: var(--cobalto); font-weight: 700; background: var(--cobalto-suave); }
.separador { height: 1px; background: var(--perla); margin: 10px 8px; }
.lateral .usuario { display: flex; align-items: center; gap: 10px; padding: 12px 6px 2px; border-top: 1px solid var(--perla); margin-top: 8px; color: var(--tinta); }
.lateral .quien { flex: 1; min-width: 0; font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cuerpo-app { margin-left: var(--lateral); min-height: 100vh; }
.cuerpo-app .barra { display: none; }
.cuerpo-app main { padding-top: 28px; }
.velo { position: fixed; inset: 0; background: rgba(20, 26, 51, 0.35); z-index: 25; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
.velo.visible { opacity: 1; pointer-events: auto; }
.menu-movil { width: 40px; height: 40px; padding: 0; font-size: 1.1rem; }

@media (max-width: 900px) {
  .lateral { transform: translateX(-100%); visibility: hidden; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.25s; }
  .lateral.abierto { transform: none; visibility: visible; box-shadow: 0 0 40px rgba(20, 26, 51, 0.2); }
  /* Mientras se arrastra con el dedo, el menú y el velo siguen al dedo sin animación */
  .lateral.arrastrando { visibility: visible; transition: none; box-shadow: 0 0 40px rgba(20, 26, 51, 0.2); }
  .velo.arrastrando { transition: none; }
  .cuerpo-app { margin-left: 0; }
  .cuerpo-app .barra { display: flex; align-items: center; gap: 12px; padding: 10px 16px; position: sticky; top: 0; z-index: 10; }
  .cuerpo-app main { padding-top: 18px; }
}

/* ---- Inventario: Productos ---------------------------------------------------------------- */
.resumen-datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.dato { background: var(--hoja); border: 1px solid var(--perla); border-radius: var(--radio); padding: 14px 16px; box-shadow: var(--sombra); }
.dato span { display: block; color: var(--pizarra); font-size: 0.8rem; font-weight: 600; }
.dato b { font-size: 1.35rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dato.alerta b { color: var(--ambar-texto); }
.ver-precios { margin-bottom: 16px; }
.etiqueta-campo { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 6px; }
.segmentos { display: inline-flex; background: var(--perla-suave); border-radius: 12px; padding: 4px; gap: 2px; flex-wrap: wrap; }
.segmentos button { border: 0; background: none; padding: 8px 16px; border-radius: 9px; color: var(--pizarra); }
.segmentos button:hover { background: rgba(255, 255, 255, 0.6); color: var(--tinta); }
.segmentos button.activo { background: var(--hoja); color: var(--tinta); box-shadow: 0 1px 3px rgba(20, 26, 51, 0.1); }
.tabla-caja { background: var(--hoja); border: 1px solid var(--perla); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; }
.tabla-caja .herramientas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px; border-bottom: 1px solid var(--perla); margin: 0; }
.tabla-caja .herramientas input[type='search'] { width: 280px; max-width: 100%; }
.chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 12px; border-radius: 999px; border: 1px solid var(--perla);
  background: var(--hoja); font-size: 0.82rem; font-weight: 700; margin: 0; cursor: pointer;
}
.chip select { border: 0; background: none; width: auto; padding: 4px 6px; font-size: 0.82rem; font-weight: 700; cursor: pointer; box-shadow: none !important; }
.chip.lleno { background: var(--cobalto-suave); border-color: #cdd6ff; color: var(--cobalto); }
.chip.lleno select { color: var(--cobalto); }
.limpiar { margin-left: auto; border: 0; background: none; }
.tabla-desplazable { overflow-x: auto; }
.tabla-caja .codigo { display: block; font-size: 0.8rem; }
.pie-tabla { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--perla); flex-wrap: wrap; font-size: 0.88rem; }
.pie-tabla label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.pie-tabla select { width: auto; padding: 4px 8px; }
.tabla-caja .vacio { padding: 48px 16px; }
.proximamente { text-align: center; padding: 48px 24px; }
.proximamente-icono { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: var(--cobalto-suave); color: var(--cobalto); }
.proximamente-icono .icono { width: 28px; height: 28px; }
.proximamente p { margin: 0 auto 18px; }

/* ---- Ventana "Nuevo producto" ---- */
.ventana-fondo { position: fixed; inset: 0; z-index: 60; background: rgba(20, 26, 51, 0.35); backdrop-filter: blur(2px); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity 0.2s; }
.ventana-fondo.abierta { opacity: 1; }
.ventana { width: 100%; max-width: 640px; max-height: calc(100vh - 32px); overflow: auto; background: var(--hoja); border-radius: 20px; box-shadow: 0 24px 60px rgba(20, 26, 51, 0.25); transform: translateY(12px) scale(0.98); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.ventana-fondo.abierta .ventana { transform: none; }
.ventana header { padding: 18px 24px; border-bottom: 1px solid var(--perla); display: flex; justify-content: space-between; align-items: center; }
.ventana h2 { margin: 0; }
.ventana .cerrar { border: 0; background: none; width: 34px; height: 34px; padding: 0; color: var(--pizarra); font-size: 1.1rem; }
.ventana-cuerpo { padding: 20px 24px; display: grid; gap: 16px; }
.ventana .dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ventana .req { color: var(--cobalto); }
.con-signo { display: flex; border: 1px solid var(--perla); border-radius: 10px; overflow: hidden; background: var(--hoja); }
.con-signo span { padding: 10px; background: var(--niebla); color: var(--pizarra); border-right: 1px solid var(--perla); font-weight: 700; }
.con-signo input { border: 0; border-radius: 0; box-shadow: none !important; }
.con-signo:focus-within { border-color: var(--cobalto); box-shadow: var(--foco); }
.calculo { display: grid; grid-template-columns: 1fr auto 1fr auto 0.7fr auto 1.2fr; align-items: end; gap: 8px; background: var(--niebla); border-radius: 14px; padding: 14px; }
.calculo .op { padding-bottom: 11px; color: var(--pizarra); font-weight: 800; }
.calculo .fijo { padding: 10px 12px; border: 1px solid var(--perla); border-radius: 10px; background: var(--hoja); color: var(--pizarra); font-weight: 700; white-space: nowrap; }
.calculo .total { padding: 10px 12px; border: 1px solid #cdd6ff; border-radius: 10px; background: var(--cobalto-suave); color: var(--cobalto); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ventana .ayuda { font-size: 0.82rem; margin: -6px 0 0; }
.ventana footer { padding: 14px 24px; border-top: 1px solid var(--perla); display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 700px) {
  .resumen-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ventana .dos, .calculo { grid-template-columns: 1fr; }
  .calculo .op { display: none; }
}

/* Íconos dentro de botones */
button .icono, .boton .icono { width: 18px; height: 18px; flex: none; }

/* En el celular, styles.css reordena la barra vieja: en el menú lateral se respeta el orden */
.lateral .marca-enlace, .lateral .nav, .lateral .usuario, .lateral .cargar { order: 0; }
.lateral .usuario { margin-left: 0; }
.lateral .nav { flex-basis: auto; padding-bottom: 0; }