/* =======================================================
   CENTRAL GIF - LOGIN / REGISTRO / CUENTA
   CSS MUY AGRESIVO PARA LIMPIAR TODO
   ======================================================= */

/* Fondo gris */
body.customer-account-login,
body.customer-account-create,
body.customer-account-index {
    background-color: #f5f5f5 !important;
}

/* ---------- LOGIN / REGISTRO / CUENTA: TARJETA BLANCA ---------- */

body.customer-account-login .columns,
body.customer-account-create .columns,
body.customer-account-index .columns,
body.customer-account-login .column.main,
body.customer-account-create .column.main,
body.customer-account-index .column.main {
    max-width: 900px;
    margin: 40px auto;
}

body.customer-account-login .column.main,
body.customer-account-create .column.main,
body.customer-account-index .column.main {
    background: #ffffff;
    border-radius: 26px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.08);
    padding: 32px 40px 36px 40px;
}

/* ---------- SOLO REGISTRO: HEADER + TÍTULOS FUERA ---------- */

/* Ocultar header y menú SOLO en create */
body.customer-account-create .page-header,
body.customer-account-create .header.content,
body.customer-account-create .nav-sections,
body.customer-account-create nav.navigation {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Título grande "Crear nueva cuenta de cliente" */
body.customer-account-create .page-title-wrapper,
body.customer-account-create .page-title,
body.customer-account-create h1.page-title,
body.customer-account-create h1 {
    display: none !important;
}

/* Títulos internos de la tarjeta:
   "Crear Cuenta", "Información Personal",
   "Información de Inicio de Sesión" */
body.customer-account-create .block-title,
body.customer-account-create .block-title strong,
body.customer-account-create .legend,
body.customer-account-create .legend span {
    display: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* ---------- LOGIN / CUENTA: TÍTULOS LIMPIOS TAMBIÉN ---------- */

/* Login: "Clientes registrados", etc. */
body.customer-account-login .block-title,
body.customer-account-login .block-title strong,
body.customer-account-login .legend,
body.customer-account-login .legend span {
    display: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

/* Cuenta: "Información de la cuenta", etc. */
body.customer-account-index .block-title,
body.customer-account-index .block-title strong,
body.customer-account-index .box-title,
body.customer-account-index .box-title span {
    display: none !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 767px) {
    body.customer-account-login .column.main,
    body.customer-account-create .column.main,
    body.customer-account-index .column.main {
        border-radius: 20px;
        padding: 24px 18px 26px 18px;
        margin: 20px 10px;
    }
}

/* =========================================================
   ESTILO GLOBAL CENTRAL-LOGIN
   Aplica a: login, crear cuenta, mi cuenta, carrito, etc.
   ========================================================= */

body.central-login,
body.central-login .page-wrapper {
    background-color: #f5f5f5 !important;
}

/* Ocultar el título grande de la página y breadcrumbs */
body.central-login .page-title-wrapper,
body.central-login .page-title-wrapper .page-title,
body.central-login .breadcrumbs {
    display: none !important;
}

/* Contenedor principal centrado y con ancho máximo */
body.central-login .page-main .columns {
    max-width: 1100px;
    margin: 40px auto 60px auto;
}

/* Tarjeta blanca general para formularios y dashboard */
body.central-login .column.main {
    float: none;
}

/* Bloques típicos: login, crear cuenta, dashboard, carrito */
body.central-login .column.main > .block,
body.central-login .column.main > .login-container,
body.central-login .column.main > .form-create-account,
body.central-login .column.main > .account,
body.central-login .column.main > .cart-container,
body.central-login .column.main > .form-address-edit {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.06);
    padding: 32px 40px;
}

/* Para el formulario de crear cuenta, que el bloque interno también sea tarjeta */
body.central-login .form-create-account {
    background: transparent;
}
body.central-login .form-create-account .fieldset,
body.central-login .form-create-account .fieldset + .actions-toolbar {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.06);
    padding: 32px 40px;
}

/* Inputs redondeados tipo tarjeta digital */
body.central-login input[type="text"],
body.central-login input[type="email"],
body.central-login input[type="password"],
body.central-login input[type="tel"],
body.central-login select {
    border-radius: 10px;
    border: 1px solid #ddd;
    padding: 10px 12px;
    font-size: 14px;
}
body.central-login input:focus,
body.central-login select:focus {
    border-color: #1f12a8;
    box-shadow: 0 0 0 2px rgba(31,18,168,0.12);
    outline: none;
}

/* Botones principales morados, igual que en la tarjeta */
body.central-login .action.login,
body.central-login .action.submit,
body.central-login .action.primary {
    background: #2218c9 !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    border: none !important;
    padding: 12px 32px !important;
    min-width: 220px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.16) !important;
}

/* Hover botón */
body.central-login .action.login:hover,
body.central-login .action.submit:hover,
body.central-login .action.primary:hover {
    background: #1a149e !important;
}

/* Quitar títulos de secciones "Información Personal", etc. */
body.central-login .fieldset .legend,
body.central-login .fieldset .legend span {
    display: none !important;
}

/* Carrito: caja del carrito como tarjeta */
body.central-login .cart-container .cart-summary,
body.central-login .cart-container .cart.table-wrapper,
body.central-login .cart-container .cart-empty {
    border-radius: 24px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.06);
}

/* Responsive */
@media (max-width: 960px) {
    body.central-login .page-main .columns {
        margin: 20px auto 30px auto;
        padding: 0 10px;
    }

    body.central-login .column.main > .block,
    body.central-login .column.main > .login-container,
    body.central-login .column.main > .form-create-account,
    body.central-login .column.main > .account,
    body.central-login .column.main > .cart-container,
    body.central-login .column.main > .form-address-edit {
        padding: 20px 16px;
        border-radius: 18px;
        box-shadow: 0 10px 26px rgba(0,0,0,0.08);
    }
}