/**
 * FULLWIDTH CLIENT THEME - Components
 * Libreria de componentes reutilizables: buttons, cards, badges, forms, tabs, tables, avatars, modals, toasts.
 */

/* ============ BUTTONS ============ */
.fw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fw-space-2);
  font-family: var(--fw-font-family);
  font-size: var(--fw-fs-sm);
  font-weight: var(--fw-fw-semibold);
  line-height: 1;
  padding: 0.75rem 1.25rem;
  border-radius: var(--fw-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--fw-transition);
  white-space: nowrap;
}
.fw-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.fw-btn-primary { background: var(--fw-primary); color: var(--fw-white); box-shadow: var(--fw-shadow-primary); }
.fw-btn-primary:hover { background: var(--fw-primary-hover); color: var(--fw-white); transform: translateY(-1px); }
.fw-btn-primary:active { background: var(--fw-primary-active); transform: translateY(0); }

.fw-btn-dark { background: var(--fw-dark); color: var(--fw-white); }
.fw-btn-dark:hover { background: var(--fw-dark-700); color: var(--fw-white); }

.fw-btn-secondary { background: var(--fw-surface); color: var(--fw-text-primary); border-color: var(--fw-border); }
.fw-btn-secondary:hover { background: var(--fw-surface-sunken); color: var(--fw-text-primary); }

.fw-btn-ghost { background: transparent; color: var(--fw-text-secondary); }
.fw-btn-ghost:hover { background: var(--fw-surface-sunken); color: var(--fw-text-primary); }

.fw-btn-danger { background: var(--fw-danger); color: var(--fw-white); }
.fw-btn-danger:hover { background: #E8352B; color: var(--fw-white); }

.fw-btn-outline-primary { background: transparent; color: var(--fw-primary); border-color: var(--fw-primary); }
.fw-btn-outline-primary:hover { background: var(--fw-primary-50); }

.fw-btn-sm { padding: 0.5rem 0.875rem; font-size: var(--fw-fs-xs); border-radius: var(--fw-radius-sm); }
.fw-btn-lg { padding: 0.9375rem 1.75rem; font-size: var(--fw-fs-md); }
.fw-btn-icon { padding: 0.625rem; width: 40px; height: 40px; border-radius: var(--fw-radius-md); }
.fw-btn-full { width: 100%; }

/* ============ CARDS ============ */
.fw-card {
  background: var(--fw-surface);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-lg);
  box-shadow: var(--fw-shadow-sm);
  transition: box-shadow var(--fw-duration-base) var(--fw-ease), transform var(--fw-duration-base) var(--fw-ease);
}
.fw-card-body { padding: var(--fw-space-6); }
.fw-card-header {
  padding: var(--fw-space-5) var(--fw-space-6);
  border-bottom: 1px solid var(--fw-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fw-card-footer {
  padding: var(--fw-space-4) var(--fw-space-6);
  border-top: 1px solid var(--fw-border);
  background: var(--fw-surface-alt);
  border-radius: 0 0 var(--fw-radius-lg) var(--fw-radius-lg);
}
.fw-card-hover:hover { box-shadow: var(--fw-shadow-md); transform: translateY(-2px); }
.fw-card-interactive { cursor: pointer; }

/* ============ BADGES / STATUS PILLS ============ */
.fw-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--fw-space-1);
  font-size: var(--fw-fs-xs);
  font-weight: var(--fw-fw-semibold);
  padding: 0.25rem 0.625rem;
  border-radius: var(--fw-radius-full);
  border: 1px solid transparent;
  line-height: 1.4;
}
.fw-badge-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.fw-badge-success { background: var(--fw-success-bg); color: #1F8A3B; border-color: var(--fw-success-border); }
.fw-badge-danger  { background: var(--fw-danger-bg); color: #C92A20; border-color: var(--fw-danger-border); }
.fw-badge-warning { background: var(--fw-warning-bg); color: #B36B00; border-color: var(--fw-warning-border); }
.fw-badge-info    { background: var(--fw-info-bg); color: #0A63C2; border-color: var(--fw-info-border); }
.fw-badge-neutral { background: var(--fw-surface-sunken); color: var(--fw-text-secondary); border-color: var(--fw-border); }

/* ============ FORMS ============ */
.fw-field { margin-bottom: var(--fw-space-5); }
.fw-label {
  display: block;
  font-size: var(--fw-fs-sm);
  font-weight: var(--fw-fw-medium);
  color: var(--fw-text-primary);
  margin-bottom: var(--fw-space-2);
}
.fw-input, .fw-select, .fw-textarea {
  width: 100%;
  font-family: var(--fw-font-family);
  font-size: var(--fw-fs-base);
  color: var(--fw-text-primary);
  background: var(--fw-surface);
  border: 1.5px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  padding: 0.75rem 1rem;
  transition: var(--fw-transition);
}
.fw-input::placeholder { color: var(--fw-text-muted); }
.fw-input:hover, .fw-select:hover, .fw-textarea:hover { border-color: var(--fw-border-strong); }
.fw-input:focus, .fw-select:focus, .fw-textarea:focus {
  outline: none;
  border-color: var(--fw-primary);
  box-shadow: var(--fw-shadow-focus);
}
.fw-input-group { position: relative; }
.fw-input-group .fw-input { padding-left: 2.75rem; }
.fw-input-group-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fw-text-muted);
  display: flex;
}

/* Prefijo/sufijo de texto pegado al input (ej. "www.", ".com") - a diferencia de
   .fw-input-group-icon (para iconos), esto es una caja propia que NO se superpone. */
.fw-input-addon-group { display: flex; align-items: stretch; width: 100%; }
.fw-input-addon-group .fw-input-addon {
  display: flex;
  align-items: center;
  padding: 0 0.85rem;
  background: var(--fw-surface-alt);
  border: 1.5px solid var(--fw-border);
  color: var(--fw-text-muted);
  font-size: var(--fw-fs-sm);
  white-space: nowrap;
  flex-shrink: 0;
}
.fw-input-addon-group .fw-input-addon:first-child { border-right: none; border-radius: var(--fw-radius-md) 0 0 var(--fw-radius-md); }
.fw-input-addon-group .fw-input-addon:last-child { border-left: none; border-radius: 0 var(--fw-radius-md) var(--fw-radius-md) 0; }
.fw-input-addon-group .fw-input {
  flex: 1;
  min-width: 0;
  border-radius: 0;
}
.fw-input-addon-group .fw-input-addon:first-child + .fw-input { border-radius: 0 var(--fw-radius-md) var(--fw-radius-md) 0; }
.fw-input-addon-group .fw-input:has(+ .fw-input-addon) { border-radius: var(--fw-radius-md) 0 0 var(--fw-radius-md); }

/* Multiselect (ej. selector de TLDs): desplegable cerrado por defecto con checkboxes adentro,
   en vez del feo <select multiple> nativo que muestra todas las opciones siempre abiertas. */
.fw-multiselect-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fw-space-2);
  cursor: pointer;
  text-align: left;
}
.fw-multiselect-trigger span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fw-text-primary);
}
.fw-multiselect-trigger i { color: var(--fw-text-muted); flex-shrink: 0; }
.fw-multiselect-panel {
  left: 0;
  right: auto;
  min-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fw-multiselect-option {
  display: flex;
  align-items: center;
  gap: var(--fw-space-3);
  padding: var(--fw-space-2) var(--fw-space-3);
  border-radius: var(--fw-radius-sm);
  font-size: var(--fw-fs-sm);
  color: var(--fw-text-primary);
  cursor: pointer;
  transition: var(--fw-transition);
}
.fw-multiselect-option:hover { background: var(--fw-surface-alt); }
.fw-multiselect-option input[type="checkbox"] { accent-color: var(--fw-primary); width: 16px; height: 16px; flex-shrink: 0; }
.fw-input-group-action {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fw-text-muted);
  background: none;
  border: none;
  cursor: pointer;
}
.fw-checkbox { display: inline-flex; align-items: center; gap: var(--fw-space-2); font-size: var(--fw-fs-sm); color: var(--fw-text-secondary); cursor: pointer; }
.fw-checkbox input { width: 18px; height: 18px; accent-color: var(--fw-primary); border-radius: 4px; }
.fw-help-text { font-size: var(--fw-fs-xs); color: var(--fw-text-muted); margin-top: var(--fw-space-1); }
.fw-error-text { font-size: var(--fw-fs-xs); color: var(--fw-danger); margin-top: var(--fw-space-1); }
.fw-input.is-invalid { border-color: var(--fw-danger); }

/* ============ TABS ============ */
.fw-tabs { display: flex; gap: var(--fw-space-2); border-bottom: 1px solid var(--fw-border); }
.fw-tab {
  padding: var(--fw-space-3) var(--fw-space-4);
  font-size: var(--fw-fs-sm);
  font-weight: var(--fw-fw-medium);
  color: var(--fw-text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: var(--fw-transition);
  margin-bottom: -1px;
}
.fw-tab:hover { color: var(--fw-text-primary); }
.fw-tab.active { color: var(--fw-primary); border-color: var(--fw-primary); }

/* ============ TABLE ============ */
.fw-table-wrap { overflow-x: auto; border-radius: var(--fw-radius-lg); border: 1px solid var(--fw-border); background: var(--fw-surface); -webkit-overflow-scrolling: touch; }
.fw-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fw-fs-sm); }
.fw-table thead th {
  text-align: left;
  font-size: var(--fw-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--fw-text-muted);
  font-weight: var(--fw-fw-semibold);
  padding: var(--fw-space-4) var(--fw-space-5);
  background: var(--fw-surface-alt);
  border-bottom: 1px solid var(--fw-border);
}
.fw-table tbody td {
  padding: var(--fw-space-4) var(--fw-space-5);
  border-bottom: 1px solid var(--fw-border);
  color: var(--fw-text-primary);
  vertical-align: middle;
}
.fw-table tbody tr:last-child td { border-bottom: none; }
.fw-table tbody tr:hover { background: var(--fw-surface-alt); }

/* ============ AVATAR ============ */
.fw-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--fw-radius-full);
  background: var(--fw-primary-50);
  color: var(--fw-primary-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-fw-semibold);
  font-size: var(--fw-fs-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.fw-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fw-avatar-sm { width: 32px; height: 32px; font-size: var(--fw-fs-xs); }
.fw-avatar-lg { width: 56px; height: 56px; font-size: var(--fw-fs-lg); }

/* ============ DROPDOWN ============ */
.fw-dropdown { position: relative; }
.fw-dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 240px;
  background: var(--fw-surface);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  box-shadow: var(--fw-shadow-lg);
  padding: var(--fw-space-2);
  z-index: var(--fw-z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: var(--fw-transition);
}
.fw-dropdown-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.fw-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--fw-space-3);
  padding: var(--fw-space-3) var(--fw-space-3);
  border-radius: var(--fw-radius-sm);
  color: var(--fw-text-primary);
  font-size: var(--fw-fs-sm);
  cursor: pointer;
  transition: var(--fw-transition);
}
.fw-dropdown-item:hover { background: var(--fw-surface-alt); color: var(--fw-text-primary); }
.fw-dropdown-divider { height: 1px; background: var(--fw-border); margin: var(--fw-space-2) 0; }

/* ============ MODAL ============ */
.fw-modal-backdrop {
  position: fixed; inset: 0; background: rgba(17,17,31,0.5);
  z-index: var(--fw-z-modal); opacity: 0; visibility: hidden; transition: var(--fw-transition);
}
.fw-modal-backdrop.is-open { opacity: 1; visibility: visible; }
.fw-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -48%);
  width: 100%; max-width: 480px;
  background: var(--fw-surface); border-radius: var(--fw-radius-lg); box-shadow: var(--fw-shadow-xl);
  z-index: calc(var(--fw-z-modal) + 1); opacity: 0; visibility: hidden; transition: var(--fw-transition);
}
.fw-modal.is-open { opacity: 1; visibility: visible; transform: translate(-50%, -50%); }

/* ============ TOAST ============ */
.fw-toast-container { position: fixed; top: var(--fw-space-6); right: var(--fw-space-6); z-index: var(--fw-z-toast); display: flex; flex-direction: column; gap: var(--fw-space-3); }
.fw-toast {
  display: flex; align-items: flex-start; gap: var(--fw-space-3);
  background: var(--fw-surface); border: 1px solid var(--fw-border); border-left: 4px solid var(--fw-info);
  border-radius: var(--fw-radius-md); box-shadow: var(--fw-shadow-lg); padding: var(--fw-space-4); min-width: 320px;
  animation: fw-toast-in var(--fw-duration-slow) var(--fw-ease);
}
.fw-toast-success { border-left-color: var(--fw-success); }
.fw-toast-danger { border-left-color: var(--fw-danger); }
.fw-toast-warning { border-left-color: var(--fw-warning); }
@keyframes fw-toast-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }

/* ============ EMPTY STATE ============ */
.fw-empty { text-align: center; padding: var(--fw-space-12) var(--fw-space-6); color: var(--fw-text-muted); }
.fw-empty-icon { width: 64px; height: 64px; margin: 0 auto var(--fw-space-4); color: var(--fw-border-strong); }

/* ============ SKELETON / LOADING ============ */
.fw-skeleton {
  background: linear-gradient(90deg, var(--fw-surface-sunken) 25%, var(--fw-border) 37%, var(--fw-surface-sunken) 63%);
  background-size: 400% 100%;
  animation: fw-skeleton 1.4s ease infinite;
  border-radius: var(--fw-radius-sm);
}
@keyframes fw-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============ SPINNER ============ */
.fw-spinner {
  width: 20px; height: 20px; border: 2.5px solid rgba(var(--fw-primary-rgb), 0.2);
  border-top-color: var(--fw-primary); border-radius: 50%; animation: fw-spin 0.7s linear infinite;
}
@keyframes fw-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .fw-toast-container { left: var(--fw-space-3); right: var(--fw-space-3); top: var(--fw-space-3); }
  .fw-toast { min-width: 0; width: 100%; }
}