/* ==========================================================================
   ILLAN PRO - AUTH MANAGER (Widget Sidebar & Frontend Forms)
   ========================================================================== */

/* Contenedor principal del widget */
.auth-widget-panel { 
    background: transparent; 
    border: none; 
    border-radius: 0; 
    padding: calc(var(--layout-margin-space) * 1) calc(var(--layout-margin-space) * 0.8); 
}

/* Cabecera del Usuario logueado */
.auth-user-header { 
    display: flex; 
    align-items: center; 
    gap: var(--layout-margin-space); 
    margin-bottom: var(--layout-margin-space); 
}

.auth-user-avatar { 
    /* Abstracción matemática para el avatar */
    width: calc(var(--button-size) * 3); 
    height: calc(var(--button-size) * 3); 
    border-radius: 50%; 
    object-fit: cover; 
    border: 2px solid var(--layout-border-glass); 
}

.auth-user-info { display: flex; flex-direction: column; }

.auth-greeting { 
    font-family: var(--font-general-text);
    font-size: var(--size-h8-title); 
    color: var(--color-general-text); 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
}

.auth-name { 
    font-family: var(--title-font);
    font-size: var(--size-h5-title); 
    font-weight: 700; 
    color: var(--title-color); 
}

/* Listas de Menú */
.auth-user-menu { 
    margin-bottom: var(--layout-margin-space); 
    padding-bottom: var(--layout-margin-space); 
    border-bottom: 1px solid var(--layout-border-glass); 
}

.auth-menu-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
    flex-direction: column; 
    gap: calc(var(--button-margin-space) * 0.5); 
}

.auth-menu-link { 
    display: flex; 
    align-items: center; 
    gap: var(--layout-margin-space); 
    padding: var(--button-margin-space) calc(var(--button-margin-space) * 1.5); 
    border-radius: var(--button-radius); 
    color: var(--color-general-text); 
    font-family: var(--font-general-text);
    font-size: calc(var(--size-general-text) * 0.9); 
    font-weight: 500; 
    transition: all var(--button-transition); 
    text-decoration: none;
}

.auth-menu-link:hover { 
    background: var(--form-bg-focus); 
    color: var(--title-color); 
    transform: translateX(4px); 
}

.auth-menu-icon { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: var(--color-primary); 
}

.auth-menu-icon svg { 
    width: 18px; 
    height: 18px; 
}

/* Estado de Invitado (Guest) */
.auth-logged-out { 
    text-align: center; 
    padding: var(--layout-margin-space) 0; 
}

.auth-guest-icon { 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    width: calc(var(--button-size) * 3.5); 
    height: calc(var(--button-size) * 3.5); 
    background: var(--layout-glass-background); 
    border: 1px solid var(--layout-border-glass);
    border-radius: 50%; 
    color: var(--color-general-text); 
    margin-bottom: var(--layout-margin-space); 
}

.auth-guest-icon svg { width: 24px; height: 24px; }

.auth-guest-title { 
    font-family: var(--title-font);
    font-size: var(--size-h5-title); 
    color: var(--title-color); 
    margin-bottom: calc(var(--layout-margin-space) * 0.5); 
}

.auth-guest-desc { 
    font-family: var(--font-general-text);
    font-size: calc(var(--size-general-text) * 0.85); 
    color: var(--color-general-text); 
    margin-bottom: calc(var(--layout-margin-space) * 1.5); 
    line-height: 1.4; 
}

/* Botones y Acciones del Widget */
.auth-actions { 
    display: flex; 
    flex-direction: column; 
    gap: calc(var(--button-margin-space) * 1.5); 
}

.btn-auth { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: calc(var(--button-margin-space) * 1.5); 
    width: 100%; 
    padding: calc(var(--button-margin-space) * 1.2) var(--button-margin-space); 
    border-radius: var(--button-radius); 
    font-family: var(--button-font);
    font-size: calc(var(--button-size) * 0.9); 
    font-weight: 600; 
    transition: var(--button-transition); 
    border: 1px solid transparent; 
    cursor: pointer;
    text-decoration: none;
}

.btn-auth svg { width: 18px; height: 18px; }

.btn-auth-primary { 
    background: var(--color-primary); 
    color: var(--button-hover-text); 
}
.btn-auth-primary:hover { 
    background: var(--button-hover-bg); 
    transform: var(--button-press-transform); 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-auth-admin { 
    background: var(--layout-glass-background); 
    border-color: var(--layout-border-glass); 
    color: var(--title-color); 
}
.btn-auth-admin:hover { 
    background: var(--button-hover-bg); 
    color: var(--button-hover-text);
    transform: translateY(-2px); 
}

.btn-auth-logout { 
    background: transparent; 
    border-color: var(--color-error); 
    color: var(--color-error); 
}
.btn-auth-logout:hover { 
    background: var(--color-error); 
    color: var(--button-hover-text); 
    transform: translateY(-2px); 
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

/* ==========================================================================
   VISTAS FRONTEND (FORMULARIOS FULL PAGE)
   ========================================================================== */
.auth-view-wrapper { width: 100%; }

.form-header { 
    text-align: center; 
    margin-bottom: calc(var(--layout-margin-space) * 1.5); 
}

.form-header h2, .form-header h3 { 
    font-family: var(--title-font);
    font-size: var(--size-h2-title); 
    color: var(--title-color); 
    margin-bottom: calc(var(--layout-margin-space) * 0.5); 
    font-weight: 800; 
}

.form-header p { 
    font-family: var(--font-general-text);
    font-size: calc(var(--size-general-text) * 0.95); 
    color: var(--color-general-text); 
}

.illan-auth-form { display: flex; flex-direction: column; }

/* Estilos de inputs (UI-Controls) locales consumiendo el manifiesto */
.ui-form-group {
    margin-bottom: var(--layout-margin-space);
}

.ui-form-label {
    display: block;
    font-family: var(--font-general-text);
    font-size: var(--form-label-size);
    font-weight: var(--form-label-weight);
    color: var(--form-label-color);
    margin-bottom: var(--form-label-spacing);
}

.ui-form-control {
    width: 100%;
    box-sizing: border-box;
    padding: var(--form-padding);
    background-color: var(--form-bg);
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    color: var(--form-text-color);
    font-family: var(--font-general-text);
    font-size: var(--size-general-text);
    transition: var(--form-transition);
    outline: none;
}

.ui-form-control:focus {
    background-color: var(--form-bg-focus);
    border-color: var(--color-primary);
    box-shadow: var(--form-focus-shadow);
}

.ui-form-control::placeholder {
    color: var(--form-placeholder-color);
}

.btn-primary-block {
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--button-font);
    font-size: var(--button-size);
    color: var(--button-hover-text);
    font-weight: 600;
    text-decoration: none;
    padding: calc(var(--button-margin-space) * 1.5);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--button-radius);
    cursor: pointer;
    transition: var(--button-transition);
    margin-top: calc(var(--layout-margin-space) * 0.5);
}

.btn-primary-block:hover {
    background-color: var(--button-hover-bg);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.btn-primary-block:active {
    transform: var(--button-press-transform);
}

/* Enlaces extra (Login/Registro) */
.auth-form-links { 
    margin-top: calc(var(--layout-margin-space) * 1.5); 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    gap: calc(var(--button-margin-space) * 1.5); 
    font-size: calc(var(--size-general-text) * 0.9); 
    color: var(--color-general-text); 
}

.auth-form-links a { 
    color: var(--color-primary); 
    font-weight: 600; 
    text-decoration: none;
    transition: color var(--form-transition);
}

.auth-form-links a:hover { 
    color: var(--title-color); 
}

.auth-text-muted { color: var(--color-general-text); }

/* Entrada de OTP (Verificación 2FA) */
.input-otp { 
    letter-spacing: 0.5em; 
    font-size: var(--size-h3-title) !important; 
    font-weight: bold; 
    text-align: center; 
}

.auth-error-msg { 
    text-align: center; 
    color: var(--color-error); 
    font-weight: 600; 
    padding: calc(var(--layout-margin-space) * 1.5); 
    font-size: var(--size-h6-title); 
}

/* ==========================================================================
   ACORDEONES DE MENÚ (WIDGET COMPONENT)
   ========================================================================== */
.auth-accordion {
    margin-bottom: var(--layout-margin-space);
    border-bottom: 1px solid var(--layout-border-glass);
}

.auth-accordion:last-of-type {
    margin-bottom: calc(var(--layout-margin-space) * 1.5);
}

.auth-accordion-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    padding: calc(var(--layout-margin-space) * 0.5) calc(var(--button-margin-space) * 1);
    color: var(--color-general-text);
    font-family: var(--font-general-text);
    font-size: var(--size-h8-title);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    cursor: pointer;
    transition: color var(--form-transition);
}

.auth-accordion-toggle:hover {
    color: var(--title-color);
}

.auth-accordion-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform var(--form-transition);
}

/* Animación de apertura y cierre usando CSS Grid Nativo */
.auth-accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--form-transition);
}

.auth-accordion-content-inner {
    min-height: 0; 
    overflow: hidden;
}

/* Estados Activos */
.auth-accordion.is-open .auth-accordion-toggle {
    color: var(--color-primary);
}

.auth-accordion.is-open .auth-accordion-toggle svg {
    transform: rotate(180deg);
}

.auth-accordion.is-open .auth-accordion-content {
    grid-template-rows: 1fr;
}

/* Ajustes menores para los contenedores internos del acordeón */
.auth-user-menu, .auth-admin-menu {
    padding-bottom: var(--layout-margin-space);
}