/**
 * ===========================================
 * LANDING PAGE - ÁTOMOS CSS
 * ===========================================
 *
 * Estilos para los componentes atómicos:
 * - Button
 * - Input
 * - Badge
 * - Avatar
 * - Icon
 * - Rating
 * - Logo
 *
 * ===========================================
 */

/*===========================================
 * BUTTON
 *===========================================*/

.landing-page .l-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--landing-space-2);
  font-family: var(--landing-font-family);
  font-weight: var(--landing-font-weight-medium);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: var(--landing-border-width-2) solid transparent;
  border-radius: var(--landing-radius-md);
  transition: all var(--landing-transition-fast);
}

.landing-page .l-btn:focus-visible {
  outline: 2px solid var(--landing-accent);
  outline-offset: 2px;
}

/* Tamaños */
.landing-page .l-btn--sm {
  padding: var(--landing-space-2) var(--landing-space-4);
  font-size: var(--landing-font-size-sm);
  min-height: 36px;
}

.landing-page .l-btn--md {
  padding: var(--landing-space-3) var(--landing-space-6);
  font-size: var(--landing-font-size-base);
  min-height: 44px;
}

.landing-page .l-btn--lg {
  padding: var(--landing-space-4) var(--landing-space-8);
  font-size: var(--landing-font-size-lg);
  min-height: 52px;
}

/* Variantes */
.landing-page .l-btn--primary {
  background-color: var(--landing-primary);
  border-color: var(--landing-primary);
  color: var(--landing-white);
}

.landing-page .l-btn--primary:hover:not(.l-btn--disabled) {
  background-color: var(--landing-primary-hover);
  border-color: var(--landing-primary-hover);
}

.landing-page .l-btn--secondary {
  background-color: var(--landing-gray-100);
  border-color: var(--landing-gray-100);
  color: var(--landing-text-primary);
}

.landing-page .l-btn--secondary:hover:not(.l-btn--disabled) {
  background-color: var(--landing-gray-200);
  border-color: var(--landing-gray-200);
}

.landing-page .l-btn--outline {
  background-color: transparent;
  border-color: var(--landing-border-dark);
  color: var(--landing-text-primary);
}

.landing-page .l-btn--outline:hover:not(.l-btn--disabled) {
  background-color: var(--landing-gray-100);
}

.landing-page .l-btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--landing-text-primary);
}

.landing-page .l-btn--ghost:hover:not(.l-btn--disabled) {
  background-color: var(--landing-gray-100);
}

.landing-page .l-btn--link {
  background-color: transparent;
  border-color: transparent;
  color: var(--landing-accent);
  padding-left: 0;
  padding-right: 0;
}

.landing-page .l-btn--link:hover:not(.l-btn--disabled) {
  color: var(--landing-accent-hover);
  text-decoration: underline;
}

.landing-page .l-btn--dark {
  background-color: var(--landing-gray-900);
  border-color: var(--landing-gray-900);
  color: var(--landing-white);
}

.landing-page .l-btn--dark:hover:not(.l-btn--disabled) {
  background-color: var(--landing-gray-800);
  border-color: var(--landing-gray-800);
}

/* Estados */
.landing-page .l-btn--full {
  width: 100%;
}

.landing-page .l-btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.landing-page .l-btn--loading {
  position: relative;
  color: transparent !important;
}

.landing-page .l-btn__spinner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: l-btn-spin 0.75s linear infinite;
}

@keyframes l-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.landing-page .l-btn__icon {
  flex-shrink: 0;
  font-size: 1.25em;
}

/*===========================================
 * INPUT
 *===========================================*/

.landing-page .l-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--landing-space-2);
}

.landing-page .l-input-label {
  font-size: var(--landing-font-size-sm);
  font-weight: var(--landing-font-weight-medium);
  color: var(--landing-text-primary);
}

.landing-page .l-input-required {
  color: var(--landing-error);
  margin-left: var(--landing-space-1);
}

.landing-page .l-input-container {
  position: relative;
  display: flex;
  align-items: center;
}

.landing-page .l-input {
  width: 100%;
  font-family: var(--landing-font-family);
  font-size: var(--landing-font-size-base);
  color: var(--landing-text-primary);
  background-color: var(--landing-white);
  border: var(--landing-border-width) solid var(--landing-border-default);
  border-radius: var(--landing-radius-md);
  transition: border-color var(--landing-transition-fast), box-shadow var(--landing-transition-fast);
}

.landing-page .l-input::placeholder {
  color: var(--landing-text-muted);
}

.landing-page .l-input:focus {
  outline: none;
  border-color: var(--landing-primary);
  box-shadow: 0 0 0 3px rgba(26, 26, 26, 0.1);
}

/* Tamaños */
.landing-page .l-input-wrapper--sm .l-input {
  padding: var(--landing-space-2) var(--landing-space-3);
  font-size: var(--landing-font-size-sm);
  min-height: 36px;
}

.landing-page .l-input-wrapper--md .l-input {
  padding: var(--landing-space-3) var(--landing-space-4);
  min-height: 44px;
}

.landing-page .l-input-wrapper--lg .l-input {
  padding: var(--landing-space-4) var(--landing-space-5);
  font-size: var(--landing-font-size-lg);
  min-height: 52px;
}

/* Con icono */
.landing-page .l-input-icon {
  position: absolute;
  color: var(--landing-text-muted);
  font-size: 1.25rem;
  pointer-events: none;
}

.landing-page .l-input-icon--left {
  left: var(--landing-space-4);
}

.landing-page .l-input-icon--right {
  right: var(--landing-space-4);
}

.landing-page .l-input-wrapper--icon-left .l-input {
  padding-left: calc(var(--landing-space-4) + 1.5rem + var(--landing-space-2));
}

.landing-page .l-input-wrapper--icon-right .l-input {
  padding-right: calc(var(--landing-space-4) + 1.5rem + var(--landing-space-2));
}

/* Estados */
.landing-page .l-input-wrapper--error .l-input {
  border-color: var(--landing-error);
}

.landing-page .l-input-wrapper--error .l-input:focus {
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.1);
}

.landing-page .l-input-wrapper--disabled .l-input {
  background-color: var(--landing-gray-100);
  cursor: not-allowed;
}

.landing-page .l-input-error {
  display: flex;
  align-items: center;
  gap: var(--landing-space-1);
  font-size: var(--landing-font-size-sm);
  color: var(--landing-error);
  margin: 0;
}

.landing-page .l-input-hint {
  font-size: var(--landing-font-size-sm);
  color: var(--landing-text-tertiary);
  margin: 0;
}

/*===========================================
 * BADGE
 *===========================================*/

.landing-page .l-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--landing-space-1);
  font-family: var(--landing-font-family);
  font-weight: var(--landing-font-weight-medium);
  white-space: nowrap;
  border-radius: var(--landing-radius-sm);
}

/* Tamaños */
.landing-page .l-badge--sm {
  padding: var(--landing-space-1) var(--landing-space-2);
  font-size: var(--landing-font-size-xs);
}

.landing-page .l-badge--md {
  padding: var(--landing-space-1) var(--landing-space-3);
  font-size: var(--landing-font-size-sm);
}

/* Variantes */
.landing-page .l-badge--default {
  background-color: var(--landing-gray-100);
  color: var(--landing-text-secondary);
}

.landing-page .l-badge--verified {
  background-color: var(--landing-gray-100);
  color: var(--landing-text-secondary);
}

.landing-page .l-badge--featured {
  background-color: var(--landing-gray-900);
  color: var(--landing-white);
}

.landing-page .l-badge--success {
  background-color: var(--landing-success-light);
  color: var(--landing-success);
}

.landing-page .l-badge--warning {
  background-color: var(--landing-warning-light);
  color: #856404;
}

.landing-page .l-badge--error {
  background-color: var(--landing-error-light);
  color: var(--landing-error);
}

.landing-page .l-badge--info {
  background-color: var(--landing-info-light);
  color: var(--landing-info);
}

/* Outline */
.landing-page .l-badge--outline {
  background-color: transparent;
  border: var(--landing-border-width) solid currentColor;
}

/* Pill */
.landing-page .l-badge--pill {
  border-radius: var(--landing-radius-full);
}

.landing-page .l-badge__icon {
  font-size: 1em;
}

/*===========================================
 * AVATAR
 *===========================================*/

.landing-page .l-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--landing-gray-200);
  color: var(--landing-text-secondary);
}

/* Tamaños */
.landing-page .l-avatar--xs {
  width: 24px;
  height: 24px;
  font-size: var(--landing-font-size-xs);
}

.landing-page .l-avatar--sm {
  width: 32px;
  height: 32px;
  font-size: var(--landing-font-size-sm);
}

.landing-page .l-avatar--md {
  width: 40px;
  height: 40px;
  font-size: var(--landing-font-size-base);
}

.landing-page .l-avatar--lg {
  width: 56px;
  height: 56px;
  font-size: var(--landing-font-size-lg);
}

.landing-page .l-avatar--xl {
  width: 72px;
  height: 72px;
  font-size: var(--landing-font-size-xl);
}

.landing-page .l-avatar--2xl {
  width: 96px;
  height: 96px;
  font-size: var(--landing-font-size-2xl);
}

/* Forma */
.landing-page .l-avatar--rounded {
  border-radius: var(--landing-radius-full);
}

.landing-page .l-avatar--bordered {
  border: 2px solid var(--landing-white);
  box-shadow: var(--landing-shadow-sm);
}

/* Imagen */
.landing-page .l-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback */
.landing-page .l-avatar__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-weight: var(--landing-font-weight-medium);
  text-transform: uppercase;
}

.landing-page .l-avatar--text .l-avatar__fallback {
  background-color: var(--landing-primary);
  color: var(--landing-white);
}

/* Status */
.landing-page .l-avatar__status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 25%;
  height: 25%;
  min-width: 8px;
  min-height: 8px;
  border-radius: var(--landing-radius-full);
  border: 2px solid var(--landing-white);
}

.landing-page .l-avatar__status--online {
  background-color: var(--landing-success);
}

.landing-page .l-avatar__status--offline {
  background-color: var(--landing-gray-400);
}

.landing-page .l-avatar__status--busy {
  background-color: var(--landing-error);
}

.landing-page .l-avatar__status--away {
  background-color: var(--landing-warning);
}

/*===========================================
 * ICON
 *===========================================*/

.landing-page .l-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Tamaños */
.landing-page .l-icon--xs {
  font-size: 14px;
}

.landing-page .l-icon--sm {
  font-size: 18px;
}

.landing-page .l-icon--md {
  font-size: 24px;
}

.landing-page .l-icon--lg {
  font-size: 32px;
}

.landing-page .l-icon--xl {
  font-size: 40px;
}

.landing-page .l-icon--2xl {
  font-size: 48px;
}

/* Stroke width */
.landing-page .l-icon--stroke-1 {
  stroke-width: 1;
}

.landing-page .l-icon--stroke-1\.5 {
  stroke-width: 1.5;
}

.landing-page .l-icon--stroke-2 {
  stroke-width: 2;
}

/* Spin */
.landing-page .l-icon--spin {
  animation: l-icon-spin 1s linear infinite;
}

@keyframes l-icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/*===========================================
 * RATING
 *===========================================*/

.landing-page .l-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--landing-space-2);
  --rating-color: #ffc107;
}

.landing-page .l-rating__stars {
  display: flex;
  gap: 2px;
}

.landing-page .l-rating__star {
  color: var(--landing-gray-300);
  line-height: 1;
}

.landing-page .l-rating__star--full {
  color: var(--rating-color);
}

.landing-page .l-rating__star--half {
  color: var(--rating-color);
}

/* Tamaños */
.landing-page .l-rating--xs .l-rating__star {
  font-size: 12px;
}

.landing-page .l-rating--sm .l-rating__star {
  font-size: 14px;
}

.landing-page .l-rating--md .l-rating__star {
  font-size: 18px;
}

.landing-page .l-rating--lg .l-rating__star {
  font-size: 24px;
}

/* Info */
.landing-page .l-rating__info {
  display: flex;
  align-items: center;
  gap: var(--landing-space-2);
}

.landing-page .l-rating__value {
  font-weight: var(--landing-font-weight-semibold);
  color: var(--landing-text-primary);
}

.landing-page .l-rating__reviews {
  font-size: var(--landing-font-size-sm);
  color: var(--landing-text-tertiary);
}

/* Interactive */
.landing-page .l-rating--interactive .l-rating__star {
  cursor: pointer;
  position: relative;
}

.landing-page .l-rating--interactive .l-rating__star-filled {
  display: none;
}

.landing-page .l-rating--interactive .l-rating__star-empty {
  display: inline;
}

.landing-page .l-rating--interactive .l-rating__star:hover .l-rating__star-filled,
.landing-page .l-rating--interactive .l-rating__star:has(input:checked) .l-rating__star-filled {
  display: inline;
  color: var(--rating-color);
}

.landing-page .l-rating--interactive .l-rating__star:hover .l-rating__star-empty,
.landing-page .l-rating--interactive .l-rating__star:has(input:checked) .l-rating__star-empty {
  display: none;
}

/*===========================================
 * LOGO
 *===========================================*/

.landing-page .l-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.landing-page .l-logo--link {
  text-decoration: none;
}

.landing-page .l-logo__img {
  display: block;
  height: auto;
  width: auto;
}

/* Tamaños */
.landing-page .l-logo--xs .l-logo__img {
  height: 24px;
}

.landing-page .l-logo--sm .l-logo__img {
  height: 32px;
}

.landing-page .l-logo--md .l-logo__img {
  height: 40px;
}

.landing-page .l-logo--lg .l-logo__img {
  height: 48px;
}

.landing-page .l-logo--xl .l-logo__img {
  height: 56px;
}

/* Variantes */
.landing-page .l-logo--horizontal .l-logo__img {
  max-width: 180px;
}

.landing-page .l-logo--square .l-logo__img {
  aspect-ratio: 1;
}

.landing-page .l-logo--icon .l-logo__img {
  aspect-ratio: 1;
}

/*===========================================
 * PASSWORD REQUIREMENTS VALIDATOR
 *===========================================*/

.landing-page .l-password-requirements {
  margin-bottom: var(--landing-space-4);
  padding: var(--landing-space-3);
  background-color: var(--landing-bg-secondary);
  border-radius: var(--landing-radius-md);
}

.landing-page .l-password-requirements__title {
  font-size: var(--landing-font-size-sm);
  color: var(--landing-text-secondary);
  margin-bottom: var(--landing-space-2);
  font-weight: var(--landing-font-weight-medium);
}

.landing-page .l-password-requirements__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.landing-page .l-password-requirement {
  display: flex;
  align-items: center;
  gap: var(--landing-space-2);
  font-size: var(--landing-font-size-sm);
  color: var(--landing-text-muted);
  padding: var(--landing-space-1) 0;
  transition: color var(--landing-transition-fast);
}

.landing-page .l-password-requirement .req-icon {
  font-size: 14px;
  transition: all var(--landing-transition-fast);
}

.landing-page .l-password-requirement--valid {
  color: var(--landing-success);
}

.landing-page .l-password-requirement--valid .req-icon {
  color: var(--landing-success);
}

.landing-page .l-password-requirement--invalid {
  color: var(--landing-error);
}

.landing-page .l-password-requirement--invalid .req-icon {
  color: var(--landing-error);
}

/*===========================================
 * INPUT ERROR STATE
 *===========================================*/

.landing-page .l-input--error {
  border-color: var(--landing-error) !important;
}

.landing-page .l-input--error:focus {
  border-color: var(--landing-error) !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.landing-page .l-input-error {
  color: var(--landing-error);
  font-size: var(--landing-font-size-xs);
  margin-top: var(--landing-space-1);
  display: block;
}

/*===========================================
 * AUTH FORM UTILITIES
 *===========================================*/

.landing-page .l-auth-divider {
  margin: var(--landing-space-6) 0;
  display: flex;
  align-items: center;
  gap: var(--landing-space-3);
}

.landing-page .l-auth-divider hr {
  flex: 1;
  border: none;
  border-top: 1px solid var(--landing-border-light);
}

.landing-page .l-auth-divider span {
  color: var(--landing-text-muted);
  font-size: var(--landing-font-size-sm);
}

.landing-page .l-auth-footer-text {
  text-align: center;
  font-size: var(--landing-font-size-sm);
  color: var(--landing-text-secondary);
}