@charset "UTF-8";
/* ===========================================================
   BASE — Nature's Wise
   Paleta de colores y estilos generales del sistema.
   Este archivo se carga en TODAS las páginas.

   Si querés cambiar un color de todo el sistema, cambialo acá
   y se actualiza en todos lados.
   =========================================================== */
:root {
  /* --- Paleta principal (los 6 de siempre) --- */
  --verde-oscuro: #556B2F;
  --verde-claro: #8A9A5B;
  --marron-claro: #C2A47E;
  --marron-oscuro: #4A2C1A;
  --clarito: #E8DDCF;
  --blanco: #F5F1EA;
  /* --- Tonos derivados --- */
  --beige-navbar: #E0D2BC; /* fondo del navbar de inventario */
  --borde-fuerte: #A9855C; /* bordes de cards y modales */
  --borde-hover: #8A6A3E;
  --verde-suave: #A0B06E; /* hover de botones verdes claros */
  /* --- Rojos / acciones destructivas --- */
  --rojo: #8B3A3A;
  --rojo-hover: #a13f3f;
  --rojo-fuerte: #9C4A32;
  --rojo-claro: #B25A40;
  --rojo-fondo: #F3E2DC;
  --rojo-borde: #D9A895;
  /* --- Semáforo de stock --- */
  --stock-ok: #28a745;
  --stock-bajo: #dc3545;
  --stock-alerta: #d4a017;
  /* --- Textos --- */
  --texto-oscuro: #2C2C2C;
  --texto-suave: #6b6b6b;
  --texto-tenue: #8c7662;
  /* --- Tipografía --- */
  --fuente-titulos: Georgia, serif;
  /* --- Medidas del layout --- */
  --ancho-sidebar: 280px;
  --ancho-sidebar-mini: 70px;
  --alto-navbar: 78px;
}

/* ===========================================================
   TIPOGRAFÍA GENERAL
   =========================================================== */
/* Títulos con la serif de la marca */
.titulo-nw {
  color: var(--marron-oscuro);
  font-family: var(--fuente-titulos);
}

/* Texto chico verde que acompaña a los títulos */
.subtitulo-nw {
  color: var(--verde-claro);
}

/* Texto gris secundario */
.texto-suave {
  color: var(--texto-suave);
}

/* ===========================================================
   LAYOUT — Nature's Wise
   Sidebars, navbar y los márgenes del contenido.
   Este archivo se carga en TODAS las páginas.
   =========================================================== */
/* ===========================================================
   SIDEBAR — común a los dos (el ancho y el mini)
   =========================================================== */
.sidebar-nw {
  height: 100vh;
  background-color: var(--clarito);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

/* Sidebar ancho (280px) — SideBar_Estirado.html */
.sidebar-nw-ancho {
  width: var(--ancho-sidebar);
  overflow-y: auto;
}

/* Sidebar angosto de íconos (70px) — SideBar_Home.html */
.sidebar-nw-mini {
  width: var(--ancho-sidebar-mini);
}

.sidebar-nw-mini .sidebar-logo {
  border-bottom: 1px solid var(--marron-claro);
}

.sidebar-nw-mini .sidebar-usuario {
  border-top: 1px solid var(--marron-claro);
}

.sidebar-nw-mini .sidebar-usuario > a {
  color: var(--marron-oscuro);
}

/* El menú tiene que quedar por encima del sidebar */
.sidebar-nw-mini .menu-usuario-nw {
  z-index: 1000;
}

/* --- Links de navegación de los sidebars --- */
.nav-link.active,
.nav-link:hover {
  background-color: var(--verde-claro) !important;
  color: var(--texto-oscuro) !important;
}

.icon-sidebar .nav-link {
  padding: 12px;
  text-align: center;
  font-size: 1.3rem;
  color: var(--verde-oscuro);
  border-radius: 8px;
  margin: 2px 8px;
}

.nav-link.link-body-emphasis {
  color: var(--verde-oscuro) !important;
  font-size: 1.1rem;
  padding: 10px 12px;
  white-space: nowrap;
}

.nav-link.link-body-emphasis i {
  font-size: 1.25rem;
}

a.link-body-emphasis {
  color: var(--verde-oscuro) !important;
}

/* --- Menú desplegable del usuario --- */
.dropdown-toggle::after {
  color: var(--marron-oscuro);
}

.dropdown-item:hover {
  background-color: var(--verde-claro) !important;
  color: white !important;
}

.menu-usuario-nw {
  background-color: var(--clarito);
  border: 1px solid var(--marron-claro);
}

.menu-usuario-nw .divisor-nw {
  border-color: var(--marron-claro);
}

.menu-usuario-nw .item-cuenta {
  color: var(--marron-oscuro);
}

.menu-usuario-nw .item-salir {
  color: var(--verde-oscuro);
}

/* Foto de perfil redonda del sidebar / navbar */
.foto-perfil-nw {
  object-fit: cover;
}

/* ===========================================================
   CONTENIDO — el bloque que va al lado del sidebar
   =========================================================== */
/* Para páginas con el sidebar ancho */
.contenido-nw {
  margin-left: var(--ancho-sidebar);
  width: 100%;
}

/* Para páginas con el sidebar de íconos */
.contenido-nw-mini {
  margin-left: var(--ancho-sidebar-mini);
}

/* Cuando además hay navbar fijo arriba (inventario) */
.contenido-nw-navbar {
  margin-left: var(--ancho-sidebar);
  margin-top: var(--alto-navbar);
}

/* ===========================================================
   NAVBAR — la barra superior de inventario
   =========================================================== */
.navbar-nw {
  background-color: var(--beige-navbar);
  border-bottom: 1px solid var(--marron-claro);
  border-left: 1px solid var(--marron-claro);
  left: var(--ancho-sidebar);
  height: var(--alto-navbar);
}

.navbar-nw .nav-link.link-body-emphasis {
  color: var(--verde-oscuro) !important;
  border-radius: 8px;
  padding: 8px 12px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar-nw .nav-link.link-body-emphasis:hover,
.navbar-nw .nav-link.active {
  background-color: var(--verde-claro) !important;
  color: var(--texto-oscuro) !important;
  border-radius: 8px;
}

.navbar-nw .form-control {
  border: 1px solid var(--marron-claro);
  background-color: var(--blanco);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.navbar-nw .form-control:focus {
  border-color: var(--verde-oscuro);
  box-shadow: 0 0 0 0.15rem rgba(85, 107, 47, 0.25);
}

/* ===========================================================
   CABECERA DE PÁGINA (la de la home, con logo y usuario)
   =========================================================== */
.cabecera-nw {
  background-color: var(--clarito);
  border: 1px solid var(--marron-claro);
  border-radius: 12px;
}

.cabecera-nw .logo-cabecera {
  border-radius: 50%;
  border: 2px solid var(--marron-claro);
  object-fit: contain;
  background: white;
}

.cabecera-nw .nombre-tienda {
  color: var(--marron-oscuro);
  font-family: var(--fuente-titulos);
}

.cabecera-nw .rubro-tienda {
  color: var(--verde-claro);
}

.cabecera-nw .avatar-cabecera {
  object-fit: cover;
  border: 2px solid var(--marron-claro);
}

/* Encabezado centrado tipo "SISTEMA DE GESTIÓN / Acceso Rápido" */
.encabezado-seccion .volanta {
  color: var(--marron-claro);
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.encabezado-seccion .titulo {
  color: var(--marron-oscuro);
  font-family: var(--fuente-titulos);
  font-weight: normal;
}

/* Saludo al usuario en la cabecera de la home */
.cabecera-nw .saludo-usuario {
  color: var(--marron-oscuro);
  font-weight: 500;
}

/* ===========================================================
   COMPONENTES — Nature's Wise
   Piezas reutilizables: paneles, botones, etiquetas, badges.
   Este archivo se carga en TODAS las páginas.

   Todo lo que uses en más de una pantalla va acá.
   =========================================================== */
/* ===========================================================
   PANEL — la "tarjeta" beige que envuelve el contenido
   Reemplaza a:
   style="padding:32px; background-color:#F5F1EA;
          border:1px solid #C2A47E; border-radius:16px;"
   =========================================================== */
.panel-nw {
  padding: 32px;
  background-color: var(--blanco);
  border: 1px solid var(--marron-claro);
  border-radius: 16px;
}

/* Variante con más aire arriba y abajo (pantallas de confirmación) */
.panel-nw-holgado {
  padding: 48px 32px;
}

/* Contenedor centrado con ancho máximo, para los formularios.
   Lleva position:relative para que el botón "Volver" pueda
   flotar al costado. */
.contenedor-centrado {
  margin: 10px auto;
  position: relative;
}

/* --- Anchos máximos --- */
.ancho-400 {
  max-width: 400px;
}

.ancho-600 {
  max-width: 600px;
}

.ancho-700 {
  max-width: 700px;
}

.ancho-1000 {
  max-width: 1000px;
}

.ancho-1100 {
  max-width: 1100px;
}

/* --- Separación arriba y abajo de la página --- */
.margen-40 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.margen-60 {
  margin-top: 60px;
  margin-bottom: 60px;
}

.margen-80 {
  margin-top: 80px;
  margin-bottom: 80px;
}

.margen-100 {
  margin-top: 100px;
  margin-bottom: 100px;
}

/* --- Campo de formulario con los colores de la marca --- */
.campo-nw {
  border-color: var(--marron-claro);
  background-color: var(--blanco);
}

/* ===========================================================
   TÍTULOS DE SECCIÓN dentro de un panel
   Reemplaza a los <h6 style="color:#556B2F; font-weight:bold;
   border-bottom:1px solid #C2A47E; padding-bottom:5px;">
   =========================================================== */
.titulo-seccion {
  color: var(--verde-oscuro);
  font-weight: bold;
  border-bottom: 1px solid var(--marron-claro);
  padding-bottom: 5px;
  margin-top: 20px;
}

/* El primero de la página no necesita separación arriba */
.titulo-seccion:first-of-type {
  margin-top: 0;
}

/* ===========================================================
   ETIQUETAS DE FORMULARIO
   Todos los <label> dentro de un panel toman el estilo solos.
   Antes iba: style="color:#4A2C1A; font-weight:bold;"
   =========================================================== */
.panel-nw label {
  color: var(--marron-oscuro);
  font-weight: bold;
}

/* Por si necesitás la etiqueta fuera de un panel */
.label-nw {
  color: var(--marron-oscuro);
  font-weight: bold;
}

/* Etiqueta en línea con el campo (email en modificar cuenta) */
.label-en-linea {
  white-space: nowrap;
  margin-bottom: 0;
}

/* ===========================================================
   BOTONES
   =========================================================== */
/* --- Botón principal verde (guardar, cargar, iniciar sesión) --- */
.btn-natureswise {
  background-color: var(--verde-claro);
  color: white;
  font-weight: bold;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-natureswise:hover {
  transform: translateY(-2px);
  background-color: var(--verde-oscuro) !important;
  color: white;
}

/* --- Botón secundario tostado --- */
.btn-tostado {
  background-color: var(--marron-claro);
  color: var(--marron-oscuro);
  font-weight: bold;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-tostado:hover {
  transform: translateY(-2px);
  color: var(--marron-oscuro);
}

/* --- Botón destructivo rojo --- */
.btn-eliminar {
  background-color: var(--rojo);
  color: white;
  font-weight: bold;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-eliminar:hover {
  transform: translateY(-2px);
  background-color: var(--rojo-hover) !important;
  color: white;
}

/* --- Botón "Volver" --- */
.btn-volver {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--verde-claro);
  color: white;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-volver:hover {
  background-color: var(--verde-oscuro);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.btn-volver:active {
  transform: translateY(0);
  box-shadow: none;
}

/* El "Volver" flotando al costado del panel.
   Necesita que el padre tenga position: relative
   (se lo da .contenedor-centrado). */
.btn-volver-flotante {
  position: absolute;
  top: 0;
  left: -117px;
}

/* --- Botón grande con ícono (Ir a la tienda) --- */
.btn-destacado-nw {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--verde-claro);
  color: white;
  font-weight: bold;
  padding: 10px 24px;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 10px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-destacado-nw:hover {
  transform: translateY(-2px);
  background-color: var(--verde-oscuro);
  color: white;
}

/* --- Botoncito "+" al lado de un select --- */
.btn-mas-nw {
  background-color: var(--verde-claro);
  color: white;
  font-weight: bold;
}

.btn-mas-nw:hover {
  background-color: var(--verde-oscuro);
  color: white;
}

/* ===========================================================
   SELECT con flecha propia
   =========================================================== */
.select-flecha {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234A2C1A' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 32px;
  transition: transform 0.15s ease;
}

/* Al abrirlo, la flecha apunta para arriba */
.select-flecha:focus {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%234A2C1A' d='M8 5l5 5H3z'/%3E%3C/svg%3E");
}

/* ===========================================================
   BADGES Y DATOS DE PRODUCTO
   Se usan en el listado de inventario y en el detalle.
   =========================================================== */
.categoria-badge {
  display: inline-block;
  background-color: var(--verde-claro);
  color: var(--blanco);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 6px;
}

.precio-venta {
  color: var(--verde-oscuro);
  font-weight: 700;
  font-size: 1.6rem;
}

/* --- Semáforo de stock --- */
.stock-texto {
  font-size: 0.9rem;
  font-weight: 600;
}

.stock-ok {
  color: var(--stock-ok);
}

.stock-bajo {
  color: var(--stock-bajo);
}

.stock-amarillo {
  color: var(--stock-alerta);
}

.stock-contexto {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--texto-tenue);
}

/* --- Badge de estado --- */
.estado-badge {
  font-size: 0.75rem;
  padding: 4px 12px;
  border-radius: 4px;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  display: inline-block;
}

.estado-disponible {
  background-color: var(--stock-ok);
}

.estado-sinstock {
  background-color: var(--stock-bajo);
}

.estado-bajo {
  background-color: var(--stock-alerta);
}

/* ===========================================================
   TARJETA DE ACCESO RÁPIDO (la grilla de la home)
   =========================================================== */
.seccion-card {
  background-color: var(--blanco);
  border: 1px solid var(--marron-claro);
  border-radius: 16px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: block;
}

.seccion-card:hover {
  background-color: var(--verde-claro);
  border-color: var(--verde-oscuro);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(85, 107, 47, 0.3);
}

.seccion-card:hover i,
.seccion-card:hover p {
  color: white !important;
}

.seccion-card i {
  font-size: 3rem;
  color: var(--verde-oscuro);
  transition: color 0.3s ease;
}

.seccion-card p {
  margin: 12px 0 0;
  font-weight: bold;
  font-size: 15px;
  color: var(--marron-oscuro);
  transition: color 0.3s ease;
}

/* ===========================================================
   IMÁGENES
   =========================================================== */
/* Logo redondo con borde (login, registro, cabeceras) */
.logo-redondo {
  border-radius: 50%;
  border: 2px solid var(--marron-claro);
  object-fit: contain;
}

/* Foto de perfil redonda grande */
.avatar-grande {
  border-radius: 50%;
  border: 2px solid var(--marron-claro);
  object-fit: cover;
}

/* Marco cuadrado beige para la imagen de un producto */
.marco-imagen-nw {
  background-color: var(--clarito);
  border: 2px solid var(--marron-claro);
  border-radius: 12px;
  object-fit: contain;
}

/* Caja vacía cuando el producto no tiene imagen */
.marco-imagen-vacio {
  width: 200px;
  height: 200px;
  margin: 0 auto 12px auto;
  background-color: var(--clarito);
  border: 2px solid var(--marron-claro);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.marco-imagen-vacio i {
  font-size: 2.5rem;
  color: var(--marron-claro);
}

/* ===========================================================
   MODAL BÁSICO (alta rápida de categoría y proveedor)
   =========================================================== */
.modal-contenido-nw {
  background-color: var(--blanco);
  border: 1px solid var(--marron-claro);
  border-radius: 16px;
}

.modal-contenido-nw .modal-header {
  border-bottom: 1px solid var(--marron-claro);
}

.modal-contenido-nw .modal-footer {
  border-top: 1px solid var(--marron-claro);
}

.modal-contenido-nw .modal-title {
  color: var(--marron-oscuro);
  font-family: var(--fuente-titulos);
}

.modal-contenido-nw label {
  color: var(--marron-oscuro);
  font-weight: bold;
}

/* ===========================================================
   ENLACES Y TEXTOS CHICOS
   =========================================================== */
.link-nw {
  color: var(--verde-oscuro);
}

/* Pie de formulario: "¿Ya tenés cuenta? Iniciar sesión" */
.pie-form-nw {
  color: var(--verde-claro);
}

/* Nota gris arriba de una imagen ("Actualmente:") */
.nota-imagen {
  color: var(--verde-claro);
  margin-bottom: 8px;
}

/* ===========================================================
   PANTALLAS DE CONFIRMACIÓN (borrar producto / borrar cuenta)
   =========================================================== */
.titulo-peligro {
  color: var(--rojo);
  font-family: var(--fuente-titulos);
}

/* Párrafo de aviso en marrón oscuro */
.texto-aviso {
  color: var(--marron-oscuro);
  margin-top: 16px;
}

/* Nombre de usuario grande en la pantalla de cuenta */
.titulo-cuenta {
  font-size: 2.2rem;
}

/* Ícono grande de confirmación (mensaje enviado) */
.icono-exito {
  font-size: 3.5rem;
  color: var(--verde-oscuro);
}

/* Variante del "Volver" flotante, un poco más abajo */
.btn-volver-flotante.mas-abajo {
  top: 40px;
}

/* Separaciones puntuales que no cubre Bootstrap */
.margen-abajo-12 {
  margin-bottom: 12px;
}

.margen-abajo-20 {
  margin-bottom: 20px;
}

/* ===========================================================
   PÁGINA: INVENTARIO (listado de productos)
   Se carga sólo en templates/inventario/inventario.html
   =========================================================== */
/* ===========================================================
   BOTONES DEL NAVBAR
   =========================================================== */
.navbar-nw .btn-agregar {
  background-color: var(--verde-oscuro);
  color: var(--blanco);
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.navbar-nw .btn-agregar:hover {
  background-color: var(--verde-claro);
  color: var(--texto-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.navbar-nw .btn-agregar:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Variantes de color del mismo botón */
.navbar-nw .btn-agregar.btn-claro {
  background-color: var(--verde-claro);
}

.navbar-nw .btn-agregar.btn-oscuro {
  background-color: var(--marron-oscuro);
}

/* Botón de modo selección cuando está activo */
.navbar-nw .btn-agregar.modo-activo {
  background-color: var(--rojo-fuerte);
  color: var(--blanco);
}

.navbar-nw .btn-agregar.modo-activo:hover {
  background-color: var(--rojo-claro);
  color: var(--blanco);
}

#contadorSeleccion {
  color: var(--marron-oscuro);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Le saca la "x" nativa al input de búsqueda en Chrome */
input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Nuestra propia "x" para limpiar la búsqueda */
.clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--marron-oscuro);
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.input-buscar {
  padding-right: 30px;
}

/* ===========================================================
   INDICADOR DE BÚSQUEDA
   =========================================================== */
/* Barra de progreso bajo el navbar */
#barraBusqueda {
  position: fixed;
  top: var(--alto-navbar);
  left: var(--ancho-sidebar);
  right: 0;
  height: 3px;
  z-index: 1040;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

#barraBusqueda.activa {
  opacity: 1;
}

#barraBusqueda .relleno {
  height: 100%;
  width: 0;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--marron-oscuro) 0%, var(--verde-oscuro) 45%, var(--verde-claro) 75%, var(--marron-claro) 100%);
  box-shadow: 0 0 10px rgba(85, 107, 47, 0.55);
  transition: width 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Brillo que recorre la barra mientras carga */
#barraBusqueda .relleno::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 100%);
  animation: brilloBarra 1.1s ease-in-out infinite;
}

@keyframes brilloBarra {
  0% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.75;
  }
  100% {
    opacity: 0.15;
  }
}
/* Spinner en el botón de la lupa */
@keyframes girarIcono {
  to {
    transform: rotate(360deg);
  }
}
.icono-girando {
  display: inline-block;
  animation: girarIcono 0.75s linear infinite;
}

/* Estado "buscando" del input */
body.buscando #inputBuscar {
  background-color: #EFE9DE;
  border-color: var(--verde-claro);
  color: #7a6a58;
}

body.buscando #clearBtn {
  opacity: 0.35;
  pointer-events: none;
}

body.buscando #btnBuscar {
  background-color: #6B4326 !important;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

/* La grilla se atenúa apenas mientras llegan los resultados */
#grillaProductos {
  transition: opacity 0.3s ease, filter 0.3s ease;
}

body.buscando #grillaProductos {
  opacity: 0.35;
  filter: blur(1.5px);
  pointer-events: none;
}

/* ===========================================================
   BARRA DE FILTRO ACTIVO
   =========================================================== */
.filtro-activo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: linear-gradient(90deg, #EFE7D9 0%, var(--blanco) 60%);
  border: 1px solid var(--marron-claro);
  border-left: 4px solid var(--verde-oscuro);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(74, 44, 26, 0.1);
  animation: entrarFiltro 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes entrarFiltro {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.filtro-activo .filtro-icono {
  color: var(--verde-oscuro);
  font-size: 1.05rem;
  line-height: 1;
}

.filtro-activo .filtro-label {
  color: var(--texto-suave);
  font-size: 0.85rem;
  white-space: nowrap;
}

.filtro-activo .filtro-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: var(--marron-oscuro);
  color: var(--blanco);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 4px 12px;
  border-radius: 20px;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filtro-activo .filtro-conteo {
  color: var(--marron-oscuro);
  font-size: 0.85rem;
  font-weight: 600;
  background-color: var(--clarito);
  border: 1px solid var(--marron-claro);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.filtro-activo .filtro-conteo.sin-resultados {
  color: var(--rojo-fuerte);
  background-color: var(--rojo-fondo);
  border-color: var(--rojo-borde);
}

.btn-quitar-filtro {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: transparent;
  border: 1px solid var(--borde-fuerte);
  color: var(--marron-oscuro);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.btn-quitar-filtro:hover {
  background-color: var(--rojo-fuerte);
  border-color: var(--rojo-fuerte);
  color: var(--blanco);
  transform: translateY(-2px);
}

.btn-quitar-filtro:active {
  transform: translateY(0);
}

/* ===========================================================
   ESTADO VACÍO (sin resultados)
   =========================================================== */
.sin-resultados-box {
  text-align: center;
  padding: 60px 20px;
  max-width: 480px;
  margin: 0 auto;
  color: var(--texto-suave);
  animation: entrarFiltro 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.sin-resultados-box i {
  font-size: 3rem;
  color: var(--marron-claro);
  display: block;
  margin-bottom: 14px;
}

.sin-resultados-box .titulo-vacio {
  color: var(--marron-oscuro);
  font-weight: 700;
  font-size: 1.15rem;
  margin-bottom: 4px;
}

.sin-resultados-box .sub-vacio {
  font-size: 0.9rem;
  margin-bottom: 18px;
}

.sin-resultados-box .btn-quitar-filtro {
  margin-left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--marron-claro);
  border-color: var(--borde-fuerte);
  color: var(--marron-oscuro);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 10px;
  line-height: 1;
}

/* El ícono siempre toma el color del botón, en reposo y en hover */
.sin-resultados-box .btn-quitar-filtro i {
  color: inherit;
  font-size: 1.15rem;
  line-height: 1;
  position: relative;
  top: 10px;
}

/* Red de seguridad: si algún día queda un <p> adentro, que no rompa nada */
.sin-resultados-box .btn-quitar-filtro p {
  margin: 0;
  line-height: 1;
  color: inherit;
}

.sin-resultados-box .btn-quitar-filtro:hover {
  background-color: var(--marron-oscuro);
  border-color: var(--marron-oscuro);
  color: var(--blanco);
}

.columna-vacia {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
}

/* ===========================================================
   CARDS DE PRODUCTO
   =========================================================== */
.producto-card {
  position: relative;
  border: 1.5px solid var(--borde-fuerte);
  background-color: var(--blanco);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(74, 44, 26, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.producto-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(74, 44, 26, 0.22);
  border-color: var(--borde-hover);
}

.producto-card .card-img-top {
  height: 140px;
  object-fit: cover;
  background-color: var(--clarito);
  border-bottom: 1.5px solid var(--borde-fuerte);
}

.producto-card .nombre-producto {
  color: var(--marron-oscuro);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.25;
  margin-bottom: 4px;
}

.producto-card .proveedor-texto {
  color: var(--texto-suave);
  font-size: 0.78rem;
  margin-bottom: 0;
}

.producto-card .proveedor-texto i {
  color: var(--verde-claro);
}

.producto-card .info-fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

/* Ajustes de tamaño para la card (más chico que en el detalle) */
.producto-card .precio-venta {
  font-size: 1.05rem;
}

.producto-card .stock-texto {
  font-size: 0.8rem;
}

.producto-card .estado-badge {
  font-size: 0.72rem;
  padding: 3px 10px;
}

/* Los enlaces dentro de la card no llevan subrayado */
.producto-card a {
  text-decoration: none;
}

/* ===========================================================
   MODO SELECCIÓN
   =========================================================== */
/* Capa transparente que bloquea los links y recibe el click */
.capa-seleccion {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: none;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 0.15s ease;
}

#wrapperInventario.modo-seleccion .capa-seleccion {
  display: block;
}

.producto-card.seleccionada .capa-seleccion {
  background-color: rgba(74, 44, 26, 0.42);
}

/* Circulito estilo Fotos de iPhone */
.circulo-seleccion {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  background-color: rgba(0, 0, 0, 0.28);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
  transition: background-color 0.15s ease, transform 0.15s ease;
}

#wrapperInventario.modo-seleccion .circulo-seleccion {
  display: flex;
}

.producto-card.seleccionada .circulo-seleccion {
  background-color: var(--stock-ok);
  transform: scale(1.08);
}

.circulo-seleccion i {
  color: #ffffff;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.producto-card.seleccionada .circulo-seleccion i {
  opacity: 1;
}

/* En modo selección no queremos el "lift" del hover */
#wrapperInventario.modo-seleccion .producto-card:hover {
  transform: none;
  box-shadow: 0 1px 3px rgba(74, 44, 26, 0.12);
}

.producto-card.seleccionada {
  border-color: var(--stock-ok);
}

/* Card desapareciendo después de eliminar */
.producto-card.eliminando {
  opacity: 0;
  transform: scale(0.88);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#wrapperInventario .producto-card.eliminando:hover {
  transform: scale(0.88);
}

/* ===========================================================
   BARRA FLOTANTE DE ACCIONES
   =========================================================== */
#barraAcciones {
  position: fixed;
  bottom: 24px;
  left: var(--ancho-sidebar);
  right: 0;
  z-index: 1050;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(140%);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#barraAcciones.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

#barraAcciones .contenido-barra {
  display: flex;
  align-items: center;
  gap: 12px;
  background-color: var(--marron-oscuro);
  border: 1px solid var(--borde-hover);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 8px 24px rgba(74, 44, 26, 0.35);
  max-width: 92%;
  flex-wrap: wrap;
}

#barraAcciones .contador-barra {
  color: var(--blanco);
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
  padding-right: 12px;
  border-right: 1px solid rgba(245, 241, 234, 0.25);
}

#barraAcciones .btn-accion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: transparent;
  border: 1px solid var(--borde-fuerte);
  color: var(--blanco);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 7px 14px;
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

#barraAcciones .btn-accion:hover {
  background-color: var(--verde-claro);
  border-color: var(--verde-claro);
  color: var(--texto-oscuro);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

#barraAcciones .btn-accion:active {
  transform: translateY(0);
  box-shadow: none;
}

#barraAcciones .btn-accion.accion-eliminar {
  border-color: #C97B63;
  color: #F3D9D2;
}

#barraAcciones .btn-accion.accion-eliminar:hover {
  background-color: var(--rojo-fuerte);
  border-color: var(--rojo-fuerte);
  color: var(--blanco);
}

/* Espacio extra abajo para que la barra no tape la última fila */
#contenidoInventario {
  padding-bottom: 100px;
}

/* ===========================================================
   MODAL DE CONFIRMACIÓN DE BORRADO
   =========================================================== */
.modal-nw {
  background-color: var(--blanco);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(74, 44, 26, 0.35);
}

.modal-header-nw {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: var(--marron-oscuro);
  padding: 14px 20px;
}

.modal-header-nw i {
  color: #E8A87C;
  font-size: 1.3rem;
  line-height: 1;
}

.modal-titulo-nw {
  color: var(--blanco);
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}

.modal-cuerpo-nw {
  padding: 20px;
}

.modal-texto-nw {
  color: var(--marron-oscuro);
  font-size: 0.95rem;
  margin-bottom: 14px;
}

.modal-lista-nw {
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  max-height: 190px;
  overflow-y: auto;
  background-color: var(--clarito);
  border: 1px solid var(--marron-claro);
  border-radius: 10px;
}

.modal-lista-nw li {
  color: var(--marron-oscuro);
  font-size: 0.86rem;
  font-weight: 600;
  padding: 5px 0;
  border-bottom: 1px solid rgba(169, 133, 92, 0.35);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-lista-nw li:last-child {
  border-bottom: none;
}

.modal-lista-nw li::before {
  content: "•";
  color: var(--rojo-fuerte);
  font-weight: 700;
  margin-right: 8px;
}

.modal-error-nw {
  color: var(--rojo-fuerte);
  background-color: var(--rojo-fondo);
  border: 1px solid var(--rojo-borde);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 12px;
  margin-top: 12px;
  display: none;
}

.modal-pie-nw {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 20px 20px 20px;
}

.btn-modal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 8px 18px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-modal:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.btn-modal:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-modal:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
  box-shadow: none;
}

.btn-modal-cancelar {
  background-color: var(--verde-claro);
  color: var(--blanco);
}

.btn-modal-cancelar:hover {
  background-color: var(--verde-suave);
  color: var(--texto-oscuro);
}

.btn-modal-eliminar {
  background-color: var(--rojo);
  color: var(--blanco);
}

.btn-modal-eliminar:hover {
  background-color: var(--rojo-fuerte);
  color: var(--blanco);
}

/* ===========================================================
   AUTOCOMPLETADO DE LA BÚSQUEDA (jQuery UI)
   =========================================================== */
.ui-autocomplete {
  z-index: 2000 !important;
  background-color: var(--blanco);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 10px;
  padding: 6px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: 0 8px 20px rgba(74, 44, 26, 0.25);
  list-style: none;
  font-family: inherit;
}

.ui-autocomplete .ui-menu-item-wrapper {
  display: block;
  color: var(--marron-oscuro);
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
  background-color: var(--verde-claro);
  color: var(--texto-oscuro);
  border: none;
  margin: 0;
}

.ui-helper-hidden-accessible {
  display: none;
}

/* ===========================================================
   ACCESIBILIDAD
   Respeta a quien tenga las animaciones reducidas en el sistema
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
  #barraBusqueda .relleno::after,
  .icono-girando {
    animation: none;
  }
  body.buscando #grillaProductos {
    filter: none;
  }
  .filtro-activo,
  .sin-resultados-box {
    animation: none;
  }
  #barraAcciones {
    transition: opacity 0.15s ease;
    transform: none;
  }
}
/* ===========================================================
   PÁGINA: DETALLE DE PRODUCTO
   Se carga sólo en templates/inventario/producto_particular.html
   =========================================================== */
/* Imagen grande del producto */
.producto-imagen-grande {
  width: 100%;
  height: 380px;
  object-fit: contain;
  background-color: var(--clarito);
  border: 1.5px solid var(--borde-fuerte);
  border-radius: 12px;
}

.producto-imagen-grande i {
  font-size: 3rem;
  color: var(--marron-claro);
}

/* Margen de ganancia */
.margen-texto {
  font-size: 1.1rem;
  font-weight: 700;
}

.margen-ok {
  color: var(--verde-oscuro);
}

.margen-loss {
  color: #b04242;
}

.margen-texto .margen-monto {
  font-size: 0.85rem;
  font-weight: 500;
}

/* ===========================================================
   PÁGINA: CONTACTO
   Se carga sólo en templates/contacto/contacto.html
   El formulario lo arma Django solo, con <ul><li>, así que
   hay que acomodarlo a dos columnas desde acá.
   =========================================================== */
#contact ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

#contact li {
  margin-bottom: 16px;
  width: calc(50% - 10px); /* dos columnas */
}

/* La descripción (textarea) ocupa el ancho completo */
#contact li:has(textarea) {
  width: 100%;
}

#contact label {
  color: var(--marron-oscuro);
  font-weight: bold;
  display: block;
  margin-bottom: 4px;
  text-align: left;
}

#contact input,
#contact textarea {
  width: 100% !important;
  text-align: left !important;
  border: 1px solid var(--marron-claro) !important;
  border-radius: 8px !important;
  background-color: #FFFFFF !important;
  padding: 8px 12px !important;
}

#contact input:focus,
#contact textarea:focus {
  border-color: var(--verde-oscuro) !important;
  box-shadow: 0 0 0 0.15rem rgba(85, 107, 47, 0.25) !important;
  outline: none !important;
}

#contact textarea {
  height: 150px !important;
  resize: vertical;
}

/* Botón de enviar consulta */
.btn-enviar-nw {
  background-color: var(--verde-claro);
  color: white;
  font-weight: bold;
  border: none;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.btn-enviar-nw:hover {
  transform: translateY(-2px);
  background-color: var(--verde-oscuro);
  color: white;
}

/* En pantallas chicas, una sola columna */
@media (max-width: 768px) {
  #contact li {
    width: 100%;
  }
}
/* ===========================================================
   EJERCICIOS DE CLASE
   Los estilos que venían de scss/header.scss y
   scss/templatetags.scss (los ejemplos del profe).
   Sólo los usa templates/vistaprevia/templatetags1.html
   =========================================================== */
#mi_parrafo {
  color: #02F520;
  background-color: #ff9966;
}

.color1 {
  background-color: #F0738F;
}

.color2 {
  background-color: #0CF86C;
}

.color3 {
  background-color: #0CACF8;
}

.row1 {
  background-color: #F0738F;
}

.row2 {
  background-color: #0CF86C;
}

.row3 {
  background-color: #0CACF8;
}

/* Ancho de las cards del ejercicio de sesiones */
.card-ejercicio {
  width: 18rem;
}

/* Separación entre los bloques del ejercicio */
.bloque-ejercicio {
  padding-top: 70px;
}