/* =========================================================
   Multicel Central — Crear Tablas (CSS completo)
   - Mantiene estilos originales
   - Oculta SOLO header (menú + buscador) en páginas del módulo
   - Social Login visible y contenido pegado
   ========================================================= */
.multicel-tabla-productos {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 6px !important;
  font-family: 'Montserrat', sans-serif;
}

.multicel-tabla-productos h2 {
  text-align: center;
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 20px;
  color: #111;
}

.barra-superior-lista {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.caja-dolar {
  background: #f5f5f5;
  border: 1px solid #eee;
  padding: 8px 12px;
  border-radius: 0;
}

.buscador-tabla {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 0;
  min-width: 260px;
}

/* Buscador independiente más grande */
.buscador-container {
  width: 100%;
  margin: 0;
  text-align: center;
  position: sticky;
  top: 80px; /* debajo del login superior + nav fija */
  z-index: 9990;
  padding: 2px 0 4px;
  background: transparent;
  box-shadow: none;
}

.buscador-container .buscador-tabla {
  width: 100%;
  max-width: none;
  padding: 10px 12px;
  font-size: 16px;
  border: 1px solid #d1d5db;
  border-radius: 0;
  margin: 0 auto;
  background: #f7f7f7;
}

.btn-excel-tabla {
  background: #1d6f42;
  color: #fff;
  border-radius: 0;
  padding: 8px 14px;
  text-decoration: none;
  display: inline-block;
}

.marca-titulo {
  background: #111;
  color: #fff;
  padding: 12px 12px 10px;
  border-radius: 0;
  margin-top: 24px;
  font-weight: 700;
}

.tabla-listado {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}

.tabla-listado th, .tabla-listado td {
  border: 1px solid #eaeaea;
  padding: 10px 12px;
  vertical-align: middle;
}

.tabla-listado th {
  background: #fafafa;
  font-weight: 700;
}

@media (max-width: 640px) {
  .btn-excel-tabla {
    font-size: 16px;
    padding: 6px 10px;
    height: auto;
  }
  .tabla-listado td:nth-child(2) {
    font-size: 13px;
  }
}

/* Botones de la tabla */
.btn-tabla {
  display: inline-block;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #000; /* borde negro para todos */
  min-width: 70px;        /* ancho mínimo para que ambos sean parejos */
}

/* Responsive: botones más pequeños en móvil */
@media (max-width: 768px) {
  .btn-tabla {
    font-size: 11px;
    padding: 3px 6px;
    min-width: 50px;
  }
}

@media (max-width: 480px) {
  .btn-tabla {
    font-size: 10px;
    padding: 2px 4px;
    min-width: 40px;
  }
}

/* Botón "Agregar" */
.btn-agregar {
  background: #28a745; /* verde */
  color: #fff;
}
.btn-agregar:hover { background: #218838; }

/* Botón "Sin stock" */
.btn-sin-stock {
  background: #dc3545; /* rojo */
  color: #fff;
}

/* =========================================================
   SOLO en páginas del módulo (body.mc-hide-header):
   - Ocultar header superior (menú + buscador) y lateral
   - Mantener social login y carrito
   - Quitar casi todo el espacio entre social login y el contenido
   ========================================================= */

/* Ocultar header (hamburguesa + buscador) y el lateral */
body.mc-hide-header .multicel-header-bar,
body.mc-hide-header .multicel-menu-lateral {
  display: none !important;
}

/* Mantener visibles social login y carrito (por si algún estilo global los oculta) */
body.mc-hide-header .multicel-top-login,
body.mc-hide-header #multicel-carrito-flotante {
  display: block !important;
}

/* Quitar rellenos de seguridad por si el theme reserva espacio para header fijo */
body.mc-hide-header { padding-top: 0 !important; }
body.mc-hide-header h1.entry-title, /* muchos themes */
body.mc-hide-header .page-title,     /* variantes */
body.mc-hide-header .site-title { display:none !important; }
/* Títulos H1 específicos del theme (como .mc-title) */
body.mc-hide-header h1.mc-title,
body.mc-hide-header .mc-title { display:none !important; }

/* Reducir al mínimo el espacio entre Social Login y el contenido del módulo */
body.mc-hide-header .multicel-top-login { margin-bottom: 2px !important; }
body.mc-hide-header .multicel-tabla-productos { 
  margin-top: 6px !important; 
  margin-left: 0 !important; 
  margin-right: 0 !important; 
  padding-left: 2px !important; 
  padding-right: 2px !important; 
  width: 100% !important; 
  max-width: none !important; 
}

/* Si algún contenedor intermedio aporta margen, lo neutralizamos */
body.mc-hide-header .multicel-top-login-wrap { margin-bottom: 0 !important; padding-bottom: 0 !important; }

/* === Igualar botones de tabla: "Agregar" y "Sin stock" (compactos y cuadrados) === */
.btn-tabla,
.btn-agregar,
.btn-sin-stock {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 24px !important;      /* más bajo que 36px */
  padding: 3px 8px !important;      /* padding reducido */
  font-size: 12px !important;       /* letra un poco más chica */
  font-weight: 700 !important;
  border-radius: 4px !important;    /* cuadrado, sin borde redondo */
  margin-top: auto !important;
  text-transform: uppercase;
  box-sizing: border-box;
  border: 1px solid #000 !important;
  line-height: 1.2 !important;      /* mantiene texto dentro sin desbordar */
  white-space: nowrap !important;   /* evita que se corte en dos líneas */
}

/* Colores */
.btn-agregar {
  background: #28a745 !important;
  color: #fff !important;
}
.btn-agregar:hover { background: #218838 !important; }

.btn-sin-stock {
  background: #dc3545 !important;
  color: #fff !important;
  border: 1px solid #880000 !important; /* mismo grosor que el verde */
}
.btn-sin-stock:hover { background: #b71c1c !important; }

/* === FIX: Centrar Social Login SOLO en "Crear Tablas" === */
body.mc-hide-header .multicel-top-login-wrap,
body.mc-hide-header .multicel-top-login{
  float: none !important;
  position: relative !important;
  left: auto !important; right: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;

  /* centrar y que ocupen todo el ancho disponible */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: center !important;
}

/* Evita que el contenedor padre flex los pegue a la izquierda */
body.mc-hide-header .multicel-top-login{
  align-self: center !important;
  gap: 12px !important; /* separación pareja */
}

/* Asegurar misma altura y que nada lo desbalancee */
body.mc-hide-header .multicel-top-login .btn-manual-login,
body.mc-hide-header .multicel-top-login .btn-google-login{
  height: 44px !important;       /* ajustá a 40/48 si querés */
  padding: 0 18px !important;
  border-radius: 8px !important;
  line-height: 1.2 !important;
  flex: 0 0 auto !important;     /* evita estirado raro */
}

body.mc-hide-header .multicel-top-login .btn-google-login img{
  width: 18px !important;
  height: 18px !important;
}

/* Por si algún wrapper agrega padding/márgenes laterales al ocultar el menú */
body.mc-hide-header .multicel-top-login-wrap{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* === Estilos para imágenes en miniatura === */
.producto-imagen-mini {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: block;
  margin: 0 auto;
}

.sin-imagen {
  width: 40px !important;
  height: 40px !important;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #999;
  margin: 0 auto;
}

/* === Fix responsive tabla === */
.tabla-listado{table-layout:fixed}

/* Desktop: distribución normal con columna de imagen */
.tabla-listado th:nth-child(1),
.tabla-listado td:nth-child(1){ /* Imagen */
  width:8%; white-space:nowrap; text-align:center; padding:4px !important;
}
.tabla-listado th:nth-child(2),
.tabla-listado td:nth-child(2){ /* Producto */
  width:52%; white-space:normal; word-break:break-word; overflow-wrap:anywhere;
}
.tabla-listado th:nth-child(3),
.tabla-listado td:nth-child(3){ /* Precio */
  width:20%; white-space:nowrap; text-align:center;
}
.tabla-listado th:nth-child(4),
.tabla-listado td:nth-child(4){ /* Carrito */
  width:20%; white-space:nowrap; text-align:center;
}

/* Mobile: nombre producto ocupa mayoría, precio y carrito mínimo */
@media (max-width: 768px) {
  .tabla-listado th:nth-child(1),
  .tabla-listado td:nth-child(1){ /* Imagen */
    width:10%; padding:2px !important;
  }
  .tabla-listado th:nth-child(2),
  .tabla-listado td:nth-child(2){ /* Producto */
    width:55%; font-size:14px; line-height:1.3; padding:8px 6px;
  }
  .tabla-listado th:nth-child(3),
  .tabla-listado td:nth-child(3){ /* Precio */
    width:20%; font-size:12px; padding:6px 4px;
  }
  .tabla-listado th:nth-child(4),
  .tabla-listado td:nth-child(4){ /* Carrito */
    width:15%; padding:6px 4px;
  }
  
  /* Botones compactos pero sin ocupar 100% */
  .btn-tabla {
    font-size: 10px !important;
    padding: 3px 6px !important;
    min-height: 20px !important;
    white-space: nowrap !important;
  }
}

/* Mobile pequeño: ajustes adicionales */
@media (max-width: 480px) {
  .tabla-listado th:nth-child(1),
  .tabla-listado td:nth-child(1){ /* Imagen */
    width:12%; padding:1px !important;
  }
  .tabla-listado th:nth-child(2),
  .tabla-listado td:nth-child(2){ /* Producto */
    width:58%; font-size:13px;
  }
  .tabla-listado th:nth-child(3),
  .tabla-listado td:nth-child(3){ /* Precio */
    width:15%; font-size:11px;
  }
  .tabla-listado th:nth-child(4),
  .tabla-listado td:nth-child(4){ /* Carrito */
    width:15%;
  }
  
  /* Botones compactos pero sin ocupar 100% */
  .btn-tabla {
    font-size: 9px !important;
    padding: 2px 4px !important;
    min-height: 18px !important;
    white-space: nowrap !important;
  }
}