/* Alta de cliente (registro) — CSS base autónomo (no depende de login.css).
   Las variables --pnuevocliente-* las inyecta MDPaginas::writeCssFile() desde los params. */

/* ── Página y fondo ──────────────────────────────────────────────────────── */
.alta-cliente {
    position: relative;
    display: flex;
    min-height: 60vh;
    background-color: var(--pnuevocliente-color-fondo, var(--bg-white, #fff));
    background-image: var(--pnuevocliente-imagen-fondo, none);
    background-position: var(--pnuevocliente-imagen-posicion, center);
    background-size: var(--pnuevocliente-imagen-tamanio, cover);
    background-repeat: var(--pnuevocliente-imagen-repeat, no-repeat);
}
/* Velo sobre la imagen de fondo de la página */
.alta-cliente::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #000;
    opacity: var(--pnuevocliente-overlay, 0);
    pointer-events: none;
    z-index: 0;
}

/* ── Columna del formulario ──────────────────────────────────────────────── */
.alta-cliente .login-pagina__left {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: var(--pnuevocliente-form-align, flex-start);
    padding-block: var(--pnuevocliente-padding-v, 3rem);
    padding-inline: var(--pnuevocliente-padding-h, 2rem);
    background: transparent;
    color: var(--dark-color, #222);
}
.alta-cliente .login-pagina__form-wrap {
    width: 100%;
    max-width: var(--pnuevocliente-form-max-width, 760px);
    align-self: var(--pnuevocliente-form-align, flex-start);
}

/* ── Logo ────────────────────────────────────────────────────────────────── */
.alta-cliente .login-pagina__logo {
    display: block;
    max-height: var(--pnuevocliente-logo-tam, 48px);
    width: auto;
    margin-bottom: var(--pnuevocliente-logo-margen, 1.5rem);
}

/* ── Textos ──────────────────────────────────────────────────────────────── */
.alta-cliente .login-pagina__titulo {
    color: var(--pnuevocliente-titulo-color, var(--dark-color, #222)) !important;
    font-size: var(--pnuevocliente-titulo-tam, 2.75rem) !important;
    font-weight: var(--pnuevocliente-titulo-peso, 700) !important;
    font-family: var(--pnuevocliente-titulo-fuente, inherit) !important;
    margin: 0 0 .5rem;
}
.alta-cliente .login-pagina__subtitulo {
    color: var(--pnuevocliente-subtitulo-color, var(--dark-color, #222)) !important;
    font-size: var(--pnuevocliente-subtitulo-tam, 1rem);
    opacity: .8;
    margin: 0 0 1.5rem;
}
.alta-cliente .login-pagina__alert {
    background: #fff3f3;
    color: #c0392b;
    border: 1px solid #f5c6cb;
    border-radius: .375rem;
    padding: .625rem .875rem;
    font-size: .875rem;
    margin-bottom: 1rem;
}

/* ── Rejilla de campos ───────────────────────────────────────────────────── */
.alta-cliente form {
    display: grid;
    grid-template-columns: repeat(var(--pnuevocliente-form-cols, 2), 1fr);
    gap: 0 var(--pnuevocliente-gap-columnas, 1rem);
    align-items: start;
}
.alta-cliente .login-pagina__field { margin-bottom: var(--pnuevocliente-gap-campos, 0.85rem); }
.alta-cliente label {
    display: inline-block;
    margin-bottom: .25rem;
    color: var(--pnuevocliente-label-color, var(--dark-color, #222));
}
/* Etiqueta visible encima de cada campo (solo aparece si se configura en el admin) */
.alta-cliente .login-pagina__label {
    display: block;
    margin-bottom: .3rem;
    font-size: .875rem;
    font-weight: 500;
    color: var(--pnuevocliente-label-color, var(--dark-color, #222));
}

/* ── Campos: inputs y selects ────────────────────────────────────────────── */
.alta-cliente .login-pagina__input,
.alta-cliente input:not([type="checkbox"]),
.alta-cliente select {
    width: 100%;
    box-sizing: border-box;
    display: block;
    background-color: var(--pnuevocliente-input-bg, var(--bg-white, #fff));
    color: var(--pnuevocliente-input-color, var(--dark-color, #222));
    border: var(--pnuevocliente-input-border-width, 1px) solid var(--pnuevocliente-input-border, #c4c9cf);
    border-radius: var(--pnuevocliente-input-radius, 0.375rem);
    padding: var(--pnuevocliente-input-padding, 0.75rem);
    font-size: var(--pnuevocliente-input-tam, 1rem);
    transition: border-color .15s;
}
.alta-cliente .login-pagina__input:focus,
.alta-cliente input:focus,
.alta-cliente select:focus {
    border-color: var(--pnuevocliente-input-border-focus, var(--primary-color, #8CD50B));
    outline: none;
}
.alta-cliente ::placeholder {
    color: var(--pnuevocliente-input-placeholder, #adb5bd);
}

/* ── Casillas de verificación ────────────────────────────────────────────── */
.alta-cliente .login-pagina__remember {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
    font-size: var(--pnuevocliente-check-texto-tam, 0.9rem);
    color: var(--pnuevocliente-check-texto-color, var(--dark-color, #222));
    cursor: pointer;
}
.alta-cliente input[type="checkbox"] {
    /* Restaurar el checkbox nativo (Tailwind forms lo pone en appearance:none).
       appearance:auto + accent-color = casilla cuadrada con el check en color de marca. */
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
    width: var(--pnuevocliente-check-tam, 18px);
    height: var(--pnuevocliente-check-tam, 18px);
    min-width: var(--pnuevocliente-check-tam, 18px);
    margin: 0;
    padding: 0;
    border-radius: 0;
    accent-color: var(--pnuevocliente-check-color, var(--primary-color, #8CD50B));
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Enlaces ─────────────────────────────────────────────────────────────── */
.alta-cliente .login-pagina__form-wrap a:not(.login-pagina__btn-login):not(.login-pagina__btn-signup) {
    color: var(--pnuevocliente-link-color, var(--primary-color, #8CD50B));
    text-decoration: var(--pnuevocliente-link-decoration, underline);
    transition: color .15s;
}
.alta-cliente .login-pagina__form-wrap a:not(.login-pagina__btn-login):not(.login-pagina__btn-signup):hover {
    color: var(--pnuevocliente-link-color-hover, var(--secondary-color, #222));
}

/* ── Acciones (botones) ──────────────────────────────────────────────────── */
.alta-cliente .login-pagina__actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.alta-cliente form > .login-pagina__remember { grid-column: 1 / -1; }

/* Botón principal */
.alta-cliente .login-pagina__btn-login {
    display: inline-block;
    background: var(--pnuevocliente-btn-color, var(--primary-color, #8CD50B));
    color: var(--pnuevocliente-btn-color-texto, var(--dark-color, #222));
    border: 0;
    border-radius: var(--pnuevocliente-btn-radius, 0.375rem);
    padding: var(--pnuevocliente-btn-padding-v, 0.75rem) var(--pnuevocliente-btn-padding-h, 1.5rem);
    font-weight: var(--pnuevocliente-btn-peso, 600);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s, color .15s, opacity .15s;
}
.alta-cliente .login-pagina__btn-login:hover:not(:disabled) {
    background: var(--pnuevocliente-btn-color-hover, var(--secondary-color, #222));
    color: var(--pnuevocliente-btn-texto-hover, var(--bg-white, #fff));
}
.alta-cliente .login-pagina__btn-login:disabled { opacity: .5; cursor: not-allowed; }

/* Enlace / botón secundario. El borde solo aparece si se configura un color
   (btn2-border); por defecto es transparente = sin borde visible. */
.alta-cliente .login-pagina__btn-signup {
    display: inline-block;
    background: var(--pnuevocliente-btn2-color, transparent);
    color: var(--pnuevocliente-btn2-color-texto, var(--dark-color, #222)) !important;
    border: 1px solid var(--pnuevocliente-btn2-border, transparent);
    border-radius: var(--pnuevocliente-btn2-radius, 0.375rem);
    padding: var(--pnuevocliente-btn-padding-v, 0.75rem) var(--pnuevocliente-btn-padding-h, 1.5rem);
    font-weight: var(--pnuevocliente-btn-peso, 600);
    text-decoration: none !important;
    transition: opacity .15s;
}
.alta-cliente .login-pagina__btn-signup:hover { opacity: .8; }

/* ── Panel lateral (imagen) ──────────────────────────────────────────────── */
.alta-cliente .login-pagina__right {
    position: relative;
    z-index: 1;
    flex: 0 0 var(--pnuevocliente-panel-ancho, 40%);
    background-image: var(--pnuevocliente-panel-imagen, none);
    background-size: cover;
    background-position: center;
}
.alta-cliente .login-pagina__right-overlay {
    position: absolute;
    inset: 0;
    background: #000;
    opacity: var(--pnuevocliente-panel-overlay, 0);
}

@media (max-width: 640px) {
    .alta-cliente { flex-direction: column; }
    .alta-cliente form { grid-template-columns: 1fr; }
    .alta-cliente .login-pagina__right { display: none; }
}

:root {
    --pnuevocliente-titulo-tam: 3rem;
    --pnuevocliente-titulo-peso: 800;
    --pnuevocliente-titulo-color: var(--dark-color);
    --pnuevocliente-subtitulo-tam: 1rem;
    --pnuevocliente-subtitulo-color: var(--dark-color);
    --pnuevocliente-color-fondo: var(--bg-white);
    --pnuevocliente-overlay: 0;
    --pnuevocliente-imagen-posicion: center;
    --pnuevocliente-imagen-tamanio: cover;
    --pnuevocliente-imagen-repeat: no-repeat;
    --pnuevocliente-form-max-width: 960px;
    --pnuevocliente-form-cols: 2;
    --pnuevocliente-form-align: center;
    --pnuevocliente-padding-v: 3rem;
    --pnuevocliente-padding-h: 2rem;
    --pnuevocliente-gap-campos: 2rem;
    --pnuevocliente-gap-columnas: 1rem;
    --pnuevocliente-logo-tam: 48px;
    --pnuevocliente-logo-margen: 0;
    --pnuevocliente-panel-ancho: 40%;
    --pnuevocliente-panel-overlay: 0;
    --pnuevocliente-input-bg: var(--bg-white);
    --pnuevocliente-input-color: var(--dark-color);
    --pnuevocliente-input-border-focus: var(--primary-color);
    --pnuevocliente-input-border-width: 1px;
    --pnuevocliente-input-radius: 0.5rem;
    --pnuevocliente-input-padding: 0.25rem 0.625rem;
    --pnuevocliente-input-tam: 1rem;
    --pnuevocliente-label-color: var(--dark-color);
    --pnuevocliente-check-tam: 18px;
    --pnuevocliente-check-color: var(--primary-color);
    --pnuevocliente-check-texto-color: var(--dark-color);
    --pnuevocliente-check-texto-tam: 1rem;
    --pnuevocliente-link-color: var(--primary-color);
    --pnuevocliente-link-color-hover: var(--secondary-color);
    --pnuevocliente-link-decoration: underline;
    --pnuevocliente-btn-color: var(--primary-color);
    --pnuevocliente-btn-color-texto: var(--dark-color);
    --pnuevocliente-btn-color-hover: var(--secondary-color);
    --pnuevocliente-btn-texto-hover: var(--bg-white);
    --pnuevocliente-btn-radius: 0.5rem;
    --pnuevocliente-btn-padding-v: 0.375rem 0.875rem;
    --pnuevocliente-btn-padding-h: 0.375rem 0.875rem;
    --pnuevocliente-btn-peso: 800;
    --pnuevocliente-btn2-color-texto: var(--dark-color);
    --pnuevocliente-btn2-radius: 0;
}