/* Cards iguales + inputs gris claro + botones 3D */
:root{
  --mc-black:#0b0b0b; --mc-input:#f3f4f6; --mc-border:#dfe3e8; --mc-muted:#9aa0a6;
  --blue1:#38a3ff; --blue2:#1f8aff; --blue3:#1667ff;
  --green1:#39e07a; --green2:#00c853; --green3:#02a84d;
}

/* 2 columnas centradas y misma altura en desktop */
.woocommerce-account #customer_login.u-columns{
  display:grid; grid-template-columns:minmax(360px,520px) minmax(360px,520px);
  justify-content:center; align-items:stretch; gap:28px; padding:8px;
}

/* Card negra opaca con sombra */
.woocommerce-account #customer_login .u-column1,
.woocommerce-account #customer_login .u-column2{
  background:var(--mc-black) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  border-radius:20px !important;
  box-shadow:0 16px 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.04) !important;
  padding:22px 20px !important;
  display:flex; flex-direction:column;
}

/* Ocultar h2 nativo y poner título grande custom */
.woocommerce-account #customer_login .u-column1 h2,
.woocommerce-account #customer_login .u-column2 h2{ display:none !important; }

.woocommerce-account #customer_login .u-column1::before,
.woocommerce-account #customer_login .u-column2::before{
  content: attr(data-title);
  display:block; text-align:center;
  background:linear-gradient(180deg, #13151c, #0f1219);
  border:1px solid rgba(255,255,255,.10); border-radius:14px;
  color:#fff; font-weight:900; letter-spacing:.6px; text-transform:uppercase;
  padding:12px 14px; margin:0 0 16px;
}
.woocommerce-account #customer_login .u-column1{ --title:"INGRESAR"; }
.woocommerce-account #customer_login .u-column2{ --title:"REGISTRARSE"; }
.woocommerce-account #customer_login .u-column1::before{ content:"INGRESAR"; }
.woocommerce-account #customer_login .u-column2::before{ content:"REGISTRARSE"; }

/* Tabla: label izquierda / campo derecha */
.woocommerce-account #customer_login form.woocommerce-form{ margin:0 !important; background:transparent !important; border:0 !important; padding:0 !important; }
.woocommerce-account #customer_login .form-row{
  display:grid !important; grid-template-columns:180px 1fr !important;
  align-items:center !important; gap:12px !important; margin:10px 0 !important;
}
.woocommerce-account #customer_login .form-row label{
  margin:0 !important; font-size:12px !important; font-weight:800 !important; letter-spacing:.4px !important;
  color:var(--mc-muted) !important; text-transform:uppercase !important;
}

/* Inputs gris claro redondeados */
.woocommerce-account #customer_login input.input-text,
.woocommerce-account #customer_login input[type="text"],
.woocommerce-account #customer_login input[type="email"],
.woocommerce-account #customer_login input[type="password"],
.woocommerce-account #customer_login input[type="tel"]{
  width:100% !important; height:44px !important;
  background:var(--mc-input) !important; color:#111 !important;
  border:1px solid var(--mc-border) !important; border-radius:12px !important;
  padding:10px 12px !important; outline:none !important;
}
.woocommerce-account #customer_login input:focus{
  border-color:#00c853 !important; box-shadow:0 0 0 3px rgba(0,200,83,.22) !important; background:#fff !important;
}
.woocommerce-account #customer_login ::placeholder{ color:#6b7280; opacity:1; }
.woocommerce-account #customer_login input:-webkit-autofill{
  -webkit-text-fill-color:#111; -webkit-box-shadow:0 0 0 1000px var(--mc-input) inset;
}

/* Checkbox a toda la fila */
.woocommerce-account #customer_login .woocommerce-form__label-for-checkbox{
  grid-column:1 / -1 !important; display:flex !important; align-items:center !important; gap:8px !important; color:#e6e6e6 !important;
}

/* Lost password a la derecha */
.woocommerce-account #customer_login .lost_password{ grid-column:2 / 3 !important; text-align:right !important; }

/* Botón 3D azul (Ingresar) */
.woocommerce-account #customer_login .u-column1 button.woocommerce-Button,
.woocommerce-account #customer_login .u-column1 button.woocommerce-button{
  background:linear-gradient(180deg, var(--blue1), var(--blue2) 60%, var(--blue3)) !important;
  color:#fff !important; border:0 !important; border-radius:12px !important; height:46px !important;
  font-weight:900 !important; box-shadow:0 14px 28px rgba(31,138,255,.35) !important;
}
/* Botón 3D verde (Registrarse) */
.woocommerce-account #customer_login .u-column2 button.woocommerce-Button,
.woocommerce-account #customer_login .u-column2 button.woocommerce-button{
  background:linear-gradient(180deg, var(--green1), var(--green2) 60%, var(--green3)) !important;
  color:#0c130e !important; border:0 !important; border-radius:12px !important; height:46px !important;
  font-weight:900 !important; box-shadow:0 14px 28px rgba(0,200,83,.35) !important;
}

/* Mobile: apilado y etiquetas arriba */
@media (max-width:768px){
  .woocommerce-account #customer_login.u-columns{ grid-template-columns:1fr; gap:16px; padding:0 10px; }
  .woocommerce-account #customer_login .form-row{ grid-template-columns:1fr !important; }
  .woocommerce-account #customer_login .lost_password{ grid-column:1 / -1 !important; text-align:left !important; }
}