/**
 * Base CSS for local_shift_loginpage plugin
 *
 * @package    local_shift_loginpage
 * @copyright  2026 Aura
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --shift-panel-width: 36%;
    --shift-panel-max: 560px;
    --shift-panel-min: 320px;
    --shift-panel-padding: 2.5rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    white-space: nowrap;
}

/* Video de fondo: ocupa todo el viewport detrás del formulario. */
#local-shift-loginbg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -999;
    overflow: hidden;
    background: #000;
}
#local-shift-loginbg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}
body#page-login-index:has(#local-shift-loginbg) {
    background: transparent !important;
}

/* ============================================
   CUSTOM LOGIN FORM (formulario 100% del plugin)
   ============================================ */
#shift-login-custom-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--shift-panel-width);
    max-width: var(--shift-panel-max);
    min-width: var(--shift-panel-min);
    padding: var(--shift-panel-padding);
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--local-shift-loginbg-box-bg, rgba(255, 255, 255, 0.85));
    background: var(--local-shift-loginbg-box-bg, rgba(255, 255, 255, 0.85));
    z-index: 10;
    overflow-y: auto;
}


.shift-login-custom-form-inner {
    width: 100%;
}

/* Logo arriba del título «Iniciar sesión». */
.shift-login-logo-wrap {
    margin-bottom: 3rem;
    text-align: center;
}
.shift-login-logo {
    max-width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
    display: inline-block;
}

/* Título principal del login (referencia Estilo 1). */
.shift-login-title {
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
}

.shift-login-msg {
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 4px;
}

.shift-login-error {
    background: rgba(220, 53, 69, 0.15);
    color: #721c24;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.shift-login-info {
    background: rgba(0, 123, 255, 0.1);
    color: #004085;
    border: 1px solid rgba(0, 123, 255, 0.2);
}

.shift-login-maintenance {
    background: rgba(255, 193, 7, 0.15);
    color: #856404;
    border: 1px solid rgba(255, 193, 7, 0.35);
}

.shift-login-form {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}

.shift-login-field {
    margin-bottom: 1.25rem;
}

.shift-login-recaptcha {
    margin: 1rem 0 1.25rem;
}

.shift-login-field label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.shift-login-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    box-sizing: border-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 1rem;
    text-align: center;
}

.shift-login-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Borde, color de texto (por botón), opacidad y border-radius: aplican a todos los botones del login. */
#shift-login-custom-wrapper .shift-login-submit {
    border-style: var(--local-shift-loginbg-btn-border-style, solid);
    color: var(--local-shift-loginbg-btn-text-login, #ffffff);
    border-radius: var(--local-shift-loginbg-btn-border-radius, 4px);
}
#shift-login-custom-wrapper .shift-login-guest-button {
    border-style: var(--local-shift-loginbg-btn-border-style, solid);
    color: var(--local-shift-loginbg-btn-text-guest, #ffffff);
    border-radius: var(--local-shift-loginbg-btn-border-radius, 4px);
}
#shift-login-custom-wrapper .shift-login-signup-link {
    border-style: var(--local-shift-loginbg-btn-border-style, solid);
    color: var(--local-shift-loginbg-btn-text-signup, #ffffff);
    border-radius: var(--local-shift-loginbg-btn-border-radius, 4px);
}
#shift-login-custom-wrapper .shift-login-submit {
    padding: 0.6rem 1.25rem;
    font-size: 1rem;
    cursor: pointer;
    border-width: 1px;
    background: var(--local-shift-loginbg-btn-login-rgba, var(--local-shift-loginbg-btn-login, #198754));
}

.shift-login-submit:hover {
    filter: brightness(0.92);
}

.shift-login-forgot {
    text-align: center;
    font-size: 0.9rem;
}

/* Cookies: texto + enlace al aviso (referencia Estilo 1). */
.shift-login-cookies {
    margin-top: 1rem;
}
.shift-login-cookies-text {
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
    color: #495057;
}
.shift-login-cookies-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.9rem;
    color: #0d6efd;
    cursor: pointer;
    text-decoration: underline;
}
.shift-login-cookies-link:hover {
    color: #0a58ca;
}

.shift-login-providers {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Botones SSO: mismos estilo de borde, opacidad y radio que el resto de botones del login. */
.shift-login-provider {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-style: var(--local-shift-loginbg-btn-border-style, solid);
    border-radius: var(--local-shift-loginbg-btn-border-radius, 4px);
    text-decoration: none;
    color: inherit;
}

/* Colores por tipo de SSO (SAML2 / OpenID Connect); fondo con opacidad como el resto de botones. */
#shift-login-custom-wrapper .shift-login-provider.shift-idp-saml2 {
    background: var(--local-shift-idp-saml2-bg-rgba, var(--local-shift-idp-saml2-bg, #0d6efd));
    color: var(--local-shift-idp-saml2-color, #ffffff);
    border-color: var(--local-shift-idp-saml2-bg, #0d6efd);
}
#shift-login-custom-wrapper .shift-login-provider.shift-idp-oidc {
    background: var(--local-shift-idp-oidc-bg-rgba, var(--local-shift-idp-oidc-bg, #0d6efd));
    color: var(--local-shift-idp-oidc-color, #ffffff);
    border-color: var(--local-shift-idp-oidc-bg, #0d6efd);
}

.shift-login-provider img {
    width: 18px;
    height: 18px;
}

.shift-login-instructions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.shift-login-heading {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.shift-login-guest {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.shift-login-guest-text {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.shift-login-guest-form {
    margin: 0;
}

.shift-login-guest-button {
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    border-radius: 4px;
    border: 1px solid #198754;
    background: #198754;
    color: #fff;
    cursor: pointer;
}

.shift-login-guest-button:hover {
    background: #157347;
}

.shift-login-signup {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
}

.shift-login-signup-heading {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: #212529;
}

.shift-login-signup-desc {
    font-size: 0.9rem;
    color: #495057;
    margin: 0 0 0.75rem;
}

.shift-login-signup-link {
    display: inline-block;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
}

.shift-login-footer-text {
    margin-top: 1.25rem;
    font-size: 0.85rem;
    color: #6c757d;
}

/* Selector de idioma debajo del footer (<select> nativo, sin dropdown JS). */
.shift-login-languagemenu {
    margin-top: 1rem;
}
.shift-login-languagemenu .singleselect {
    margin: 0;
}
.shift-login-languagemenu .form-select {
    min-width: 10rem;
    font-size: 0.9rem;
    padding: 0.4rem 0.75rem;
    border-radius: 4px;
    background: transparent;
    border: none;
    color: var(--local-shift-loginbg-lang-select-color, #212529) !important;
}
/* Mayor especificidad para que el color del texto no lo pise el tema. */
#shift-login-custom-wrapper .shift-login-languagemenu select.form-select {
    color: var(--local-shift-loginbg-lang-select-color, #212529) !important;
}

/* ============================================
   STYLE VARIANTS (1/2/3)
   ============================================ */
#shift-login-custom-wrapper.shift-login-style-1 {
    border-radius: 0;
    box-shadow: none;
}

/* Estilo 1: todos los elementos centrados (referencia imagen). */
#shift-login-custom-wrapper.shift-login-style-1 .shift-login-custom-form-inner {
    text-align: center;
}
#shift-login-custom-wrapper.shift-login-style-1 .shift-login-title,
#shift-login-custom-wrapper.shift-login-style-1 .shift-login-msg,
#shift-login-custom-wrapper.shift-login-style-1 .shift-login-cookies,
#shift-login-custom-wrapper.shift-login-style-1 .shift-login-guest,
#shift-login-custom-wrapper.shift-login-style-1 .shift-login-signup,
#shift-login-custom-wrapper.shift-login-style-1 .shift-login-footer-text,
#shift-login-custom-wrapper.shift-login-style-1 .shift-login-languagemenu {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#shift-login-custom-wrapper.shift-login-style-1 .shift-login-form {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
}
#shift-login-custom-wrapper.shift-login-style-1 .shift-login-actions {
    align-items: center;
}
#shift-login-custom-wrapper.shift-login-style-1 .shift-login-providers {
    align-items: center;
}
#shift-login-custom-wrapper.shift-login-style-1 .shift-login-instructions {
    text-align: center;
}
#shift-login-custom-wrapper.shift-login-style-1 .shift-login-guest-form {
    display: flex;
    justify-content: center;
}
#shift-login-custom-wrapper.shift-login-style-2 {
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

#shift-login-custom-wrapper.shift-login-style-3 {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ============================================
   BUTTON STYLES (colores, borde, texto y opacidad desde configuración)
   ============================================ */
.shift-login-buttons-solid .shift-login-submit {
    background: var(--local-shift-loginbg-btn-login-rgba, var(--local-shift-loginbg-btn-login, #198754));
    color: var(--local-shift-loginbg-btn-text-login, #ffffff);
    border-color: var(--local-shift-loginbg-btn-login, #198754);
}

.shift-login-buttons-outline .shift-login-submit {
    background: transparent;
    color: var(--local-shift-loginbg-btn-text-login, var(--local-shift-loginbg-btn-login, #198754));
    border-width: 1px;
    border-color: var(--local-shift-loginbg-btn-login, #198754);
}

.shift-login-buttons-ghost .shift-login-submit {
    background: transparent;
    color: var(--local-shift-loginbg-btn-text-login, var(--local-shift-loginbg-btn-login, #198754));
    border-width: 1px;
    border-color: transparent;
}

.shift-login-buttons-solid .shift-login-guest-button {
    background: var(--local-shift-loginbg-btn-guest-rgba, var(--local-shift-loginbg-btn-guest, #198754));
    color: var(--local-shift-loginbg-btn-text-guest, #ffffff);
    border-width: 1px;
    border-color: var(--local-shift-loginbg-btn-guest, #198754);
}
.shift-login-buttons-solid .shift-login-guest-button:hover {
    filter: brightness(0.92);
}

.shift-login-buttons-solid .shift-login-signup-link {
    background: var(--local-shift-loginbg-btn-signup-rgba, var(--local-shift-loginbg-btn-signup, #198754));
    color: var(--local-shift-loginbg-btn-text-signup, #ffffff);
    border-width: 1px;
    border-color: var(--local-shift-loginbg-btn-signup, #198754);
}
.shift-login-buttons-solid .shift-login-signup-link:hover {
    filter: brightness(0.92);
}

.shift-login-buttons-outline .shift-login-guest-button {
    background: transparent;
    color: var(--local-shift-loginbg-btn-text-guest, var(--local-shift-loginbg-btn-guest, #198754));
    border-width: 1px;
    border-color: var(--local-shift-loginbg-btn-guest, #198754);
}

.shift-login-buttons-ghost .shift-login-guest-button {
    background: transparent;
    color: var(--local-shift-loginbg-btn-text-guest, var(--local-shift-loginbg-btn-guest, #198754));
    border-width: 1px;
    border-color: transparent;
}

.shift-login-buttons-outline .shift-login-signup-link,
.shift-login-buttons-ghost .shift-login-signup-link {
    background: transparent;
    color: var(--local-shift-loginbg-btn-text-signup, var(--local-shift-loginbg-btn-signup, #198754));
    border-width: 1px;
    border-color: var(--local-shift-loginbg-btn-signup, #198754);
}
.shift-login-buttons-ghost .shift-login-signup-link {
    border-color: transparent;
}

.shift-login-buttons-outline .shift-login-provider,
.shift-login-buttons-ghost .shift-login-provider {
    background: transparent;
}

/* ============================================
   SELECTOR STYLES (idioma/cookies)
   ============================================ */
.shift-login-select-minimal .shift-login-footer .btn,
.shift-login-select-minimal .shift-login-footer .dropdown-toggle {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.shift-login-select-pill .shift-login-footer .btn,
.shift-login-select-pill .shift-login-footer .dropdown-toggle {
    border-radius: 999px;
    padding-left: 1rem;
    padding-right: 1rem;
}