/* ════════════════════════════════════════════════════════════════════════════
   auth.css — Transotel.Web
   Ubicación: wwwroot/css/auth.css
   Estilos compartidos por Login, Registro (solicitud hotel) y Recuperar.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── SECCIÓN WRAPPER ──────────────────────────────────────────────────────── */
.auth-section {
    min-height:      calc(100vh - var(--navbar-height) - 120px);
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         2.5rem 1rem;
    background:      linear-gradient(160deg, var(--color-teal-darker) 0%, var(--color-azul) 100%);
    position:        relative;
    overflow:        hidden;
}

/* Patrón decorativo de fondo */
.auth-section::before {
    content:          '';
    position:         absolute;
    inset:            0;
    background-image: radial-gradient(circle at 20% 80%, rgba(223,187,62,0.08) 0%, transparent 50%),
                      radial-gradient(circle at 80% 20%, rgba(0,133,114,0.12) 0%, transparent 50%);
    pointer-events:   none;
}

/* ── TARJETA CENTRAL ──────────────────────────────────────────────────────── */
.auth-card {
    position:      relative;
    z-index:       1;
    width:         100%;
    max-width:     440px;
    border-radius: var(--border-radius-xl) !important;
    box-shadow:    0 24px 64px rgba(0,0,0,0.30) !important;
    overflow:      visible !important;
}

/* Tarjeta ancha para el registro de hotel */
.registro-card {
    max-width: 860px;
    overflow:  hidden !important;
}

/* ── LOGO ─────────────────────────────────────────────────────────────────── */
.auth-logo {
    display:         flex;
    justify-content: center;
    padding:         1.75rem 1.5rem 0;
    background:      var(--color-white);
    border-radius:   var(--border-radius-xl) var(--border-radius-xl) 0 0;
}
.auth-logo figure { margin: 0; }
.auth-logo img    { height: 36px; width: auto; }

/* Logo del registro (borde redondo sólo arriba en desktop) */
.registro-logo {
    padding:       1.5rem 2rem;
    border-bottom: 1px solid var(--color-light-gray);
}

/* ── CUERPO DE LA TARJETA ─────────────────────────────────────────────────── */
.auth-card-body {
    padding: 1.75rem 2rem 2rem !important;
}
@media (max-width: 480px) {
    .auth-card-body { padding: 1.25rem 1.25rem 1.5rem !important; }
}

/* ── LAYOUT 2 COLUMNAS DEL REGISTRO ──────────────────────────────────────── */
.registro-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
}
@media (max-width: 700px) {
    .registro-layout { grid-template-columns: 1fr; }
}

/* ── PANEL DE BENEFICIOS (izquierda) ─────────────────────────────────────── */
.registro-benefits {
    background:    linear-gradient(170deg, var(--color-teal) 0%, var(--color-teal-darker) 100%);
    color:         var(--color-white);
    padding:       2rem 1.75rem;
    border-radius: 0 0 0 var(--border-radius-xl);
}
@media (max-width: 700px) {
    .registro-benefits { border-radius: 0; padding: 1.5rem; }
}

.benefits-title {
    font-size:     1.1rem;
    font-weight:   var(--font-weight-bold);
    margin-bottom: 0.75rem;
    display:       flex;
    align-items:   flex-start;
    gap:           0.6rem;
    line-height:   1.4;
    color:         var(--color-white);
}
.benefits-title i { color: var(--color-gold); margin-top: 2px; flex-shrink: 0; }

.benefits-intro {
    font-size:     0.875rem;
    opacity:       0.9;
    margin-bottom: 1.25rem;
    line-height:   1.6;
}

.benefits-list {
    list-style: none;
    padding:    0;
    margin:     0 0 1.5rem;
    display:    flex;
    flex-direction: column;
    gap:        0.6rem;
}
.benefits-list li {
    display:     flex;
    align-items: flex-start;
    gap:         0.6rem;
    font-size:   0.875rem;
    line-height: 1.4;
}
.benefits-list li i {
    color:      var(--color-gold);
    margin-top: 2px;
    flex-shrink: 0;
    font-size:  0.85rem;
}

.benefits-contact {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   0.8rem;
    opacity:     0.85;
    border-top:  1px solid rgba(255,255,255,0.2);
    padding-top: 1rem;
    margin-top:  auto;
}
.benefits-contact a {
    color: rgba(255,255,255,0.9);
    text-decoration: underline;
}
.benefits-contact a:hover { color: var(--color-white); }

/* ── PANEL DEL FORMULARIO (derecha) ──────────────────────────────────────── */
.registro-form-panel {
    padding: 2rem;
    background: var(--color-white);
    border-radius: 0 0 var(--border-radius-xl) 0;
}
@media (max-width: 700px) {
    .registro-form-panel { padding: 1.5rem; border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl); }
}

/* ── CABECERA DE FORMULARIO ───────────────────────────────────────────────── */
.auth-header {
    text-align:    center;
    margin-bottom: 1.5rem;
}
.auth-header h1 {
    font-size:     1.5rem;
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           0.5rem;
    margin-bottom: 0.35rem;
}
.auth-header p { margin: 0; font-size: var(--font-size-sm); }

.registro-header { text-align: left; margin-bottom: 1.25rem; }
.registro-header h1 { justify-content: flex-start; font-size: 1.3rem; }

/* ── REQUIRED BADGE ──────────────────────────────────────────────────────── */
.badge-required {
    color:       var(--color-danger);
    font-weight: var(--font-weight-bold);
    margin-left: 2px;
}

/* ── HINT BAJO EL CAMPO ──────────────────────────────────────────────────── */
.form-text-hint {
    font-size:  0.75rem;
    color:      var(--color-text-muted);
    margin-top: 0.3rem;
    display:    flex;
    gap:        0.3rem;
    align-items: flex-start;
}
.form-text-hint i { margin-top: 2px; flex-shrink: 0; }

/* ── PASSWORD LABEL ROW ───────────────────────────────────────────────────── */
.password-label-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             0.5rem;
    flex-wrap:       wrap;
    margin-bottom:   0.4rem;
}
.password-label-row .form-label { margin-bottom: 0; }

.link-recuperar {
    font-size:   var(--font-size-sm);
    color:       var(--color-teal);
    white-space: nowrap;
}
.link-recuperar:hover { color: var(--color-teal-dark); }

/* ── INPUT DE CONTRASEÑA (con botón ojo) ─────────────────────────────────── */
.password-input-wrap { position: relative; }
.password-input-wrap .form-control { padding-right: 2.75rem; }
.btn-show-password {
    position:    absolute;
    right:       0.75rem;
    top:         50%;
    transform:   translateY(-50%);
    background:  transparent;
    border:      none;
    cursor:      pointer;
    color:       var(--color-mid-gray);
    padding:     0.25rem;
    line-height: 1;
    transition:  color var(--transition-fast);
}
.btn-show-password:hover { color: var(--color-teal); }

/* ── AUTOCOMPLETE ────────────────────────────────────────────────────────── */
.autocomplete-wrapper { position: relative; }

.autocomplete-input-wrap {
    position: relative;
    display:  flex;
    align-items: center;
}
.autocomplete-input-wrap .form-control { padding-right: 2.25rem; }

.autocomplete-spinner {
    position:   absolute;
    right:      0.75rem;
    color:      var(--color-teal);
    font-size:  0.85rem;
    display:    none;           /* JS lo muestra/oculta */
    pointer-events: none;
}
.autocomplete-spinner.visible { display: block; }

.autocomplete-dropdown {
    position:     absolute;
    top:          calc(100% + 4px);
    left:         0;
    right:        0;
    z-index:      1050;
    background:   var(--color-white);
    border:       1px solid var(--color-light-gray);
    border-radius: var(--border-radius);
    box-shadow:   0 8px 24px rgba(0,0,0,0.12);
    max-height:   260px;
    overflow-y:   auto;
    padding:      0.25rem 0;
    margin:       0;
    list-style:   none;
}

.autocomplete-item {
    display:    flex;
    align-items: center;
    gap:         0.6rem;
    padding:     0.6rem 1rem;
    cursor:      pointer;
    transition:  background var(--transition-fast);
    font-size:   0.875rem;
}
.autocomplete-item:hover,
.autocomplete-item.active {
    background: var(--color-off-white);
}
.autocomplete-item.active { outline: 2px solid var(--color-teal); outline-offset: -2px; }

.autocomplete-item-icon {
    color:      var(--color-teal);
    font-size:  0.9rem;
    flex-shrink: 0;
    width:       1.1rem;
    text-align:  center;
}
.autocomplete-item-body { flex: 1; min-width: 0; }
.autocomplete-item-nombre {
    font-weight:   var(--font-weight-semibold);
    color:         var(--color-dark);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.autocomplete-item-meta {
    font-size: 0.75rem;
    color:     var(--color-text-muted);
    display:   flex;
    gap:       0.4rem;
    align-items: center;
    margin-top: 1px;
}
.autocomplete-stars {
    color:     var(--color-gold);
    font-size: 0.6rem;
    letter-spacing: -1px;
}
.autocomplete-item-hint {
    padding:   0.5rem 1rem;
    font-size: 0.8rem;
    color:     var(--color-text-muted);
    font-style: italic;
}

/* ── BARRA DE FORTALEZA DE CONTRASEÑA ────────────────────────────────────── */
.password-strength-bar {
    height:        6px;
    background:    var(--color-light-gray);
    border-radius: var(--border-radius-pill);
    margin-top:    0.5rem;
    overflow:      hidden;
}
.strength-fill {
    height:        100%;
    width:         0%;
    border-radius: var(--border-radius-pill);
    transition:    width var(--transition-base), background-color var(--transition-base);
}
.strength-fill.strength-0 { width: 0%;   background: transparent; }
.strength-fill.strength-1 { width: 25%;  background: var(--color-danger); }
.strength-fill.strength-2 { width: 50%;  background: var(--color-warning); }
.strength-fill.strength-3 { width: 75%;  background: #f0a500; }
.strength-fill.strength-4 { width: 100%; background: var(--color-success); }

/* ── REQUISITOS DE CONTRASEÑA ────────────────────────────────────────────── */
.password-requirements {
    background:    var(--color-off-white);
    border:        1px solid var(--color-light-gray);
    border-radius: var(--border-radius);
    padding:       0.75rem 1rem;
    margin-top:    0.5rem;
    margin-bottom: 1rem;
    font-size:     var(--font-size-sm);
}
.reqs-title {
    font-weight:   var(--font-weight-semibold);
    color:         var(--color-dark-gray);
    margin-bottom: 0.5rem;
    display:       flex;
    align-items:   center;
    gap:           0.35rem;
}
.password-requirements ul {
    display:        flex;
    flex-direction: column;
    gap:            0.3rem;
    padding-left:   0;
}
.password-requirements li {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    color:       var(--color-text-muted);
    transition:  color var(--transition-fast);
}
.password-requirements li .fa-circle {
    font-size:  0.45rem;
    color:      var(--color-mid-gray);
    transition: color var(--transition-fast);
}
.password-requirements li.req-ok { color: var(--color-success); }
.password-requirements li.req-ok .fa-circle { display: none; }
.password-requirements li.req-ok::before {
    content:      '\f058';
    font-family:  'Font Awesome 6 Free';
    font-weight:  900;
    color:        var(--color-success);
    font-size:    0.8rem;
}

/* ── CHECKBOX ────────────────────────────────────────────────────────────── */
.form-check-group { margin-bottom: 1.25rem; }
.form-check-label {
    display:     flex;
    align-items: flex-start;
    gap:         0.6rem;
    font-size:   var(--font-size-sm);
    cursor:      pointer;
    line-height: 1.5;
}
.form-check-input {
    width:         18px;
    height:        18px;
    min-width:     18px;
    accent-color:  var(--color-teal);
    cursor:        pointer;
    margin-top:    2px;
    border-radius: 4px;
}
.form-label-optional {
    font-weight: var(--font-weight-normal);
    font-size:   0.8em;
    margin-left: 0.25rem;
}

/* ── PIE DE FORMULARIO ───────────────────────────────────────────────────── */
.auth-footer-link {
    text-align:    center;
    font-size:     var(--font-size-sm);
    margin-top:    1.25rem;
    margin-bottom: 0;
    color:         var(--color-text-muted);
}
.auth-footer-link a       { color: var(--color-teal); }
.auth-footer-link a:hover { color: var(--color-teal-dark); }

/* Colores utilitarios */
.text-gold { color: var(--color-gold) !important; }
.text-teal { color: var(--color-teal) !important; }