/* components.css — Componentes reutilizables de Fulbito */

/* ============================================
   CARD DE JUGADOR — Glass card estilo figurita
   ============================================ */
.card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-md) 20px;
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

/* Hover / tap: borde dorado se intensifica, leve escala */
.card:hover,
.card:active {
  border-color: var(--color-oro);
  transform: scale(1.02);
  box-shadow: var(--shadow-elevated);
}

/* Silueta / ícono del jugador */
.card__avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: var(--color-noche);
  margin: 0 auto var(--space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Apodo del jugador */
.card__apodo {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-cal);
  text-align: center;
}

/* Crack elegido */
.card__crack {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-oro);
  text-align: center;
  margin-top: var(--space-xs);
}

/* Posición en la card */
.card__posicion {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-cesped-light);
  text-align: center;
  margin-top: var(--space-xs);
}


/* ============================================
   CARD DE EQUIPO — Wrapper para pantalla de resultado
   ============================================ */
.card-team {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
}

/* Título del equipo (ej: ★ EQUIPO A ★) */
.card-team__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-oro);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
  margin-bottom: var(--space-md);
}

/* Lista de jugadores dentro de la card de equipo */
.card-team__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Rating total del equipo */
.card-team__rating {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-tierra);
  text-align: center;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--glass-border);
}


/* ============================================
   BOTÓN PRIMARIO — CTA dorado
   ============================================ */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-oro);
  color: var(--color-noche);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: none;
  border-radius: var(--radius-md);
  padding: 14px 28px;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  min-height: 44px;
}

.btn-primary:hover {
  background: var(--color-oro-light);
  box-shadow: 0 0 24px rgba(201, 169, 78, 0.3);
}

.btn-primary:active {
  transform: scale(0.97);
}

/* Estado deshabilitado */
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ============================================
   BOTÓN SECUNDARIO — Outline dorado
   ============================================ */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--color-oro);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px solid var(--color-oro);
  border-radius: var(--radius-md);
  padding: 14px 28px;
  cursor: pointer;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
  min-height: 44px;
}

.btn-secondary:hover {
  background: rgba(201, 169, 78, 0.1);
  color: var(--color-oro-light);
}

.btn-secondary:active {
  transform: scale(0.97);
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/* ============================================
   INPUT Y TEXTAREA — Elementos de formulario
   ============================================ */
.input,
.textarea {
  width: 100%;
  background: rgba(13, 27, 15, 0.4);
  border: 1px solid var(--color-tierra);
  border-radius: var(--radius-md);
  color: var(--color-cal);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-sm) var(--space-md);
  min-height: 44px;
  transition: border-color var(--transition-fast);
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-tierra);
  opacity: 0.6;
}

.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--color-oro);
}

/* Inputs de fecha y hora: forzar color-scheme dark para que los íconos nativos sean claros */
.input[type="date"],
.input[type="time"] {
  color-scheme: dark;
}

/* Ícono nativo del calendario / reloj — dorado en navegadores compatibles */
.input[type="date"]::-webkit-calendar-picker-indicator,
.input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(75%) sepia(60%) saturate(400%) hue-rotate(5deg) brightness(1.1);
  cursor: pointer;
  opacity: 0.85;
}

/* Textarea específico: más altura */
.textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}


/* ============================================
   SLIDER — Range para autoevaluación (1-5)
   ============================================ */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--color-tierra);
  border-radius: var(--radius-sm);
  outline: none;
  min-height: auto; /* Anula el min-height global de inputs */
  cursor: pointer;
}

/* Track lleno (Chrome/Edge/Safari) */
.slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-sm);
}

/* Thumb (Chrome/Edge/Safari) */
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-oro);
  border: 2px solid var(--color-noche);
  cursor: pointer;
  margin-top: -9px; /* Centrar sobre el track */
  transition: box-shadow var(--transition-fast);
}

.slider:active::-webkit-slider-thumb {
  box-shadow: 0 0 12px rgba(201, 169, 78, 0.6);
}

/* Thumb (Firefox) */
.slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-oro);
  border: 2px solid var(--color-noche);
  cursor: pointer;
  transition: box-shadow var(--transition-fast);
}

.slider:active::-moz-range-thumb {
  box-shadow: 0 0 12px rgba(201, 169, 78, 0.6);
}

/* Track (Firefox) */
.slider::-moz-range-track {
  height: 6px;
  background: var(--color-tierra);
  border-radius: var(--radius-sm);
}

/* Porción llena del track (Firefox) */
.slider::-moz-range-progress {
  background: var(--color-oro);
  height: 6px;
  border-radius: var(--radius-sm);
}

/* Marcas numéricas debajo del slider */
.slider-marks {
  display: flex;
  justify-content: space-between;
  padding: var(--space-xs) 0;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-tierra);
}

/* ============================================
   SLIDER LEVEL — Título y descripción dinámica
   ============================================ */
.slider-level {
  margin-top: var(--space-md);
  transition: opacity var(--transition-normal);
}

/* Título del nivel (ej: "★ Modo Ahorro de Energía") */
.slider-level__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-cal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Descripción del nivel */
.slider-level__desc {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-tierra);
  margin-top: var(--space-xs);
  line-height: 1.5;
}

/* Animación de fade al cambiar valor */
.slider-level--changing {
  opacity: 0;
}


/* ============================================
   BADGE DE POSICIÓN — Con colores por rol
   ============================================ */
.badge-pos {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px var(--space-sm);
  border-radius: var(--radius-sm);
  line-height: 1.4;
  min-height: auto;
}

/* Punto indicador de color */
.badge-pos::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
}

/* Modificadores por posición */
.badge-pos--arc {
  color: var(--color-pos-arc);
  background: rgba(255, 215, 0, 0.12);
}
.badge-pos--arc::before {
  background: var(--color-pos-arc);
}

.badge-pos--def {
  color: var(--color-pos-def);
  background: rgba(74, 144, 217, 0.12);
}
.badge-pos--def::before {
  background: var(--color-pos-def);
}

.badge-pos--med {
  color: var(--color-pos-med);
  background: rgba(76, 175, 80, 0.12);
}
.badge-pos--med::before {
  background: var(--color-pos-med);
}

.badge-pos--del {
  color: var(--color-pos-del);
  background: rgba(255, 82, 82, 0.12);
}
.badge-pos--del::before {
  background: var(--color-pos-del);
}


/* ============================================
   PRIVACY DISCLAIMER — Bloque 🔒 de privacidad
   ============================================ */
.privacy-disclaimer {
  background: rgba(201, 169, 78, 0.08);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-oro);
  line-height: 1.5;
}

/* Ícono de candado */
.privacy-disclaimer::before {
  content: '🔒 ';
}


/* ============================================
   MINI CARD — Card compacta para draft
   ============================================ */
.mini-card {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  height: 4.8em;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
  user-select: none;
}

.mini-card:hover {
  border-color: var(--color-oro);
}

/* Al arrastrar: elevación y sombra */
.mini-card--dragging {
  transform: scale(1.05);
  box-shadow: var(--shadow-elevated);
  opacity: 0.9;
  cursor: grabbing;
  z-index: var(--z-dropdown);
}

/* Ghost en posición original mientras se arrastra */
.mini-card--ghost {
  opacity: 0.3;
  border-style: dashed;
}

/* Apodo dentro de la mini card */
.mini-card__apodo {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-cal);
}

/* Crack dentro de la mini card */
.mini-card__crack {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-oro);
}

/* Info wrapper (apodo + tags apilados) */
.mini-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* Crack style tags row */
.mini-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mini-card__tag {
  font-family: var(--font-body);
  font-size: 10px;
  color: var(--color-oro);
  background: rgba(201, 169, 78, 0.12);
  border: 1px solid rgba(201, 169, 78, 0.25);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  line-height: 1.4;
  text-transform: capitalize;
}

/* Crack thumbnail in mini-card — rectángulo 3:4 tipo figurita */
.mini-card__img {
  width: 38px;
  height: 50px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  object-position: top center;
  border: 1px solid rgba(201, 169, 78, 0.35);
  flex-shrink: 0;
  align-self: center;
}

/* Container for the crack image at the top of the card */
/* Usamos height fija con vw para evitar bugs de aspect-ratio y padding-bottom
   en flex items dentro de Firefox/Safari. */
.crack-card__img-container {
  width: 100%;
  height: clamp(80px, 30vw, 160px);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  background: var(--color-noche);
  border-bottom: 1px solid var(--glass-border);
}

.crack-card__img-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to top, rgba(13, 27, 15, 0.9), transparent);
  pointer-events: none;
}

/* Crack image in crack selection card */
.crack-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform var(--transition-normal);
}

.screen-onboarding__crack-item:hover .crack-card__img {
  transform: scale(1.05);
}

.screen-onboarding__crack-item--selected .crack-card__img-container {
  border-bottom-color: var(--color-oro);
}

/* Container for text info below the image */
.crack-card__info {
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
}

/* Crack image on pitch node */
.player-node__img {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  object-fit: cover;
}

/* Fix: nested mini-cards inside team cards lose opacity from double glass */
.card-team .mini-card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(13, 27, 15, 0.4);
}

.card-team .reveal-card {
  opacity: 0;
  animation: fadeSlideUp 400ms ease-out forwards;
  animation-delay: calc(var(--reveal-i, 0) * 150ms);
}


/* ============================================
   DROP ZONE — Área de destino para drag & drop
   ============================================ */
.drop-zone {
  border: 2px dashed var(--color-oro);
  border-radius: var(--radius-lg);
  opacity: 0.3;
  padding: var(--space-lg);
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  transition:
    opacity var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
}

/* Texto placeholder de la drop zone */
.drop-zone__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-tierra);
  text-align: center;
}

/* Al arrastrar encima: se activa */
.drop-zone--active {
  opacity: 1;
  background: rgba(201, 169, 78, 0.06);
  border-style: solid;
  border-color: var(--color-oro);
}

/* Drop zone con contenido (ya tiene cards) */
.drop-zone--has-items {
  opacity: 1;
  border-style: solid;
  padding: var(--space-sm);
  gap: var(--space-sm);
  align-items: stretch;
}


/* ============================================
   SEARCH BAR — Input de búsqueda con ícono
   ============================================ */
.search-bar {
  position: relative;
  width: 100%;
}

.search-bar__icon {
  position: absolute;
  left: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-tierra);
  pointer-events: none;
}

.search-bar__input {
  width: 100%;
  background: rgba(13, 27, 15, 0.4);
  border: 1px solid var(--color-tierra);
  border-radius: var(--radius-md);
  color: var(--color-cal);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: var(--space-sm) var(--space-md) var(--space-sm) 44px;
  min-height: 44px;
  transition: border-color var(--transition-fast);
}

.search-bar__input::placeholder {
  color: var(--color-tierra);
  opacity: 0.6;
}

.search-bar__input:focus {
  outline: none;
  border-color: var(--color-oro);
}


/* ============================================
   MODAL — Contenedor modal / overlay
   ============================================ */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-normal),
    visibility var(--transition-normal);
}

/* Modal visible */
.modal.active {
  opacity: 1;
  visibility: visible;
}

/* Fondo oscuro del modal */
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-sombra);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Contenido del modal */
.modal__content {
  position: relative;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
  padding: var(--space-lg);
  width: 100%;
  max-width: 420px;
  max-height: 90dvh;
  overflow-y: auto;
  transform: translateY(16px);
  transition: transform var(--transition-normal);
}

.modal.active .modal__content {
  transform: translateY(0);
}

/* Header del modal */
.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.modal__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--color-cal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Botón de cierre */
.modal__close {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  color: var(--color-cal);
  font-size: var(--text-lg);
  cursor: pointer;
  transition: border-color var(--transition-fast);
  min-height: auto;
}

.modal__close:hover {
  border-color: var(--color-oro);
}

@media (min-width: 768px) {
  .modal__content--wide {
    max-width: 860px;
  }
}

/* ============================================
   TEAM BALANCE WARNING — Advertencia de equipos disparejos
   ============================================ */
.team-balance-warning,
.draft-balance-warning {
  background: rgba(230,126,34,0.12);
  border: 1px solid rgba(230,126,34,0.4);
  border-radius: 6px;
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: #e67e22;
  line-height: 1.4;
  margin-top: var(--space-sm);
}

.draft-balance-warning {
  grid-column: 1 / -1; /* Span full width in draft layout */
  margin: var(--space-sm);
}


/* ============================================
   PROFILE EDIT SECTION — Sección resaltada en modal de edición
   ============================================ */
.profile-edit-section {
  background: rgba(212,175,55,0.07);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.profile-edit-section__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-oro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}


/* ============================================
   TOAST — Notificación emergente
   ============================================ */
.toast {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  z-index: var(--z-toast);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-elevated);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-cal);
  text-align: center;
  max-width: calc(100% - var(--space-xl) * 2);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--transition-normal),
    opacity var(--transition-normal),
    visibility var(--transition-normal);
}

/* Toast visible */
.toast.active {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  visibility: visible;
}

/* Variantes de toast */
.toast--success {
  border-color: var(--color-cesped-light);
}

.toast--error {
  border-color: var(--color-pos-del);
}

.toast--info {
  border-color: var(--color-oro);
}


/* ============================================
   ANIMACIONES REUTILIZABLES
   ============================================ */

/* Fade-in con slide-up (revelación de cards) */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Flash dorado (post-revelación) */
@keyframes goldenFlash {
  0%   { box-shadow: 0 0 0 rgba(201, 169, 78, 0); }
  50%  { box-shadow: 0 0 32px rgba(201, 169, 78, 0.4); }
  100% { box-shadow: 0 0 0 rgba(201, 169, 78, 0); }
}

/* Clase para aplicar revelación staggered vía JS (delay por --reveal-i) */
.reveal-card {
  opacity: 0;
  animation: fadeSlideUp var(--transition-slow) forwards;
  animation-delay: calc(var(--reveal-i, 0) * 150ms);
}

/* Flash dorado al completar ambos equipos */
.golden-flash {
  animation: goldenFlash 600ms ease-out;
}