/* ==========================================================================
   Sponbar Dashboard
   Medidas tomadas de Figma (archivo "Sponbar dashboard").
   Usa las variables de color y las fuentes de variables.css.
   ========================================================================== */

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

[hidden] {
  display: none !important;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-text);
  background-color: var(--color-white);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

/* ==========================================================================
   Tipografias (medidas de Figma)
   ========================================================================== */

.title-4 {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 24px;
  line-height: 1.5;
}

.title-5 {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
}

.body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 18px;
  line-height: 1.5;
}

.body-2 {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
}

.body-3 {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 14px;
  line-height: 1.5;
}

.body-4 {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 12.5px;
  line-height: 1.5;
}

.body-5 {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 11.5px;
  line-height: 1.5;
}

.text-upper {
  text-transform: uppercase;
}

.button-1 {
  font-family: var(--font-body);
  font-weight: 350;
  font-size: 14px;
  line-height: 1.5;
}

.button-2 {
  font-family: var(--font-body);
  font-weight: 350;
  font-size: 16px;
  line-height: 1.5;
}

.strong {
  color: var(--color-text);
}

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

/* ==========================================================================
   Estructura
   ========================================================================== */

.app {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  width: 260px;
  height: 100vh;
  flex-shrink: 0;
  padding: 24px 20px;
  background-color: var(--color-white);
  border-right: 1.5px solid var(--color-text-7);
}

.sidebar-ready .sidebar {
  transition: width 0.2s ease, padding 0.2s ease;
}

.sidebar__top {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.sidebar__brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
}

.sidebar__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-text-2);
}

.sidebar__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: var(--color-blue-dark);
}

.sidebar__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar__group-title {
  color: var(--color-text-4);
  text-transform: uppercase;
}

.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px 0 10px;
  border-radius: 8px;
  color: var(--color-text-3);
}

.sidebar__link:hover {
  background-color: var(--color-text-8);
}

.sidebar__link.is-active {
  background-color: var(--color-text-2);
  color: var(--color-white);
}

.sidebar__link-dot {
  width: 8px;
  height: 8px;
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-purple-medium);
}

.icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Selector de rol */

.role-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--color-text-6);
  border-radius: 100px;
  background-color: var(--color-white);
}

.role-switch__option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  border-radius: 100px;
  color: var(--color-text-3);
}

.role-switch__option.is-active {
  background-color: var(--color-text-2);
  color: var(--color-white);
}

/* Selector de canal (creator) */

.channel-select {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 36px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  background-color: var(--color-white);
  color: var(--color-text-2);
}

.channel-select__avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.channel-select__text {
  flex: 1;
  min-width: 0;
  text-align: left;
  color: var(--color-text-2);
}

.channel-select__chevron {
  width: 10px;
  height: 6px;
  flex-shrink: 0;
}

/* Dropdown de canales */

.channel-select-wrap {
  position: relative;
}

.channel-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 218px;
  padding: 12px 8px 8px 8px;
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  background-color: var(--color-white);
}

.channel-menu[hidden] {
  display: none;
}

.channel-menu__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.channel-menu__item {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 4px 8px;
  border-radius: 8px;
  color: var(--color-text-2);
  text-align: left;
}

.channel-menu__item:hover {
  background-color: var(--color-text-8);
}

.channel-menu__item.is-selected {
  background-color: var(--color-blue-light);
}

.channel-menu__avatar {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.channel-menu__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.channel-menu__connect {
  width: 100%;
  height: 36px;
}

/* Pie de la sidebar */

.sidebar__foot {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.balance-card {
  position: relative;
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  border-radius: 8px;
  background-color: var(--color-blue-dark);
  background-image: url('../assets/dashboard/sidebar-shape.svg');
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: auto 104px;
}

.balance-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--color-white);
}

.balance-card__amount {
  color: var(--color-text-7);
}

.balance-card__center {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
}

.balance-card__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.balance-card__note {
  color: var(--color-text-7);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 19px;
  padding: 0 8px;
  border-radius: 8px;
  background-color: var(--color-green-light);
  color: var(--color-green-dark);
}

.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-row__person {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  color: var(--color-text-2);
}

.user-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-row__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-blue-dark);
  color: var(--color-white);
}

.user-row__settings {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-text-2);
}

/* ==========================================================================
   Area principal
   ========================================================================== */

.main {
  flex: 1;
  min-width: 0;
  padding: 44px 52px;
  background-color: var(--color-text-8);
}

.page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1362px;
  margin: 0 auto;
}

.page--center {
  justify-content: center;
  min-height: calc(100vh - 88px);
  align-items: center;
}

.page__title {
  color: var(--color-text);
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.page--upload {
  max-width: 1067px;
  margin: 0 auto;
}

.page--support {
  max-width: 482px;
  margin: 0 auto;
}

/* ==========================================================================
   Botones
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 100px;
  white-space: nowrap;
}

.btn--primary {
  background-color: var(--color-blue-dark);
  color: var(--color-white);
}

.btn--accent {
  background-color: var(--color-purple-medium);
  color: var(--color-purple-dark);
}

.btn--light {
  background-color: var(--color-text-7);
  color: var(--color-text-2);
}

.btn--block {
  width: 100%;
}

.btn__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 100px;
  background-color: var(--color-text-7);
}

.icon-button--light {
  background-color: var(--color-text-6);
}

.icon-button svg,
.icon-button .icon {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Tarjetas y metricas
   ========================================================================== */

.card {
  background-color: var(--color-white);
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
}

.metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 216px;
  padding: 16px;
  background-color: var(--color-white);
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
}

.metric__label {
  color: var(--color-text-4);
  text-transform: uppercase;
}

.metric__value {
  color: var(--color-text);
}

/* ==========================================================================
   Tablas (filas como tarjetas)
   ========================================================================== */

.table {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.table__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  color: var(--color-text-3);
}

.table__head-cell {
  text-transform: uppercase;
}

.table__head-cell.is-sortable {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

.table__head-cell.is-sortable:hover {
  color: var(--color-text-2);
}

.table__sort {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--color-text-5);
}

.table__head-cell.is-asc .table__sort,
.table__head-cell.is-desc .table__sort {
  color: var(--color-text);
}

.table__head-cell.is-asc .table__sort-down,
.table__head-cell.is-desc .table__sort-up {
  display: none;
}

.table__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background-color: var(--color-white);
  border-radius: 8px;
}

.table__row[hidden] {
  display: none;
}

.table__row[data-href] {
  cursor: pointer;
}

.table__row[data-href]:hover {
  box-shadow: 0 0 0 1.5px var(--color-text-6);
}

.table__cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.table__cell--right {
  justify-content: flex-end;
  text-align: right;
}

.table__label {
  color: var(--color-text-3);
}

.table__value {
  color: var(--color-text);
}

.row-title {
  display: flex;
  flex-direction: column;
}

.row-title__sub {
  color: var(--color-text-3);
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* Anchos de columna por pagina (segun Figma) */

.col-campaign {
  width: 172px;
  flex-shrink: 0;
}

.col-ad {
  width: 694px;
  flex-shrink: 1;
  min-width: 168px;
}

.col-ad-wide {
  width: 738px;
  flex-shrink: 1;
  min-width: 168px;
}

.col-video {
  width: 208px;
  flex-shrink: 0;
}

.col-visibility {
  width: 92px;
  flex-shrink: 0;
}

.col-date {
  width: 100px;
  flex-shrink: 0;
}

.col-date-sm {
  width: 96px;
  flex-shrink: 0;
}

.col-views {
  width: 64px;
  flex-shrink: 0;
}

.col-views-sm {
  width: 68px;
  flex-shrink: 0;
}

.col-price,
.col-cpm {
  width: 64px;
  flex-shrink: 0;
}

.col-price-sm,
.col-cpm-sm {
  width: 68px;
  flex-shrink: 0;
}

.col-grow {
  flex: 1;
  min-width: 0;
}

.table__row--wide-gap {
  gap: 20px;
}

.row-creator {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 0 0;
}

/* Notificaciones */

.notice {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  background-color: var(--color-white);
  cursor: pointer;
}

.notice__dot {
  width: 8px;
  height: 8px;
  margin-top: 7px;
  flex-shrink: 0;
  border-radius: 50%;
  background-color: var(--color-purple-medium);
}

.notice__dot--muted {
  background-color: var(--color-text-5);
}

.notice__text {
  flex: 1;
  min-width: 0;
}

.notice__date {
  color: var(--color-text-3);
  white-space: nowrap;
}

/* Thumbnails de video */

.thumb {
  width: 43px;
  height: 77px;
  flex-shrink: 0;
  border-radius: 8px;
  background-color: var(--color-text-6);
}

.thumb--wide {
  width: 50px;
  height: 88px;
}

/* ==========================================================================
   Chips y logo del negocio
   ========================================================================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 25px;
  padding: 2px 8px;
  background-color: var(--color-text-8);
  border: 1px solid var(--color-text-6);
  border-radius: 4px;
  color: var(--color-text-3);
}

.chip--selected {
  background-color: var(--color-green-light);
  border-color: var(--color-green-light);
  color: var(--color-green-dark);
}

.chip--muted {
  background-color: var(--color-text-6);
  border-color: var(--color-text-6);
  color: var(--color-text-2);
}

.chip--pending {
  background-color: var(--color-yellow-light);
  border-color: var(--color-yellow-light);
  color: var(--color-yellow-dark);
}

.chip--selectable {
  cursor: pointer;
}

.chip--removable {
  height: 28px;
  border-width: 1.5px;
}

.chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  color: var(--color-text-5);
}

.chip__remove .icon {
  width: 10px;
  height: 10px;
}

.divider {
  width: 100%;
  height: 1px;
  border: 0;
  background-color: var(--color-text-6);
}

.avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
}

.avatar--xs {
  width: 20px;
  height: 20px;
}

/* Sponsorship chip (el anuncio) */

.ad-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 168px;
  height: 48px;
  padding: 6px 8px 6px 6px;
  border-radius: 8px;
  background-color: var(--color-purple-light);
  box-shadow: 0 0 0 2px var(--color-purple-medium);
  color: var(--color-purple-dark);
}

.ad-chip__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  background-color: var(--color-purple-dark);
}

.ad-chip__mark img {
  width: 26px;
  height: 22px;
}

.ad-chip__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ad-chip__title {
  font-size: 12px;
  line-height: 18px;
}

.ad-chip__url {
  margin-top: -2px;
  font-size: 10px;
  line-height: 15px;
  opacity: 0.8;
}

/* ==========================================================================
   Tarjeta de creador
   ========================================================================== */

.creators-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.creator-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px 8px 8px 8px;
  background-color: var(--color-white);
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
}

.creator-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 8px;
}

.creator-card__identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.creator-card__name {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text);
}

.creator-card__link {
  width: 12px;
  height: 12px;
  color: var(--color-text-4);
}

.creator-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
  color: var(--color-text-2);
}

.creator-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 8px;
}

.audience {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audience__row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.audience__country {
  width: 152px;
  flex-shrink: 0;
  color: var(--color-text-3);
}

.audience__bar {
  flex: 1;
  height: 16px;
  border-radius: 4px;
  background-color: var(--color-text-6);
  overflow: hidden;
}

.audience__fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background-color: var(--color-purple-medium);
}

.audience__value {
  width: 52px;
  flex-shrink: 0;
  text-align: right;
  color: var(--color-text-3);
}

.creator-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding: 8px 0 0 0;
}

.creator-stats__item {
  display: flex;
  flex-direction: column;
}

.creator-stats__label {
  color: var(--color-text-3);
  text-transform: uppercase;
}

.creator-stats__value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--color-text);
}

.creator-stats__unit {
  color: var(--color-text-3);
}

.creator-stats__price {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding: 8px;
  border-radius: 8px;
  background-color: var(--color-text-7);
}

.creator-card__body > .creator-stats__price {
  margin: 0 -8px;
}

/* Estado "advertise" de la tarjeta de creador */

.advertise {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 8px 8px 8px;
}

.advertise__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 8px;
}

.advertise__label {
  color: var(--color-text-3);
  text-transform: uppercase;
}

.advertise__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
}

.ad-editor-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.date-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  background-color: var(--color-white);
  text-align: left;
}

.date-option__title {
  color: var(--color-text);
}

.date-option__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.date-option.is-disabled {
  background-color: var(--color-text-7);
}

.date-option.is-disabled .date-option__title {
  color: var(--color-text-2);
}

.date-option.is-selected {
  border-color: var(--color-blue-medium);
  box-shadow: 0 0 0 2px var(--color-blue-light);
}

.date-option--split {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.date-option--split .counter {
  display: none;
}

.date-option--split.is-selected .counter {
  display: flex;
}

.date-option__main {
  display: flex;
  flex: 1 1 140px;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.counter {
  display: flex;
  align-items: stretch;
  height: 36px;
}

.counter__field {
  width: 43px;
  border: 1px solid var(--color-text-6);
  border-right: 0;
  border-radius: 8px 0 0 8px;
  background-color: var(--color-white);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  text-align: center;
  outline: none;
}

.counter__suffix {
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--color-text-6);
  border-radius: 0 8px 8px 0;
  background-color: var(--color-text-8);
  color: var(--color-text-3);
}

.ad-editor {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  padding: 8px 12px 8px 8px;
  border-radius: 8px;
  background-color: var(--color-text-8);
  box-shadow: 0 0 0 2px var(--color-text-5);
  color: var(--color-text);
  text-align: left;
}

.ad-editor[data-color='dark'] {
  background-color: var(--color-text);
  box-shadow: 0 0 0 2px var(--color-text-3);
  color: var(--color-white);
}

.ad-editor[data-color='pink'] {
  background-color: var(--color-purple-light);
  box-shadow: 0 0 0 2px var(--color-purple-medium);
  color: var(--color-purple-dark);
}

.ad-editor[data-color='green'] {
  background-color: var(--color-green-light);
  box-shadow: 0 0 0 2px var(--color-green-medium);
  color: var(--color-green-dark);
}

.ad-editor[data-color='yellow'] {
  background-color: var(--color-yellow-light);
  box-shadow: 0 0 0 2px var(--color-yellow-medium);
  color: var(--color-yellow-dark);
}

.ad-editor[data-color='blue'] {
  background-color: var(--color-blue-light);
  box-shadow: 0 0 0 2px var(--color-text-5);
  color: var(--color-blue-dark);
}

.ad-editor[data-color='dark'] .ad-editor__mark {
  background-color: var(--color-white);
  color: var(--color-text);
}

.ad-editor[data-color='pink'] .ad-editor__mark {
  background-color: var(--color-purple-dark);
  color: var(--color-white);
}

.ad-editor[data-color='green'] .ad-editor__mark {
  background-color: var(--color-green-dark);
  color: var(--color-white);
}

.ad-editor[data-color='yellow'] .ad-editor__mark {
  background-color: var(--color-yellow-dark);
  color: var(--color-yellow-light);
}

.ad-editor[data-color='blue'] .ad-editor__mark {
  background-color: var(--color-blue-dark);
  color: var(--color-blue-light);
}

.ad-editor__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 8px;
  background-color: var(--color-text);
  color: var(--color-white);
}

.ad-editor__mark .icon {
  width: 20px;
  height: 20px;
}

.ad-editor__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ad-editor__url {
  opacity: 0.8;
  font-size: 12.5px;
}

.ad-editor__input {
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background-color: transparent;
  color: inherit;
  font-family: var(--font-body);
  font-weight: 300;
  outline: none;
}

.ad-editor__input--title {
  font-size: 14px;
  line-height: 21px;
}

.ad-editor__input--url {
  font-size: 12.5px;
  line-height: 18.8px;
  opacity: 0.8;
  color: var(--color-text-2);
}

.ad-editor:not([data-color='white']) .ad-editor__input--url {
  color: inherit;
}

.ad-editor__input:focus {
  border: 1.5px solid #cadbed;
  box-shadow: 0 0 0 2px var(--color-blue-light);
}

.color-dots {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
}

.color-dot--white {
  background-color: #f9f9f9;
  border-color: #ebebeb;
}

.color-dot--dark {
  background-color: var(--color-text);
  border-color: var(--color-text-3);
}

.color-dot--pink {
  background-color: var(--color-purple-light);
  border-color: #f1d0ed;
}

.color-dot--green {
  background-color: var(--color-green-light);
  border-color: #c8ebb3;
}

.color-dot--yellow {
  background-color: var(--color-yellow-light);
  border-color: #f8ecaa;
}

.color-dot--blue {
  background-color: var(--color-blue-light);
  border-color: #d6e4f0;
}

.color-dot--white.is-selected {
  box-shadow: 0 0 0 2px var(--color-text-2);
}

.color-dot--dark.is-selected {
  box-shadow: 0 0 0 2px var(--color-text-5);
}

.color-dot--pink.is-selected {
  box-shadow: 0 0 0 2px var(--color-purple-medium);
}

.color-dot--green.is-selected {
  box-shadow: 0 0 0 2px var(--color-green-medium);
}

.color-dot--yellow.is-selected {
  box-shadow: 0 0 0 2px var(--color-yellow-medium);
}

.color-dot--blue.is-selected {
  box-shadow: 0 0 0 2px var(--color-blue-medium);
}

.placement {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  background-color: var(--color-white);
  text-align: left;
  cursor: pointer;
}

.placement.is-selected {
  border-color: var(--color-blue-medium);
  box-shadow: 0 0 0 2px var(--color-blue-light);
}

.placement__title {
  color: var(--color-text);
}

.placement__value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--color-text);
}

.placement__unit {
  color: var(--color-text-3);
}

.advertise__actions {
  display: flex;
  gap: 8px;
  padding: 0 8px;
}

.advertise__actions .btn {
  flex: 1;
}

/* Estado del chip del anuncio segun color elegido */

.ad-chip--white {
  background-color: #f9f9f9;
  box-shadow: 0 0 0 2px #ebebeb;
  color: var(--color-text);
}

.ad-chip--white .ad-chip__mark {
  background-color: #1e262a;
}

.ad-chip--green {
  background-color: var(--color-green-light);
  box-shadow: 0 0 0 2px #c8ebb3;
  color: var(--color-green-dark);
}

.ad-chip--green .ad-chip__mark {
  background-color: var(--color-green-dark);
}

.ad-chip--yellow {
  background-color: var(--color-yellow-light);
  box-shadow: 0 0 0 2px #f8ecaa;
  color: var(--color-yellow-dark);
}

.ad-chip--yellow .ad-chip__mark {
  background-color: var(--color-yellow-dark);
}

.ad-chip--blue {
  background-color: var(--color-blue-light);
  box-shadow: 0 0 0 2px #d6e4f0;
  color: var(--color-blue-dark);
}

.ad-chip--blue .ad-chip__mark {
  background-color: var(--color-blue-dark);
}

/* ==========================================================================
   Formularios
   ========================================================================== */

.field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.field__label {
  color: var(--color-text-2);
}

.input,
.select,
.textarea {
  width: 100%;
  height: 40px;
  padding: 0 13px;
  background-color: var(--color-white);
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  outline: none;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-4);
}

.input:focus,
.select:focus,
.textarea:focus {
  border: 1.5px solid #cadbed;
  box-shadow: 0 0 0 2px var(--color-blue-light);
}

.textarea {
  height: auto;
  min-height: 108px;
  padding: 6px 13px;
  resize: vertical;
}

.select {
  appearance: none;
  padding-right: 36px;
  cursor: pointer;
}

.select-wrap {
  position: relative;
}

.select-wrap::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 14px;
  width: 8px;
  height: 8px;
  margin-top: -5px;
  border-right: 1.5px solid var(--color-text-3);
  border-bottom: 1.5px solid var(--color-text-3);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Toggle ON / OFF */

.toggle {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  background-color: var(--color-white);
  overflow: hidden;
}

.toggle__option {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 32px;
  color: var(--color-text-4);
}

.toggle__option.is-on {
  background-color: var(--color-green-light);
  color: var(--color-green-dark);
}

.toggle__option.is-off {
  background-color: var(--color-text-6);
  color: var(--color-text-2);
}

.toggle--dark {
  border-color: var(--color-text-2);
  background-color: var(--color-blue-dark);
}

.toggle--dark .toggle__option {
  color: var(--color-text-5);
}

.toggle--dark .toggle__option.is-off {
  color: var(--color-text-4);
}

.toggle--dark .toggle__option.is-on {
  background-color: var(--color-green-light);
  color: var(--color-green-dark);
}

.toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  background-color: var(--color-white);
}

.toggle-card__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 404px;
}

.toggle-card__label {
  color: var(--color-text-2);
}

.toggle-card__desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-3);
}

.toggle-card--dark {
  background-color: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
}

.toggle-card--dark .toggle-card__label {
  color: var(--color-white);
}

.toggle-card--dark .toggle-card__desc {
  color: var(--color-text-6);
}

.input--sm {
  height: 36px;
}

.counter--sm .counter__field,
.counter--sm .counter__suffix {
  height: 36px;
}

/* Precio con sufijo */

.price-input {
  display: flex;
  align-items: stretch;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
}

.price-input__prefix,
.price-input__suffix {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  background-color: var(--color-text-8);
  border: 1px solid var(--color-text-6);
  color: var(--color-text-3);
}

.price-input__prefix {
  border-radius: 8px 0 0 8px;
  border-right: 0;
}

.price-input__suffix {
  border-radius: 0 8px 8px 0;
  border-left: 0;
}

.price-input__field {
  width: 55px;
  padding: 0 12px;
  border: 1px solid var(--color-text-6);
  border-left: 0;
  border-right: 0;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}

/* ==========================================================================
   Modal
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(30, 38, 42, 0.45);
}

.modal[hidden] {
  display: none;
}

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 479px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 16px 20px;
  background-color: var(--color-white);
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
}

.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--color-text-2);
}

.modal__title {
  text-align: left;
  color: var(--color-text);
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px;
  align-items: flex-start;
}

.modal__label {
  color: var(--color-text-4);
  text-transform: uppercase;
}

.topup {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.topup__option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 39px;
  padding: 0 8px;
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  background-color: var(--color-white);
  color: var(--color-text);
}

.topup__option.is-selected {
  background-color: var(--color-blue-dark);
  border-color: var(--color-blue-dark);
  color: var(--color-white);
}

.topup__bonus {
  padding: 2px 8px;
  border-radius: 4px;
  background-color: var(--color-green-light);
  color: var(--color-green-dark);
}

/* ==========================================================================
   Upload
   ========================================================================== */

.upload-layout {
  display: flex;
  gap: 36px;
  align-items: flex-start;
}

.upload-card {
  display: flex;
  gap: 36px;
  padding: 24px;
  background-color: var(--color-white);
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
}

.upload-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 643px;
  flex-shrink: 0;
}

.upload-form__row {
  display: flex;
  gap: 12px;
}

.upload-ad {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-radius: 8px;
  background-color: var(--color-blue-dark);
  color: var(--color-white);
}

.upload-ad__text {
  flex: 1;
  min-width: 0;
}

.upload-ad__desc {
  color: var(--color-text-6);
}

.upload-actions {
  display: flex;
  gap: 8px;
  padding-top: 8px;
}

.upload-preview {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 12px;
}

.upload-preview__strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.upload-preview__thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.upload-preview__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid var(--color-text-6);
  border-radius: 12px;
  background-color: var(--color-white);
  color: var(--color-text-3);
}

.video-preview {
  position: relative;
  width: 252px;
  height: 449px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--color-text-6);
  color: var(--color-white);
}

.video-preview__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-preview__overlay {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(180deg, rgba(30, 38, 42, 0) 0%, #000000 100%);
}

.video-preview__yt {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 16px;
  height: 21px;
  opacity: 0.84;
}

.video-preview__creator {
  position: absolute;
  left: 12px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  line-height: 18px;
}

.video-preview__creator-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.video-preview__creator-row img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
}

.video-preview__handle {
  opacity: 0.86;
}

.video-preview__ad {
  position: absolute;
  left: 12px;
  bottom: 80px;
}

.video-preview__actions {
  position: absolute;
  right: 12px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.video-preview__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  line-height: 15px;
}

.video-preview__action img {
  width: 16px;
  height: 16px;
}

.video-preview__play {
  position: absolute;
  top: 200px;
  left: 101px;
  width: 54px;
  height: 54px;
}

.video-preview--uploading {
  display: flex;
  align-items: flex-start;
  background-color: var(--color-text-6);
  color: var(--color-text);
}

.video-preview__progress {
  position: absolute;
  top: 20px;
  left: 12px;
  width: 228px;
}

.video-preview__progress-title {
  color: var(--color-text);
}

.video-preview__progress-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 1px;
}

.video-preview__progress-bar {
  flex: 1;
  height: 8px;
  border-radius: 12px;
  background-color: var(--color-text-5);
  overflow: hidden;
}

.video-preview__progress-fill {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: 12px;
  background-color: var(--color-purple-medium);
}

.video-preview__progress-value {
  color: var(--color-text-3);
}

/* ==========================================================================
   Perfil
   ========================================================================== */

.profile-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 652px;
  max-width: 100%;
  flex-shrink: 0;
}

.profile-preview {
  flex: 1;
  min-width: 0;
}

/* ==========================================================================
   Calendario (popup de schedule)
   ========================================================================== */

.calendar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.calendar__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--color-text);
}

.calendar__nav {
  color: var(--color-text-3);
}

.calendar__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 40px);
  padding: 0 9px;
}

.calendar__weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  color: var(--color-text-2);
}

.calendar__grid {
  display: grid;
  grid-template-columns: repeat(7, 40px);
  padding: 8px;
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--color-white);
}

.calendar__day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-white);
}

.calendar__day--muted {
  color: var(--color-text-4);
}

.calendar__day--today {
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px var(--color-purple-medium);
}

.calendar__day--selected {
  border-radius: 8px;
  background-color: var(--color-purple-medium);
  color: var(--color-purple-dark);
}

.calendar__nav-img {
  width: 10px;
  height: 10px;
}

.calendar__nav-img--prev {
  transform: rotate(90deg);
}

.calendar__nav-img--next {
  transform: rotate(-90deg);
}

.calendar__time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 90px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  background-color: var(--color-white);
}

.calendar__time-field {
  width: 20px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--color-text-4);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  outline: none;
}

.calendar__time-field.is-filled {
  color: var(--color-text);
}

.calendar__time-colon {
  color: var(--color-text);
}

.calendar__actions {
  display: flex;
  gap: 8px;
  width: 100%;
}

.calendar__actions .btn {
  flex: 1;
}

.modal__panel--schedule {
  max-width: 340px;
}

/* ==========================================================================
   Barra de pestanas (toggles de estado)
   ========================================================================== */

.toggle-bar {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================================
   Support
   ========================================================================== */

.support-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 482px;
  padding: 20px;
  background-color: var(--color-white);
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
}

.support-card__title {
  color: var(--color-text);
}

/* ==========================================================================
   Login
   ========================================================================== */

.login {
  display: flex;
  min-height: 100vh;
}

.login__visual {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 50%;
  flex-shrink: 0;
  padding: 36px;
}

.login__illustration {
  position: relative;
  flex: 1;
  align-self: stretch;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}

.login__illustration img {
  width: 100%;
  height: 100%;
}

.login__form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  padding: 36px;
}

.login__form {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 369px;
}

.login__intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.login__title {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 60px;
  line-height: 0.84;
  text-transform: uppercase;
}

.login__subtitle {
  color: var(--color-text-3);
}

.login__fields {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.login__google {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  border: 1.5px solid var(--color-text-6);
  border-radius: 12px;
  background-color: var(--color-text-8);
  color: var(--color-text);
}

button.login__google {
  font: inherit;
  cursor: pointer;
}

.login__google img {
  width: 20px;
  height: 20px;
}

.login__spacer {
  width: 20px;
  height: 20px;
}

.login__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-4);
}

.login__divider::before,
.login__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-text-6);
}

.login__input {
  height: 48px;
  padding: 0 12px;
  border-width: 1.5px;
  border-radius: 12px;
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

.login__input[type='password'] {
  font-size: 20px;
  letter-spacing: 1px;
}

.login__input[type='password']::placeholder {
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0;
}

.login__submit {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.login__continue {
  height: 44px;
}

/* ==========================================================================
   Sidebar compacto (toggle del icono panel)
   ========================================================================== */

:is(.app--compact, .sidebar-compact) .sidebar {
  width: 80px;
  padding: 16px 8px 24px;
}

:is(.app--compact, .sidebar-compact) .sidebar__header {
  flex-direction: column-reverse;
  gap: 20px;
}

:is(.app--compact, .sidebar-compact) .sidebar__brand {
  align-items: center;
  gap: 20px;
}

:is(.app--compact, .sidebar-compact) .role-switch {
  display: none;
}

:is(.app--compact, .sidebar-compact) .sidebar__group {
  align-items: center;
}

:is(.app--compact, .sidebar-compact) .sidebar__nav {
  align-items: center;
}

:is(.app--compact, .sidebar-compact) .sidebar__link {
  position: relative;
  justify-content: center;
  width: 44px;
  padding: 0;
}

:is(.app--compact, .sidebar-compact) .sidebar__link-dot {
  position: absolute;
  top: 6px;
  right: 8px;
  margin-left: 0;
}

:is(.app--compact, .sidebar-compact) .sidebar__link-text,
:is(.app--compact, .sidebar-compact) .channel-select__text,
:is(.app--compact, .sidebar-compact) .channel-select__chevron {
  display: none;
}

:is(.app--compact, .sidebar-compact) .channel-select {
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
}

:is(.app--compact, .sidebar-compact) .balance-card {
  align-items: center;
  gap: 12px;
}

:is(.app--compact, .sidebar-compact) .balance-card__head {
  justify-content: center;
}

:is(.app--compact, .sidebar-compact) .balance-card__head .body-2,
:is(.app--compact, .sidebar-compact) .balance-card__center .body-2,
:is(.app--compact, .sidebar-compact) .balance-card__note {
  display: none;
}

:is(.app--compact, .sidebar-compact) .balance-card__amount {
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 8px;
  border-radius: 8px;
  background-color: var(--color-green-light);
  color: var(--color-green-dark);
  font-size: 12.5px;
}

:is(.app--compact, .sidebar-compact) .balance-card .btn {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border-radius: 100px;
  align-self: center;
}

:is(.app--compact, .sidebar-compact) .balance-card .btn__label {
  display: none;
}

:is(.app--compact, .sidebar-compact) .user-row {
  flex-direction: column;
  gap: 8px;
}

:is(.app--compact, .sidebar-compact) .user-row__name {
  display: none;
}

/* ==========================================================================
   Dropdown generico (seleccion simple o multiple)
   ========================================================================== */

.dropdown {
  position: relative;
}

.dropdown__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
}

.dropdown__value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-4);
}

.dropdown__value.is-filled {
  color: var(--color-text);
}

.dropdown__chevron {
  width: 10px;
  height: 6px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.dropdown.is-open .dropdown__chevron,
.channel-select.is-open .channel-select__chevron {
  transform: rotate(180deg);
}

.dropdown__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-height: 264px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  background-color: var(--color-white);
  box-shadow: 0 8px 24px rgba(30, 38, 42, 0.08);
}

.dropdown__menu[hidden] {
  display: none;
}

.creator-card[hidden],
.empty[hidden],
.skeleton[hidden] {
  display: none;
}

.dropdown__item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--color-text-2);
  text-align: left;
}

.dropdown__item:hover {
  background-color: var(--color-text-8);
}

.dropdown__item.is-selected {
  background-color: var(--color-blue-light);
  color: var(--color-text);
}

/* ==========================================================================
   Buscador
   ========================================================================== */

.search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 312px;
  height: 36px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  background-color: var(--color-white);
}

.search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background-color: transparent;
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: 300;
}

.search__input::placeholder {
  color: var(--color-text-4);
}

.search__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-4);
}

.page-head--between {
  justify-content: space-between;
}

/* ==========================================================================
   Paginacion
   ========================================================================== */

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 8px;
}

.pagination__info {
  color: var(--color-text-3);
}

.pagination__pages {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pagination__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 100px;
  color: var(--color-text-3);
}

.pagination__button:hover {
  background-color: var(--color-text-7);
}

.pagination__button.is-active {
  background-color: var(--color-blue-dark);
  color: var(--color-white);
}

.pagination__button[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

.pagination__button .icon {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   Estados de tabla (vacio / cargando / error)
   ========================================================================== */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px;
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  background-color: var(--color-white);
  text-align: center;
}

.empty__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 4px;
  border-radius: 50%;
  background-color: var(--color-text-7);
  color: var(--color-text-3);
}

.empty__icon .icon {
  width: 24px;
  height: 24px;
}

.empty__title {
  color: var(--color-text);
}

.empty__text {
  max-width: 380px;
  color: var(--color-text-3);
}

.empty--error .empty__icon {
  background-color: var(--color-red-light);
  color: var(--color-red);
}

.empty__action {
  margin-top: 8px;
}

.skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton--cards {
  gap: 16px;
}

.skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  background-color: var(--color-white);
}

.skeleton-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.skeleton-card__line {
  height: 14px;
  border-radius: 7px;
}

.skeleton-card__line--lg {
  width: 220px;
}

.skeleton-card__line--md {
  width: 140px;
}

.skeleton-card__block {
  height: 120px;
  border-radius: 8px;
}

.skeleton__row,
.skeleton-card__avatar,
.skeleton-card__line,
.skeleton-card__block {
  background-image: linear-gradient(90deg, var(--color-text-7) 25%, var(--color-text-8) 50%, var(--color-text-7) 75%);
  background-size: 200% 100%;
  animation: skeleton-wave 1.4s ease infinite;
}

.skeleton__row {
  height: 72px;
  border-radius: 8px;
}

@keyframes skeleton-wave {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

/* ==========================================================================
   Modal de retirada (Stripe)
   ========================================================================== */

.withdraw__accounts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.withdraw__account {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-text-6);
  border-radius: 8px;
  background-color: var(--color-white);
  color: var(--color-text-2);
  text-align: left;
}

.withdraw__account.is-selected {
  border-color: var(--color-blue-medium);
  box-shadow: 0 0 0 2px var(--color-blue-light);
}

.withdraw__account .icon {
  color: var(--color-text-3);
}

.withdraw__account-name {
  flex: 1;
  min-width: 0;
}

.withdraw__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.withdraw__actions .btn {
  flex: 1;
  padding: 0 12px;
}

/* ==========================================================================
   Notificaciones: leida / no leida
   ========================================================================== */

.notices-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.notices-head__action {
  color: var(--color-text-3);
}

.notices-head__action:hover {
  color: var(--color-text);
}

/* ==========================================================================
   Login: pasos, errores y confirmacion
   ========================================================================== */

.login__step[hidden] {
  display: none;
}

.login__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login__label {
  color: var(--color-text-2);
}

.login__error {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-red);
}

.login__error[hidden] {
  display: none;
}

.login__error .icon {
  width: 14px;
  height: 14px;
}

.login__input.is-invalid {
  border-color: var(--color-red);
}

.login__input.is-invalid:focus {
  border-color: var(--color-red);
  box-shadow: 0 0 0 2px var(--color-red-light);
}

.login__link {
  color: var(--color-text-2);
  text-decoration: underline;
}

.login__hint {
  color: var(--color-text-3);
}

.login__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 20px;
  border: 1px solid var(--color-green-light);
  border-radius: 12px;
  background-color: var(--color-green-light);
  text-align: center;
}

.login__success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-green-dark);
}

.login__success-icon .icon {
  width: 24px;
  height: 24px;
}

.login__success-text {
  color: var(--color-green-dark);
}

.login__back {
  align-self: center;
  color: var(--color-text-3);
}

.login__back:hover {
  color: var(--color-text);
}

/* ==========================================================================
   Responsive (tablet / movil)
   ========================================================================== */

@media (min-width: 1101px) and (max-width: 1170px) {
  .advertise__grid--dates {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1399.98px) {
  .creator-stats__item.is-md-hidden {
    display: none;
  }

  .creator-stats,
  .creator-stats__price {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1400px) {
  .page {
    max-width: 1120px;
  }

  .upload-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .upload-card {
    flex-wrap: wrap;
  }

  .upload-form {
    width: 100%;
    min-width: 320px;
  }
}

@media (max-width: 1100px) {
  .creators-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .main {
    padding: 32px;
  }

  .login {
    flex-direction: column;
  }

  .login__visual,
  .login__form-wrap {
    width: 100%;
  }

  .login__visual {
    align-items: center;
  }

  .login__illustration {
    align-self: auto;
    flex: none;
    height: auto;
    aspect-ratio: 791 / 857;
  }
}

@media (max-width: 1200px) {
  .table__head {
    display: none;
  }

  .table__row {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .table__row > .table__cell:first-child {
    width: 100%;
  }

  .table__row [class*='col-'] {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
  }

  .table__row .col-grow,
  .table__row .row-actions {
    margin-left: auto;
  }
}

@media (max-width: 860px) {
  .app {
    flex-direction: column;
  }

  .sidebar {
    position: static;
    width: 100%;
    height: auto;
    gap: 24px;
  }

  .sidebar__top {
    gap: 20px;
  }

  .sidebar__nav {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .main {
    padding: 24px 20px;
  }

  .creator-stats,
  .creator-stats__price {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .audience__country {
    width: 110px;
  }
}

@media (max-width: 560px) {
  .metrics,
  .metric {
    width: 100%;
  }

  .date-option--split {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
  }

  .creator-stats,
  .creator-stats__price {
    grid-template-columns: minmax(0, 1fr);
  }

  .upload-card {
    padding: 16px;
  }

  .video-preview {
    width: 100%;
    max-width: 252px;
  }
}

/* Auth: no mostrar la página protegida hasta validar la sesión */
html[data-auth]:not([data-auth-ready]) body {
  visibility: hidden;
}