/* ===== /mi-cuenta/ — layout 2 columnas + tarjetas ===== */
.mc-auth-scope .u-columns.col2-set{
  display:block !important;
  max-width:560px;           /* ancho cómodo centrado en desktop */
  margin:12px auto 24px;
}

.mc-auth-scope .u-column1,
.mc-auth-scope .u-column2{
  width:100% !important;
  float:none !important;
  margin:0 0 18px !important; /* registra queda debajo del login */
}

/* Cards azules 3D para login y registro */
.mc-auth-scope .woocommerce .u-column1,
.mc-auth-scope .woocommerce .u-column2,
.mc-auth-scope .woocommerce form.login.woocommerce-form,
.mc-auth-scope .woocommerce form.register.woocommerce-form{
  background:#0f1115 !important;
  border:1px solid #2a3141 !important;
  border-radius:16px !important;
  padding:22px !important;
  box-shadow:0 14px 36px rgba(0,0,0,.38) !important;
}

/* Inputs blancos + botón azul */
.mc-auth-scope .woocommerce form.login.woocommerce-form .input-text,
.mc-auth-scope .woocommerce form.register.woocommerce-form .input-text,
.mc-auth-scope .woocommerce form.login.woocommerce-form input[type="text"],
.mc-auth-scope .woocommerce form.register.woocommerce-form input[type="text"],
.mc-auth-scope .woocommerce form.login.woocommerce-form input[type="email"],
.mc-auth-scope .woocommerce form.register.woocommerce-form input[type="email"],
.mc-auth-scope .woocommerce form.login.woocommerce-form input[type="password"],
.mc-auth-scope .woocommerce form.register.woocommerce-form input[type="password"]{
  background:#fff !important; color:#111 !important;
  border:1px solid #cfd8dc !important; border-radius:12px !important;
  padding:12px 14px !important; width:100% !important; outline:none !important; box-shadow:none !important;
}

.mc-auth-scope .woocommerce form.login.woocommerce-form button.button,
.mc-auth-scope .woocommerce form.login.woocommerce-form input.button,
.mc-auth-scope .woocommerce form.register.woocommerce-form button.button,
.mc-auth-scope .woocommerce form.register.woocommerce-form input.button{
  width:100% !important; height:46px !important; border-radius:12px !important; border:none !important;
  background:linear-gradient(180deg, #2791ff 0%, #1976d2 60%, #1565c0 100%) !important;
  color:#fff !important; font-weight:800 !important; letter-spacing:.2px;
  box-shadow:0 10px 24px rgba(25,118,210,.35), inset 0 1px 0 rgba(255,255,255,.15) !important;
  transition:transform .08s ease, filter .12s ease !important;
}
.mc-auth-scope .woocommerce form.login.woocommerce-form button.button:hover,
.mc-auth-scope .woocommerce form.login.woocommerce-form input.button:hover,
.mc-auth-scope .woocommerce form.register.woocommerce-form button.button:hover,
.mc-auth-scope .woocommerce form.register.woocommerce-form input.button:hover{
  filter:brightness(1.05) !important; transform:translateY(-1px) !important;
}

/* Nav “Acceder / Registrarse” */
.mc-auth-nav .mc-auth-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 16px; min-width:140px; font-weight:800; text-transform:uppercase;
  color:#fff; text-decoration:none; border-radius:12px;
  background: linear-gradient(180deg, #2791ff 0%, #1976d2 60%, #1565c0 100%);
  box-shadow: 0 8px 22px rgba(25,118,210,.35), inset 0 1px 0 rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.12);
  transition: transform .08s ease, filter .12s ease;
}
.mc-auth-nav .mc-auth-cta.alt{
  background: linear-gradient(180deg, #3aa2ff 0%, #288cff 60%, #1b6fe2 100%);
}
.mc-auth-nav .mc-auth-cta:hover{ filter:brightness(1.05); transform:translateY(-1px); }

/* ==============================================================
   Multicel — Social Login (header)
   - Dos botones en UNA sola fila (móvil y desktop)
   - Tipografía/padding fluidos con clamp() => no se desbalancean
   - Botón 1 blanco-azulado, Botón 2 Google con borde azul
   ============================================================== */

:root{
  --ml-fs: clamp(11px, 2.7vw, 15px);       /* tamaño de texto fluido */
  --ml-pad-y: clamp(6px, 1.6vw, 10px);     /* padding vertical fluido */
  --ml-pad-x: clamp(10px, 3.2vw, 22px);    /* padding horizontal fluido */
  --ml-gap: clamp(6px, 2.2vw, 12px);       /* separación entre items */
}

.multicel-top-login{
  /* fondo / fuente */
  background: #f8f9fa;        /* barra superior fina */
  color:#333;
  font-family:'Montserrat',sans-serif;
  font-weight:500;
  line-height:1;
  font-size: 14px;

  /* layout: una sola fila */
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 4px;
  padding: 8px 15px;

  /* ¡nunca envolver! (se comprime con clamp en vez de pasar a 2 líneas) */
  flex-wrap: nowrap;
  white-space: nowrap;

  /* evitar que algún tema meta márgenes/line-heights raros */
  box-sizing:border-box;
  
  /* Posición fija arriba del header */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}

/* Si el usuario está logueado, mantener la misma posición */
body.logged-in .multicel-top-login{
  /* Sin cambios de posición para usuarios logueados */
}

.multicel-top-login a{
  text-decoration:none !important;
  color:inherit;
}

/* ---------- Botón base (ambos comparten) ---------- */
.multicel-top-login .btn-manual-login,
.multicel-top-login .btn-google-login{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  font-size: 9px;
  padding: 2px 6px;
  border-radius:3px;
  box-sizing:border-box;        /* el borde cuenta dentro del ancho */
  line-height:1;
  white-space:nowrap;
  /* botones súper finos */
  flex: none;
  max-width: none;
  min-width: auto;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  font-weight: 500;
  transition: all .2s ease;
}

/* ---------- Separador central (— 0 —) ---------- */
.multicel-top-login .login-separador{
  flex:0 0 auto;
  color:#999;
  font-size: 8px;
  font-weight:500;
  padding: 0 2px;
  letter-spacing:.2px;
  user-select:none;
}

/* ---------- Botón 1: Ingresá/Registrate (más fino) ---------- */
.multicel-top-login .btn-manual-login{
  background: #fff;
  color: #007cba !important;
  border: 1px solid #007cba;
  box-shadow: none;
}
.multicel-top-login .btn-manual-login:hover{
  background: #007cba;
  color: #fff !important;
  border-color: #007cba;
  transform: none;
}

/* ---------- Botón 2: Registrate con Google (más fino) ---------- */
.multicel-top-login .btn-google-login{
  background: #fff;
  color: #333 !important;
  border: 1px solid #ddd;
  box-shadow: none;
}
.multicel-top-login .btn-google-login:hover{
  background: #f8f9fa;
  border-color: #007cba;
  color: #333 !important;
  transform: none;
}
.multicel-top-login .btn-google-login img{
  display: none !important; /* eliminar imagen de Google */
}

/* ---------- Accesible al foco ---------- */
.multicel-top-login a:focus-visible{
  outline:2px dashed #fff;
  outline-offset:2px;
}

/* ---------- Ultra-compacto (pantallas < 340px) ---------- */
@media (max-width: 340px){
  :root{
    --ml-fs: 11px;
    --ml-pad-y: 6px;
    --ml-pad-x: 10px;
    --ml-gap: 6px;
  }
  .multicel-top-login .btn-manual-login,
  .multicel-top-login .btn-google-login{
    min-width: 120px;
    max-width: 46%;
  }
}
/* ==== Ajuste: bajar un poquito la barra de login en móvil ==== */
@media (max-width: 576px){
  .multicel-top-login{
    margin-top: 6px;         /* baja toda la barra unos pixeles */
    padding-top: 10px;       /* más “aire” arriba */
    padding-bottom: 10px;    /* equilibrado abajo */
  }
}

/* === FIX: igualar altura exacta y centrado de los botones === */
.multicel-top-login .btn-manual-login,
.multicel-top-login .btn-google-login {
  height: 44px !important;       /* altura fija para ambos */
  padding: 0 18px !important;    /* mismo padding horizontal */
  line-height: 1.2 !important;   /* centra el texto dentro */
  border-radius: 8px !important; /* cuadraditos suaves, no tan redondeados */
  flex: 0 0 auto !important;     /* que no se estiren raro */
}

/* Que el contenedor siempre los centre en pantalla */
.multicel-top-login {
  justify-content: center !important;
  gap: 12px !important;          /* separación fija y pareja */
}

/* Asegurar que las imágenes (logo de Google) no desbalanceen */
.multicel-top-login .btn-google-login img {
  height: 18px !important;
  width: 18px !important;
}

/* MÓVIL: botones súper chicos para no tapar el banner */
@media (max-width: 768px) {
  /* En el header: eliminar barra negra y espacios sobrantes */
  .multicel-header-search .mc-login-row .multicel-top-login{
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    gap: 2px !important;
  }
  .multicel-header-search .mc-login-row{
    padding: 0 !important;
  }
  .multicel-header-search .mc-login-row .multicel-top-login .btn-manual-login,
  .multicel-header-search .mc-login-row .multicel-top-login .btn-google-login {
    height: 12px !important;
    padding: 0 2px !important;
    font-size: 6px !important;
    border-radius: 2px !important;
    line-height: 1 !important;
    min-width: auto !important;
    max-width: 60px !important;
  }
  .multicel-header-search .mc-login-row .multicel-top-login .btn-google-login img {
    width: 6px !important;
    height: 6px !important;
  }
  .multicel-header-search .mc-login-row .multicel-top-login .login-separador {
    font-size: 4px !important;
    padding: 0 !important;
  }
  .multicel-header-search .mc-login-row .multicel-top-login .btn-manual-login {
    font-size: 5px !important;
  }
  .multicel-header-search .mc-login-row {
    gap: 1px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  
}
/* Offset correcto para anclas de Acceder / Registrarse bajo header fijo */
#mc-login, #mc-register{
  display:block;
  height:0;
  overflow:hidden;
  scroll-margin-top: 110px; /* ajustá si tu header mide distinto */
}
/* Fallback: si el contenedor no trae .u-columns.col2-set, igualamos layout */
.mc-auth-scope .woocommerce #customer_login{
  display:block !important;
  max-width:560px;
  margin:12px auto 24px;
}

.mc-auth-scope .woocommerce #customer_login .u-column1,
.mc-auth-scope .woocommerce #customer_login .u-column2{
  width: 100% !important;
  float: none !important;
}

/* Asegura que el clear funcione tras la fila doble */
.mc-auth-scope .woocommerce form.register.woocommerce-form .clear{ clear: both !important; }

/* === Labels arriba, alineadas a la izquierda (login y registro) === */
.mc-auth-scope .woocommerce form .form-row label,
.mc-auth-scope .woocommerce form.login .form-row label,
.mc-auth-scope .woocommerce form.register .form-row label{
  display: block !important;
  float: none !important;
  width: 100% !important;
  text-align: left !important;
  margin: 0 0 6px !important;
  line-height: 1.2 !important;
}

/* El wrapper del input ocupa todo el ancho debajo de la label */
.mc-auth-scope .woocommerce form .form-row .woocommerce-input-wrapper{
  display: block !important;
  width: 100% !important;
  float: none !important;
}

/* Excepción: “Recuérdame” (checkbox) sigue en línea con su label */
.mc-auth-scope .woocommerce form.login .woocommerce-form__label-for-checkbox{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 8px 0 10px !important;
}
.mc-auth-scope .woocommerce form.login .woocommerce-form__label-for-checkbox input[type="checkbox"]{
  margin: 0 !important;
}

/* Label arriba, alineada al inicio, sin recortes */
.mc-auth-scope .woocommerce form .form-row label{
  order: 0 !important;
  display: block !important;
  width: auto !important;
  float: none !important;
  text-align: left !important;
  white-space: normal !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* El wrapper y los inputs ocupan TODO el ancho del contenedor */
.mc-auth-scope .woocommerce form .form-row .woocommerce-input-wrapper{
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
}
.mc-auth-scope .woocommerce form .form-row input.input-text,
.mc-auth-scope .woocommerce form .form-row select,
.mc-auth-scope .woocommerce form .form-row textarea{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Por si el tema mete medias columnas: apilarlas igual */
.mc-auth-scope .woocommerce form .form-row-first,
.mc-auth-scope .woocommerce form .form-row-last{
  float: none !important;
  width: 100% !important;
  margin: 0 0 12px !important;
}
/* ===== FIX FINAL /mi-cuenta/ — inputs FULL WIDTH y labels arriba ===== */
/* Máxima especificidad sobre el contenedor real de Woo */
.mc-auth-scope .woocommerce #customer_login form.login .form-row,
.mc-auth-scope .woocommerce #customer_login form.register .form-row{
  display:block !important;
  width:100% !important;
  clear:both !important;
  float:none !important;
  margin:0 0 14px !important;
}

/* Label SIEMPRE arriba y a la izquierda */
.mc-auth-scope .woocommerce #customer_login form.login .form-row > label,
.mc-auth-scope .woocommerce #customer_login form.register .form-row > label{
  display:block !important;
  float:none !important;
  width:100% !important;
  text-align:left !important;
  margin:0 0 6px !important;
  line-height:1.2 !important;
  white-space:normal !important;
}

/* Wrapper del campo ocupa 100% (rompe la columna angosta del theme) */
.mc-auth-scope .woocommerce #customer_login form.login .form-row .woocommerce-input-wrapper,
.mc-auth-scope .woocommerce #customer_login form.register .form-row .woocommerce-input-wrapper{
  display:block !important;
  float:none !important;
  width:100% !important;
  max-width:none !important;
}

/* Password tiene un wrapper especial: que también sea 100% */
.mc-auth-scope .woocommerce #customer_login .password-input{
  display:block !important;
  width:100% !important;
  max-width:none !important;
}

/* Todos los inputs adentro del wrapper, al 100% y más altos */
.mc-auth-scope .woocommerce #customer_login form.login .form-row .woocommerce-input-wrapper > * ,
.mc-auth-scope .woocommerce #customer_login form.register .form-row .woocommerce-input-wrapper > * {
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  height:50px !important;          /* ↑ más alto en desktop */
  padding:12px 16px !important;
  font-size:16px !important;
}

/* Ojo del password: dejar espacio a la derecha si lo tenés */
.mc-auth-scope .woocommerce #customer_login .password-input input[type="password"],
.mc-auth-scope .woocommerce #customer_login .password-input input[type="text"]{
  padding-right:44px !important;
}

/* Ocultar SOLO los textos intro del dashboard en /mi-cuenta/ (no tocar formularios) */
body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type,
body.woocommerce-account .woocommerce-MyAccount-content > p:nth-of-type(2) {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Asegurar que los <p> dentro de formularios (botón, avisos) se vean siempre */
body.woocommerce-account .woocommerce-MyAccount-content form p {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  height: auto !important;
  margin: 12px 0 !important;
  padding: initial !important;
}

/* Estilos para formulario de completar datos tras login con Google */
.mc-google-complete { max-width:560px; margin:12px auto; padding:14px; background:#fff; border-radius:10px; }
.mc-google-complete form p { margin:8px 0; }
.mc-google-complete form input[type="text"], .mc-google-complete form input[type="email"]{ width:100%; padding:10px 12px; border:1px solid #dcdcdc; border-radius:8px; }
.mc-google-complete .button-primary{ background:#1976d2; color:#fff; border:none; padding:10px 14px; border-radius:8px; }

/* ===== Estilo: tarjeta "Completar registro" (coincide con las otras tarjetas mc-auth-card) ===== */
/* Aseguramos alta especificidad para sobreescribir posibles estilos del theme */
#mc-google-finish-wrap.mc-auth-card,
.mc-auth-card#mc-google-finish-wrap{
  max-width:560px;
  margin: 12px auto 24px !important;
  background: #0f1115 !important;
  border: 1px solid #2a3141 !important;
  border-radius: 16px !important;
  padding: 22px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.38) !important;
  color: #fff !important;
}

#mc-google-finish-wrap.mc-auth-card .mc-auth-title{
  font-family: 'Montserrat', sans-serif;
  font-weight:800;
  margin: 0 0 12px !important;
  font-size: 20px !important;
  color: #e8f1ff !important;
}

#mc-google-finish-wrap.mc-auth-card .mc-field{ margin: 10px 0 !important; }
#mc-google-finish-wrap.mc-auth-card .mc-field label{ display:block; margin:0 0 6px; color:#cbd6ee; font-weight:600; }

#mc-google-finish-wrap.mc-auth-card .mc-input{
  width:100% !important;
  padding: 12px 14px !important;
  border-radius: 12px !important;
  border: 1px solid #cfd8dc !important;
  background: #fff !important;
  color: #111 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  height: 46px !important;
}

/* readonly inputs slightly muted */
#mc-google-finish-wrap.mc-auth-card .mc-input[readonly]{ background:#f6f8fb !important; color:#222 !important; }

/* Botones estilo Multicel: primary azul degradado */
.mc-btn { display:inline-block; padding:12px 16px; border-radius:12px; font-weight:800; cursor:pointer; text-align:center; }
.mc-btn-primary{
  background: linear-gradient(180deg, #2791ff 0%, #1976d2 60%, #1565c0 100%) !important;
  color:#fff !important;
  border: none !important;
  box-shadow: 0 10px 24px rgba(25,118,210,.35), inset 0 1px 0 rgba(255,255,255,.12) !important;
  width:100% !important;
  height:46px !important;
}
.mc-btn-primary:hover{ filter:brightness(1.04) !important; transform: translateY(-1px); }

/* Ajustes responsive: mantener padding/espaciado en móvil */
@media (max-width: 576px){
  #mc-google-finish-wrap.mc-auth-card{ padding:16px !important; border-radius:12px !important; }
  #mc-google-finish-wrap.mc-auth-card .mc-auth-title{ font-size:18px !important; }
}

/* CSS del botón Google+ eliminado de Mi Cuenta */
/* Ahora solo se usa en el menú hamburguesa (Panel-Visual.css) */