/* =========================================================
   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
   ========================================================= */

/* Réplica del style.css del ZIP (las secciones truncadas con "..." no están en el archivo fuente) */
.multicel-tabla-productos {
  max-width: 1200px;
  margin: 30px auto;
  padding: 20px;
  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: 8px;
}

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

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

.marca-titulo {
  background: #111;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  margin-top: 25px;
  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 */
}

/* 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; }

/* 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; }

/* 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;
}