/* =========================================================
   INNOVABeK
   ESPACIO DE CLIENTES
   ========================================================= */


.portal-body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 78% -10%,
      rgba(128, 84, 238, .12),
      transparent 33%
    ),
    #080910;

  color: var(--ink);
  overflow-x: hidden;
}


/* =========================================================
   FONDO AMBIENTAL
   ========================================================= */


.portal-ambient {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}


.ambient-orb {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .18;
}


.ambient-orb-one {
  width: 520px;
  height: 520px;
  right: -190px;
  top: 80px;

  background:
    radial-gradient(
      circle,
      rgba(180, 148, 255, .72),
      rgba(128, 84, 238, .25) 45%,
      transparent 72%
    );

  animation:
    portalOrbOne
    18s
    ease-in-out
    infinite;
}


.ambient-orb-two {
  width: 420px;
  height: 420px;
  left: 23%;
  bottom: -200px;

  background:
    radial-gradient(
      circle,
      rgba(107, 55, 225, .55),
      rgba(61, 24, 136, .20) 45%,
      transparent 72%
    );

  animation:
    portalOrbTwo
    22s
    ease-in-out
    infinite;
}


@keyframes portalOrbOne {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  50% {
    transform:
      translate3d(-80px, 100px, 0)
      scale(1.12);
  }

}


@keyframes portalOrbTwo {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  50% {
    transform:
      translate3d(110px, -70px, 0)
      scale(.88);
  }

}


/* =========================================================
   BANNER DEMO
   ========================================================= */


.demo-banner {
  position: relative;
  z-index: 50;

  min-height: 48px;

  padding:
    11px
    25px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 30px;

  background:
    linear-gradient(
      90deg,
      rgba(70, 36, 130, .88),
      rgba(34, 22, 65, .90)
    );

  border-bottom:
    1px solid
    rgba(180, 148, 255, .28);

  backdrop-filter:
    blur(18px);

  font-size: 12px;
}


.demo-banner > div {
  display: flex;
  align-items: center;

  gap: 10px;

  color:
    rgba(239, 231, 255, .78);
}


.demo-banner strong {
  color:
    #fff;

  font-weight:
    600;
}


.demo-light {
  width: 6px;
  height: 6px;

  flex-shrink: 0;

  border-radius: 50%;

  background:
    #c4a5ff;

  box-shadow:
    0 0 15px
    rgba(196, 165, 255, .95);
}


.demo-banner > a {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  flex-shrink: 0;

  color:
    #e9ddff;

  font-weight:
    600;
}


.demo-banner > a:hover {
  color:
    #fff;
}


/* =========================================================
   ESTRUCTURA
   ========================================================= */


.portal-shell {
  display: grid;

  grid-template-columns:
    286px
    minmax(0, 1fr);

  min-height:
    calc(100vh - 48px);
}


/* =========================================================
   SIDEBAR
   ========================================================= */


.portal-sidebar {
  position: sticky;

  top: 0;

  height:
    calc(100vh - 48px);

  padding:
    29px
    22px
    24px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  border-right:
    1px solid
    rgba(255, 255, 255, .07);

  background:
    linear-gradient(
      180deg,
      rgba(15, 15, 26, .97),
      rgba(9, 10, 16, .97)
    );

  backdrop-filter:
    blur(28px);

  overflow-y: auto;
}


.sidebar-top {
  min-width: 0;
}


.portal-brand {
  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;

  padding:
    4px
    4px
    23px;
}


.portal-brand img {
  width: 43px;
  height: 34px;

  object-fit:
    contain;

  flex-shrink: 0;

  mix-blend-mode:
    screen;
}


.portal-brand > span {
  display: flex;
  flex-direction: column;

  min-width: 0;
}


.portal-brand strong {
  font-family:
    var(--heading);

  font-size:
    21px;

  line-height:
    1;

  letter-spacing:
    -.045em;
}


.portal-brand small {
  margin-top:
    6px;

  font-family:
    var(--heading);

  font-size:
    8px;

  letter-spacing:
    .22em;

  color:
    var(--muted);
}


/* =========================================================
   CLIENTE
   ========================================================= */


.client-card {
  position: relative;

  display: flex;
  align-items: center;

  gap: 12px;

  margin:
    11px
    0
    31px;

  padding:
    16px;

  border:
    1px solid
    rgba(180, 148, 255, .18);

  border-radius:
    12px;

  background:
    radial-gradient(
      circle at 0 0,
      rgba(180, 148, 255, .08),
      transparent 53%
    ),
    rgba(255, 255, 255, .018);

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .025);
}


.client-avatar,
.topbar-avatar {
  display: grid;
  place-items: center;

  flex-shrink: 0;

  border:
    1px solid
    rgba(180, 148, 255, .35);

  background:
    linear-gradient(
      145deg,
      rgba(180, 148, 255, .16),
      rgba(128, 84, 238, .08)
    );

  color:
    #d8c5ff;

  font-family:
    var(--heading);

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .09);
}


.client-avatar {
  width: 38px;
  height: 38px;

  border-radius:
    10px;

  font-size:
    14px;
}


.client-card-copy {
  min-width: 0;
  flex: 1;
}


.client-card-copy > span,
.client-card-copy > strong {
  display: block;
}


.client-label {
  margin-bottom:
    4px;

  font-family:
    var(--heading);

  font-size:
    9px;

  letter-spacing:
    .15em;

  color:
    var(--purple);
}


.client-card-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size:
    13px;

  font-weight:
    600;
}


.client-card-copy > span:last-child {
  margin-top:
    4px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size:
    11px;

  color:
    var(--muted);
}


.client-status-dot {
  width: 6px;
  height: 6px;

  flex-shrink: 0;

  border-radius:
    50%;

  background:
    #aaefca;

  box-shadow:
    0 0 12px
    rgba(170, 239, 202, .55);
}


/* =========================================================
   NAVEGACIÓN
   ========================================================= */


.portal-nav {
  display: flex;
  flex-direction: column;

  gap: 5px;
}


.portal-nav a {
  position: relative;

  display: flex;
  align-items: center;

  gap: 12px;

  min-height:
    62px;

  padding:
    10px
    12px;

  border:
    1px solid
    transparent;

  border-radius:
    10px;

  color:
    #8f8d9b;

  transition:
    color .25s ease,
    background .25s ease,
    border-color .25s ease,
    transform .25s ease;
}


.portal-nav a:hover {
  color:
    #e7dcfa;

  background:
    rgba(180, 148, 255, .035);

  transform:
    translateX(2px);
}


.portal-nav a[aria-current="page"] {
  color:
    #fff;

  border-color:
    rgba(180, 148, 255, .19);

  background:
    radial-gradient(
      circle at 0 50%,
      rgba(180, 148, 255, .13),
      transparent 54%
    ),
    rgba(128, 84, 238, .045);

  box-shadow:
    inset 2px 0
    #b494ff;
}


.nav-index {
  flex-shrink: 0;

  width:
    25px;

  font-family:
    var(--heading);

  font-size:
    10px;

  letter-spacing:
    .08em;

  color:
    #777280;
}


.portal-nav a[aria-current="page"]
.nav-index {
  color:
    var(--purple);
}


.nav-copy {
  display: flex;
  flex-direction: column;

  gap: 4px;

  min-width: 0;
  flex: 1;
}


.nav-copy strong {
  font-size:
    13px;

  font-weight:
    600;
}


.nav-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size:
    10px;

  color:
    #6f6d78;
}


.portal-nav b {
  min-width:
    24px;

  padding:
    3px
    6px;

  border:
    1px solid
    rgba(180, 148, 255, .18);

  border-radius:
    20px;

  background:
    rgba(180, 148, 255, .08);

  color:
    var(--purple);

  font-size:
    10px;

  font-weight:
    600;

  text-align:
    center;
}


/* =========================================================
   SIDEBAR BOTTOM
   ========================================================= */


.sidebar-bottom {
  padding-top:
    45px;
}


.sidebar-help {
  padding:
    18px;

  border-top:
    1px solid
    rgba(255, 255, 255, .07);

  border-bottom:
    1px solid
    rgba(255, 255, 255, .07);
}


.sidebar-help .micro {
  color:
    #9888b5;

  font-size:
    9px;
}


.sidebar-help p {
  margin-top:
    9px;

  font-size:
    11px;

  line-height:
    1.65;
}


.reset-button {
  margin-top:
    17px;

  padding:
    7px 0;

  border:
    0;

  background:
    transparent;

  color:
    #73717c;

  font-size:
    11px;

  border-bottom:
    1px solid
    transparent;
}


.reset-button:hover {
  color:
    #b9afc8;

  border-color:
    rgba(255, 255, 255, .15);
}


.sidebar-back {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-top:
    21px;

  font-size:
    12px;

  font-weight:
    600;

  color:
    #bcaadc;
}


.sidebar-back:hover {
  color:
    #fff;
}


/* =========================================================
   ÁREA PRINCIPAL
   ========================================================= */


.portal-main {
  min-width: 0;

  position: relative;
}


/* =========================================================
   TOPBAR
   ========================================================= */


.portal-topbar {
  position: sticky;

  top: 0;

  z-index: 25;

  min-height:
    74px;

  padding:
    15px
    clamp(24px, 4vw, 55px);

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .07);

  background:
    rgba(8, 9, 16, .82);

  backdrop-filter:
    blur(24px);
}


.portal-topbar > div:first-child {
  display: flex;
  align-items: center;

  gap: 10px;

  min-width: 0;
}


.topbar-kicker,
.topbar-current,
.topbar-separator {
  font-family:
    var(--heading);

  font-size:
    10px;

  letter-spacing:
    .12em;
}


.topbar-kicker {
  color:
    #aaa0ba;
}


.topbar-separator {
  color:
    rgba(180, 148, 255, .35);
}


.topbar-current {
  color:
    var(--purple);
}


.topbar-actions {
  display: flex;
  align-items: center;

  gap: 20px;
}


.environment-pill {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding:
    7px
    10px;

  border:
    1px solid
    rgba(180, 148, 255, .18);

  border-radius:
    30px;

  font-family:
    var(--heading);

  font-size:
    9px;

  letter-spacing:
    .1em;

  color:
    #bcaadc;

  background:
    rgba(180, 148, 255, .04);
}


.environment-pill > span {
  width: 5px;
  height: 5px;

  border-radius:
    50%;

  background:
    #b494ff;

  box-shadow:
    0 0 10px
    rgba(180, 148, 255, .7);
}


.topbar-user {
  display: flex;
  align-items: center;

  gap: 11px;
}


.topbar-user > div {
  text-align:
    right;
}


.topbar-user strong,
.topbar-user span {
  display: block;
}


.topbar-user strong {
  font-size:
    11px;

  font-weight:
    600;
}


.topbar-user div > span {
  margin-top:
    3px;

  font-size:
    9px;

  color:
    var(--muted);
}


.topbar-avatar {
  width: 34px;
  height: 34px;

  border-radius:
    50%;

  font-size:
    11px;
}


/* =========================================================
   PÁGINAS
   ========================================================= */


.portal-page {
  width:
    min(1320px, 100%);

  margin:
    0 auto;

  padding:
    55px
    clamp(24px, 4vw, 55px)
    80px;
}


.portal-page[hidden] {
  display: none;
}


/* =========================================================
   HEADING
   ========================================================= */


.page-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 50px;

  margin-bottom:
    42px;
}


.page-heading .eyebrow {
  color:
    var(--purple);

  font-size:
    10px;
}


.page-heading h1 {
  max-width:
    820px;

  margin-top:
    17px;

  font-family:
    var(--heading);

  font-size:
    clamp(43px, 5vw, 72px);

  font-weight:
    500;

  line-height:
    .99;

  letter-spacing:
    -.06em;
}


.page-heading h1 > span {
  display: block;

  margin-top:
    5px;

  color:
    #a98ae9;
}


.page-heading p {
  max-width:
    550px;

  margin-top:
    20px;

  font-size:
    15px;

  line-height:
    1.7;
}


.heading-meta {
  min-width:
    155px;

  margin-top:
    29px;

  padding:
    13px
    15px;

  border:
    1px solid
    rgba(255, 255, 255, .08);

  border-radius:
    8px;

  background:
    rgba(255, 255, 255, .02);
}


.heading-meta span,
.heading-meta strong {
  display: block;
}


.heading-meta span {
  font-family:
    var(--heading);

  font-size:
    8px;

  letter-spacing:
    .14em;

  color:
    #787480;
}


.heading-meta strong {
  margin-top:
    7px;

  font-family:
    var(--heading);

  font-size:
    11px;

  letter-spacing:
    .06em;

  font-weight:
    500;

  color:
    #c7b6e3;
}


/* =========================================================
   ESTADÍSTICAS
   ========================================================= */


.portal-stats {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 14px;

  margin-bottom:
    19px;
}


.stat-card {
  min-height:
    175px;

  padding:
    22px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  border:
    1px solid
    rgba(255, 255, 255, .075);

  border-radius:
    12px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .028),
      rgba(255, 255, 255, .012)
    );

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .025);
}


.stat-highlight {
  border-color:
    rgba(180, 148, 255, .28);

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(180, 148, 255, .13),
      transparent 55%
    ),
    linear-gradient(
      145deg,
      rgba(128, 84, 238, .07),
      rgba(255, 255, 255, .012)
    );
}


.stat-card-top,
.stat-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;
}


.stat-card-top > span:first-child {
  font-size:
    12px;

  color:
    #aaa6b4;
}


.stat-symbol {
  color:
    #9576dc;

  font-family:
    var(--heading);

  font-size:
    16px;
}


.stat-card > strong {
  margin:
    13px 0;

  font-family:
    var(--heading);

  font-size:
    47px;

  font-weight:
    500;

  line-height:
    1;

  letter-spacing:
    -.07em;
}


.stat-card > strong.date-stat {
  font-size:
    34px;

  letter-spacing:
    -.05em;
}


.stat-card-bottom {
  font-size:
    10px;

  color:
    #76737f;
}


.stat-card-bottom a {
  color:
    var(--purple);

  font-weight:
    600;
}


/* =========================================================
   PANELES
   ========================================================= */


.dashboard-panel {
  position: relative;

  padding:
    27px;

  border:
    1px solid
    rgba(255, 255, 255, .075);

  border-radius:
    12px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .027),
      rgba(255, 255, 255, .011)
    );

  overflow:
    hidden;

  box-shadow:
    inset 0 1px 0
    rgba(255, 255, 255, .02);
}


.panel-title {
  position: relative;

  z-index: 2;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;
}


.panel-kicker {
  display: block;

  margin-bottom:
    8px;

  font-family:
    var(--heading);

  font-size:
    8px;

  letter-spacing:
    .14em;

  color:
    #8875a9;
}


.panel-title h2 {
  font-family:
    var(--heading);

  font-size:
    21px;

  line-height:
    1.2;

  letter-spacing:
    -.035em;

  font-weight:
    500;
}


.overview-grid {
  display: grid;

  grid-template-columns:
    1.05fr
    .95fr;

  gap: 19px;

  margin-bottom:
    19px;
}


/* =========================================================
   PANEL ATENCIÓN
   ========================================================= */


.attention-panel {
  min-height:
    405px;

  border-color:
    rgba(180, 148, 255, .25);

  background:
    radial-gradient(
      circle at 87% 18%,
      rgba(180, 148, 255, .16),
      transparent 30%
    ),
    radial-gradient(
      circle at 55% 120%,
      rgba(91, 44, 190, .16),
      transparent 50%
    ),
    #0f0f19;
}


.attention-panel h3 {
  position: relative;
  z-index: 2;

  max-width:
    410px;

  margin-top:
    95px;

  font-family:
    var(--heading);

  font-size:
    clamp(28px, 3vw, 40px);

  font-weight:
    500;

  line-height:
    1.1;

  letter-spacing:
    -.05em;
}


.attention-panel > p {
  position: relative;
  z-index: 2;

  max-width:
    430px;

  margin-top:
    15px;

  font-size:
    14px;
}


.attention-panel .button {
  position: relative;
  z-index: 2;

  margin-top:
    24px;
}


.attention-visual {
  position: absolute;

  right: -40px;
  top: 85px;

  width:
    225px;

  height:
    225px;
}


.attention-ring {
  position: absolute;

  border-radius:
    50%;

  border:
    1px solid
    rgba(180, 148, 255, .14);

  animation:
    attentionFloat
    9s
    ease-in-out
    infinite;
}


.ring-one {
  inset:
    18px;

  transform:
    rotate(15deg)
    scaleX(.80);
}


.ring-two {
  inset:
    48px;

  transform:
    rotate(-35deg)
    scaleY(.75);

  animation-delay:
    -3s;
}


.attention-core {
  position: absolute;

  left: 50%;
  top: 50%;

  transform:
    translate(-50%, -50%);

  display: grid;
  place-items: center;

  width:
    48px;
  height:
    48px;

  border:
    1px solid
    rgba(180, 148, 255, .3);

  border-radius:
    50%;

  background:
    rgba(180, 148, 255, .08);

  color:
    #c7aaff;

  font-family:
    var(--heading);

  font-size:
    23px;

  box-shadow:
    0 0 50px
    rgba(128, 84, 238, .18);
}


@keyframes attentionFloat {

  0%,
  100% {
    transform:
      rotate(15deg)
      scaleX(.80)
      translateY(0);
  }

  50% {
    transform:
      rotate(35deg)
      scaleX(.95)
      translateY(-12px);
  }

}


/* =========================================================
   PROGRESO
   ========================================================= */


.progress-panel {
  min-height:
    405px;
}


.progress-list {
  margin-top:
    30px;
}


.work-progress {
  position: relative;

  display: grid;

  grid-template-columns:
    1fr
    auto;

  gap:
    13px
    20px;

  padding:
    20px
    0;

  border-top:
    1px solid
    rgba(255, 255, 255, .065);
}


.work-progress:first-child {
  border-top:
    0;
}


.work-progress > div:first-child > span,
.work-progress > div:first-child > strong {
  display: block;
}


.work-progress > div:first-child > span {
  font-size:
    12px;
}


.work-progress > div:first-child > strong {
  margin-top:
    5px;

  color:
    #7d7986;

  font-size:
    10px;

  font-weight:
    500;
}


.progress-value {
  font-family:
    var(--heading);

  font-size:
    11px;

  color:
    #a989ef;
}


.progress-track {
  grid-column:
    1 / -1;

  width:
    100%;

  height:
    4px;

  overflow:
    hidden;

  border-radius:
    10px;

  background:
    rgba(255, 255, 255, .055);
}


.progress-track span {
  display: block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #7042df,
      #b494ff,
      #dbcaff
    );

  box-shadow:
    0 0 15px
    rgba(180, 148, 255, .3);
}


.panel-note {
  margin-top:
    24px;

  color:
    #74717d;

  font-size:
    11px;

  line-height:
    1.65;
}


/* =========================================================
   HOME ABAJO
   ========================================================= */


.home-bottom-grid {
  display: grid;

  grid-template-columns:
    1.15fr
    .85fr;

  gap: 19px;
}


.upcoming-row {
  display: flex;
  align-items: center;

  gap: 17px;

  padding:
    22px
    0;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .065);
}


.upcoming-row:last-child {
  padding-bottom:
    0;

  border-bottom:
    0;
}


.date-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  width:
    52px;

  height:
    59px;

  border:
    1px solid
    rgba(180, 148, 255, .25);

  border-radius:
    9px;

  background:
    rgba(180, 148, 255, .03);
}


.date-box strong {
  font-family:
    var(--heading);

  font-size:
    21px;

  font-weight:
    500;

  color:
    #d7c5f6;
}


.date-box span {
  margin-top:
    2px;

  font-size:
    8px;

  letter-spacing:
    .1em;

  color:
    #837399;
}


.upcoming-copy {
  flex:
    1;

  min-width:
    0;
}


.event-type {
  font-family:
    var(--heading);

  font-size:
    8px;

  letter-spacing:
    .11em;

  color:
    #8e73c5;
}


.upcoming-row h3 {
  margin-top:
    6px;

  font-family:
    var(--body);

  font-size:
    13px;

  font-weight:
    600;

  line-height:
    1.4;
}


.upcoming-row p {
  margin-top:
    5px;

  font-size:
    11px;

  line-height:
    1.5;
}


.activity-feed {
  min-height:
    100%;
}


.activity-item {
  position: relative;

  display: flex;

  gap: 14px;

  padding:
    19px
    0;

  border-bottom:
    1px solid
    rgba(255, 255, 255, .06);
}


.activity-item:last-child {
  border-bottom:
    0;
}


.activity-marker {
  width: 7px;
  height: 7px;

  margin-top:
    5px;

  flex-shrink: 0;

  border:
    1px solid
    #9b7fde;

  border-radius:
    50%;

  background:
    rgba(180, 148, 255, .12);

  box-shadow:
    0 0 12px
    rgba(180, 148, 255, .15);
}


.activity-item strong {
  display: block;

  font-size:
    11px;

  font-weight:
    600;
}


.activity-item p {
  margin-top:
    4px;

  font-size:
    11px;
}


.activity-item div > span {
  display: block;

  margin-top:
    7px;

  font-size:
    9px;

  color:
    #696672;
}


/* =========================================================
   PILLS
   ========================================================= */


.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height:
    25px;

  padding:
    5px
    9px;

  border:
    1px solid
    rgba(180, 148, 255, .20);

  border-radius:
    20px;

  background:
    rgba(180, 148, 255, .07);

  color:
    #bfa7ed;

  font-size:
    9px;

  white-space:
    nowrap;
}


.pill.approved {
  color:
    #a8dfbf;

  border-color:
    rgba(112, 202, 151, .25);

  background:
    rgba(112, 202, 151, .07);
}


.pill.changes {
  color:
    #eac08f;

  border-color:
    rgba(224, 171, 107, .25);

  background:
    rgba(224, 171, 107, .07);
}


/* =========================================================
   FILTROS
   ========================================================= */


.task-filters {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-bottom:
    24px;
}


.task-filters button {
  min-height:
    39px;

  padding:
    10px
    14px;

  border:
    1px solid
    rgba(255, 255, 255, .08);

  border-radius:
    8px;

  background:
    rgba(255, 255, 255, .018);

  color:
    #8f8c98;

  font-size:
    11px;

  transition:
    .2s ease;
}


.task-filters button:hover {
  color:
    #d9cee9;

  border-color:
    rgba(180, 148, 255, .22);
}


.task-filters button.active {
  color:
    #d9c7ff;

  border-color:
    rgba(180, 148, 255, .35);

  background:
    rgba(180, 148, 255, .08);
}


/* =========================================================
   PROPUESTAS
   ========================================================= */


.task-list {
  display: flex;
  flex-direction: column;

  gap: 11px;
}


.task-card {
  position: relative;

  display: grid;

  grid-template-columns:
    55px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 20px;

  padding:
    23px;

  border:
    1px solid
    rgba(255, 255, 255, .075);

  border-radius:
    11px;

  background:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, .025),
      rgba(255, 255, 255, .009)
    );

  transition:
    border-color .25s ease,
    background .25s ease,
    transform .25s ease;
}


.task-card:hover {
  border-color:
    rgba(180, 148, 255, .22);

  background:
    linear-gradient(
      110deg,
      rgba(180, 148, 255, .05),
      rgba(255, 255, 255, .012)
    );

  transform:
    translateY(-1px);
}


.task-number {
  font-family:
    var(--heading);

  font-size:
    22px;

  color:
    rgba(180, 148, 255, .35);
}


.task-content {
  min-width: 0;
}


.task-content > span {
  font-family:
    var(--heading);

  font-size:
    8px;

  letter-spacing:
    .12em;

  color:
    #9077c5;
}


.task-card h2 {
  margin-top:
    7px;

  font-family:
    var(--heading);

  font-size:
    21px;

  line-height:
    1.25;

  letter-spacing:
    -.035em;

  font-weight:
    500;
}


.task-card p {
  margin-top:
    7px;

  max-width:
    600px;

  font-size:
    11px;

  line-height:
    1.55;
}


.task-actions {
  display: flex;
  align-items: center;

  gap: 12px;
}


.task-actions .button {
  min-height:
    40px;

  padding:
    10px
    14px;

  font-size:
    11px;
}


.empty-state {
  padding:
    60px
    28px;

  border:
    1px dashed
    rgba(180, 148, 255, .20);

  border-radius:
    11px;

  background:
    rgba(180, 148, 255, .025);

  text-align:
    center;
}


.empty-state h2 {
  font-size:
    22px;
}


.empty-state p {
  margin-top:
    10px;

  font-size:
    12px;
}


/* =========================================================
   CALENDARIO
   ========================================================= */


.calendar-layout {
  display: grid;

  grid-template-columns:
    1.35fr
    .65fr;

  gap: 18px;
}


.calendar-panel {
  min-height:
    560px;
}


.calendar-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 18px;

  margin-bottom:
    31px;
}


.calendar-controls > div {
  text-align: center;
}


.calendar-controls > div > span {
  display: block;

  margin-bottom:
    7px;

  font-family:
    var(--heading);

  font-size:
    8px;

  letter-spacing:
    .13em;

  color:
    #716a7c;
}


.calendar-controls h2 {
  font-size:
    21px;

  letter-spacing:
    -.03em;

  text-transform:
    capitalize;
}


.calendar-controls button {
  width:
    39px;

  height:
    39px;

  padding: 0;

  border:
    1px solid
    rgba(255, 255, 255, .08);

  border-radius:
    8px;

  background:
    rgba(255, 255, 255, .02);

  color:
    #a6a1ad;

  font-size:
    15px;
}


.calendar-controls button:hover {
  border-color:
    rgba(180, 148, 255, .3);

  color:
    #d8c7fa;
}


.calendar-week,
.calendar-grid {
  display: grid;

  grid-template-columns:
    repeat(7, minmax(0, 1fr));

  gap: 6px;
}


.calendar-week {
  margin-bottom:
    9px;

  text-align:
    center;

  color:
    #65616d;

  font-size:
    9px;
}


.calendar-grid button,
.calendar-grid .blank-day {
  aspect-ratio:
    1.12;

  min-height:
    43px;
}


.calendar-grid button {
  position: relative;

  border:
    1px solid
    transparent;

  border-radius:
    8px;

  background:
    rgba(255, 255, 255, .012);

  color:
    #b9b5c0;

  font-size:
    11px;

  transition:
    .2s ease;
}


.calendar-grid button:hover {
  border-color:
    rgba(180, 148, 255, .18);

  background:
    rgba(180, 148, 255, .03);
}


.calendar-grid button[
  aria-pressed="true"
] {
  border-color:
    rgba(180, 148, 255, .48);

  background:
    linear-gradient(
      145deg,
      rgba(180, 148, 255, .13),
      rgba(128, 84, 238, .05)
    );

  color:
    #e2d4ff;

  box-shadow:
    inset 0 0 20px
    rgba(180, 148, 255, .05);
}


.calendar-grid button.has-event::after {
  content: '';

  position: absolute;

  left: 50%;
  bottom: 6px;

  width: 4px;
  height: 4px;

  transform:
    translateX(-50%);

  border-radius:
    50%;

  background:
    #b494ff;

  box-shadow:
    0 0 8px
    rgba(180, 148, 255, .6);
}


.calendar-legend {
  display: flex;
  align-items: center;

  gap: 8px;

  margin-top:
    20px;

  font-size:
    9px;
}


.calendar-legend > span {
  width: 4px;
  height: 4px;

  border-radius:
    50%;

  background:
    #b494ff;
}


.day-panel .eyebrow {
  color:
    #957acb;

  font-size:
    9px;
}


.day-panel > h2 {
  margin:
    13px
    0
    27px;

  font-size:
    28px;

  letter-spacing:
    -.04em;
}


.day-event {
  padding:
    19px
    0;

  border-top:
    1px solid
    rgba(255, 255, 255, .07);
}


.event-time {
  font-family:
    var(--heading);

  font-size:
    9px;

  letter-spacing:
    .08em;

  color:
    #9476d8;
}


.day-event h3 {
  margin-top:
    8px;

  font-size:
    16px;

  letter-spacing:
    -.02em;
}


.day-event p {
  margin-top:
    8px;

  font-size:
    11px;
}


.no-events {
  padding-top:
    20px;

  font-size:
    12px;
}


/* =========================================================
   DOCUMENTOS
   ========================================================= */


.document-list {
  display: flex;
  flex-direction: column;

  gap: 11px;
}


.document-card {
  display: grid;

  grid-template-columns:
    54px
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 18px;

  padding:
    22px;

  border:
    1px solid
    rgba(255, 255, 255, .075);

  border-radius:
    11px;

  background:
    linear-gradient(
      110deg,
      rgba(255, 255, 255, .025),
      rgba(255, 255, 255, .009)
    );
}


.document-icon {
  display: grid;
  place-items: center;

  width:
    50px;

  height:
    55px;

  border:
    1px solid
    rgba(180, 148, 255, .22);

  border-radius:
    9px;

  background:
    rgba(180, 148, 255, .035);

  color:
    #a98adf;

  font-family:
    var(--heading);

  font-size:
    9px;

  letter-spacing:
    .08em;
}


.document-info {
  min-width: 0;
}


.document-info h2 {
  font-size:
    20px;

  line-height:
    1.25;

  letter-spacing:
    -.03em;
}


.document-info p {
  margin-top:
    6px;

  font-size:
    11px;
}


.document-buttons {
  display: flex;
  align-items: center;

  gap: 8px;
}


.document-buttons button {
  min-height:
    40px;

  padding:
    10px
    14px;

  font-size:
    10px;
}


/* =========================================================
   DIÁLOGOS
   ========================================================= */


.portal-dialog {
  width:
    min(680px, calc(100% - 36px));

  max-height:
    calc(100svh - 36px);

  margin:
    auto;

  padding:
    31px;

  overflow-y:
    auto;

  border:
    1px solid
    rgba(180, 148, 255, .30);

  border-radius:
    13px;

  background:
    radial-gradient(
      circle at 100% 0,
      rgba(180, 148, 255, .09),
      transparent 35%
    ),
    #10111b;

  color:
    var(--ink);

  box-shadow:
    0 35px 140px
    rgba(0, 0, 0, .72);
}


.portal-dialog::backdrop {
  background:
    rgba(3, 4, 11, .88);

  backdrop-filter:
    blur(10px);
}


.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  margin-bottom:
    20px;
}


.dialog-header .eyebrow {
  color:
    var(--purple);

  font-size:
    9px;
}


.dialog-close {
  width:
    36px;

  height:
    36px;

  flex-shrink: 0;

  padding: 0;

  border:
    1px solid
    rgba(255, 255, 255, .09);

  border-radius:
    8px;

  background:
    rgba(255, 255, 255, .02);

  color:
    #aaa4b1;

  font-size:
    20px;
}


.portal-dialog > h2 {
  font-size:
    clamp(28px, 4vw, 38px);

  line-height:
    1.12;

  letter-spacing:
    -.045em;
}


.task-kind {
  display: block;

  margin-top:
    6px;

  font-size:
    9px;

  color:
    #9678d4;
}


.proposal-body {
  margin:
    27px
    0;

  padding:
    22px;

  border:
    1px solid
    rgba(255, 255, 255, .07);

  border-radius:
    9px;

  background:
    rgba(255, 255, 255, .018);
}


.proposal-body p {
  white-space:
    pre-line;

  color:
    #bbb5c8;

  font-size:
    13px;

  line-height:
    1.8;
}


.saved-feedback {
  margin-bottom:
    22px;

  padding:
    17px;

  border-left:
    2px solid
    #b494ff;

  background:
    rgba(180, 148, 255, .04);
}


.saved-feedback .micro {
  color:
    #9b81ce;

  font-size:
    8px;
}


.saved-feedback p {
  margin-top:
    8px;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;

  font-size:
    12px;
}


.portal-dialog label {
  display: block;

  margin-bottom:
    9px;

  font-size:
    12px;

  line-height:
    1.5;
}


.portal-dialog label > span {
  display: block;

  margin-top:
    4px;

  font-size:
    10px;

  color:
    #76727d;
}


.portal-dialog textarea {
  margin-bottom:
    14px;
}


.review-actions {
  display: flex;

  gap: 10px;
}


.review-actions .button {
  flex: 1;
}


.document-body {
  margin:
    25px 0;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;

  color:
    #c0bacb;

  font-family:
    var(--body);

  font-size:
    12px;

  line-height:
    1.8;
}


/* =========================================================
   TOAST
   ========================================================= */


.portal-toast {
  position: fixed;

  right: 24px;
  bottom: 24px;

  z-index: 100;

  width:
    min(390px, calc(100% - 48px));

  padding:
    16px
    18px;

  border:
    1px solid
    rgba(180, 148, 255, .30);

  border-radius:
    10px;

  background:
    rgba(27, 20, 42, .96);

  color:
    #dfd2f7;

  font-size:
    11px;

  line-height:
    1.6;

  box-shadow:
    0 20px 70px
    rgba(0, 0, 0, .45);

  backdrop-filter:
    blur(18px);
}


.portal-toast[hidden] {
  display: none;
}


/* =========================================================
   1150
   ========================================================= */


@media (max-width: 1150px) {

  .portal-shell {
    grid-template-columns:
      245px
      minmax(0, 1fr);
  }


  .portal-sidebar {
    padding:
      25px
      17px;
  }


  .portal-brand strong {
    font-size:
      18px;
  }


  .client-card {
    padding:
      13px;
  }


  .portal-page {
    padding-left:
      28px;

    padding-right:
      28px;
  }


  .portal-topbar {
    padding-left:
      28px;

    padding-right:
      28px;
  }


  .task-card {
    grid-template-columns:
      38px
      minmax(0, 1fr)
      auto;
  }


  .home-bottom-grid {
    grid-template-columns:
      1fr;
  }

}


/* =========================================================
   900
   ========================================================= */


@media (max-width: 900px) {

  .portal-shell {
    display: block;
  }


  .portal-sidebar {
    position: relative;

    top: auto;

    width: 100%;

    height: auto;

    overflow:
      visible;

    padding:
      18px
      24px;

    border-right:
      0;

    border-bottom:
      1px solid
      rgba(255, 255, 255, .07);
  }


  .sidebar-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 16px;

    width: 100%;
  }


  .portal-brand {
    padding:
      0;

    margin-right:
      auto;
  }


  .client-card {
    margin:
      0;
  }


  .portal-nav {
    width: 100%;

    display: grid;

    grid-template-columns:
      repeat(4, 1fr);

    gap: 6px;
  }


  .portal-nav a {
    min-height:
      50px;

    justify-content:
      center;

    padding:
      10px;
  }


  .nav-copy small {
    display:
      none;
  }


  .nav-index {
    display:
      none;
  }


  .sidebar-bottom {
    display: none;
  }


  .portal-topbar {
    top: 0;
  }


  .overview-grid {
    grid-template-columns:
      1fr;
  }


  .attention-panel,
  .progress-panel {
    min-height:
      360px;
  }


  .calendar-layout {
    grid-template-columns:
      1fr;
  }


  .calendar-panel {
    min-height:
      auto;
  }

}


/* =========================================================
   700
   ========================================================= */


@media (max-width: 700px) {

  .demo-banner {
    padding:
      12px
      20px;

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      7px;
  }


  .demo-banner > a {
    margin-left:
      16px;
  }


  .portal-sidebar {
    padding:
      18px
      20px;
  }


  .client-card {
    order:
      3;

    width:
      100%;
  }


  .portal-nav {
    order:
      4;

    display: flex;
    flex-direction: row;

    overflow-x:
      auto;

    padding-bottom:
      3px;
  }


  .portal-nav a {
    flex:
      0 0 auto;

    min-width:
      110px;
  }


  .portal-nav b {
    margin-left:
      3px;
  }


  .portal-topbar {
    padding:
      14px
      20px;
  }


  .topbar-user > div {
    display:
      none;
  }


  .topbar-kicker,
  .topbar-separator {
    display:
      none;
  }


  .portal-page {
    padding:
      39px
      20px
      60px;
  }


  .page-heading {
    display: block;

    margin-bottom:
      31px;
  }


  .heading-meta {
    display:
      none;
  }


  .page-heading h1 {
    font-size:
      clamp(42px, 11vw, 63px);
  }


  .portal-stats {
    grid-template-columns:
      1fr
      1fr;
  }


  .portal-stats article:last-child {
    grid-column:
      1 / -1;

    min-height:
      135px;
  }


  .stat-card {
    min-height:
      150px;

    padding:
      18px;
  }


  .stat-card > strong {
    font-size:
      40px;
  }


  .dashboard-panel {
    padding:
      22px;
  }


  .attention-panel h3 {
    margin-top:
      110px;
  }


  .attention-visual {
    right:
      -70px;
  }


  .task-card {
    grid-template-columns:
      34px
      minmax(0, 1fr);

    align-items:
      start;

    gap:
      13px;
  }


  .task-actions {
    grid-column:
      1 / -1;

    justify-content:
      space-between;

    padding-top:
      4px;
  }


  .document-card {
    grid-template-columns:
      50px
      minmax(0, 1fr);
  }


  .document-buttons {
    grid-column:
      1 / -1;

    justify-content:
      space-between;
  }


  .upcoming-row .pill {
    display:
      none;
  }

}


/* =========================================================
   520
   ========================================================= */


@media (max-width: 520px) {

  .portal-brand strong {
    font-size:
      19px;
  }


  .portal-brand small {
    font-size:
      7px;
  }


  .environment-pill {
    display:
      none;
  }


  .portal-stats {
    grid-template-columns:
      1fr;
  }


  .portal-stats article:last-child {
    grid-column:
      auto;
  }


  .stat-card {
    min-height:
      135px;
  }


  .page-heading p {
    font-size:
      14px;
  }


  .attention-panel {
    min-height:
      390px;
  }


  .attention-panel h3 {
    max-width:
      280px;
  }


  .panel-title {
    gap:
      10px;
  }


  .calendar-grid,
  .calendar-week {
    gap:
      3px;
  }


  .calendar-grid button,
  .calendar-grid .blank-day {
    min-height:
      36px;
  }


  .calendar-grid button {
    font-size:
      10px;
  }


  .calendar-panel {
    padding:
      18px
      13px;
  }


  .document-buttons {
    flex-direction:
      column;

    align-items:
      stretch;
  }


  .document-buttons button {
    width:
      100%;
  }


  .review-actions {
    flex-direction:
      column;
  }


  .review-actions .button {
    width:
      100%;
  }


  .portal-dialog {
    width:
      calc(100% - 20px);

    padding:
      23px;
  }


  .portal-toast {
    left:
      15px;

    right:
      15px;

    bottom:
      15px;

    width:
      auto;
  }

}


/* =========================================================
   REDUCIR MOVIMIENTO
   ========================================================= */


@media (prefers-reduced-motion: reduce) {

  .ambient-orb,
  .attention-ring {
    animation:
      none;
  }

}
/* =========================================================
   INNOVABeK
   AJUSTE DE LEGIBILIDAD + AVATARES
   ========================================================= */


/* =========================================================
   AVATARES
   Centrado óptico y mejor presencia
   ========================================================= */

.client-avatar,
.topbar-avatar {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  line-height: 1;

  text-align: center;

  font-weight: 500;

  font-variant-numeric: tabular-nums;

  overflow: hidden;
}


.client-avatar {
  width: 42px;
  height: 42px;

  font-size: 16px;
}


.topbar-avatar {
  width: 40px;
  height: 40px;

  font-size: 15px;

  line-height: 40px;
}


/* Corrige especialmente la letra del avatar circular
   de la esquina superior derecha */

.topbar-avatar {
  transform: translateZ(0);
}

.topbar-avatar::first-letter {
  line-height: 1;
}


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

.portal-brand small {
  font-size: 10px;

  letter-spacing: .19em;
}


.client-label {
  font-size: 11px;

  letter-spacing: .13em;
}


.client-card-copy strong {
  font-size: 14px;
}


.client-card-copy > span:last-child {
  font-size: 12px;
}


.client-status-dot {
  width: 8px;
  height: 8px;
}


/* =========================================================
   NAVEGACIÓN LATERAL
   ========================================================= */

.nav-index {
  width: 29px;

  font-size: 13px;

  letter-spacing: .06em;

  font-weight: 500;
}


.nav-copy strong {
  font-size: 14px;
}


.nav-copy small {
  font-size: 11px;
}


.portal-nav b {
  min-width: 27px;

  padding: 4px 7px;

  font-size: 12px;
}


/* =========================================================
   SIDEBAR INFERIOR
   ========================================================= */

.sidebar-help .micro {
  font-size: 11px;

  letter-spacing: .12em;
}


.sidebar-help p {
  font-size: 12px;
}


.reset-button {
  font-size: 12px;
}


.sidebar-back {
  font-size: 13px;
}


/* =========================================================
   BARRA SUPERIOR
   ========================================================= */

.topbar-kicker,
.topbar-current,
.topbar-separator {
  font-size: 12px;

  letter-spacing: .10em;
}


.environment-pill {
  min-height: 30px;

  padding: 7px 12px;

  font-size: 11px;
}


.environment-pill > span {
  width: 7px;
  height: 7px;
}


.topbar-user strong {
  font-size: 13px;
}


.topbar-user div > span {
  font-size: 11px;
}


/* =========================================================
   CABECERAS Y METADATOS
   ========================================================= */

.page-heading .eyebrow {
  font-size: 12px;
}


.heading-meta span {
  font-size: 10px;
}


.heading-meta strong {
  font-size: 13px;
}


/* =========================================================
   ESTADÍSTICAS
   ========================================================= */

.stat-card-top > span:first-child {
  font-size: 13px;
}


.stat-symbol {
  font-size: 21px;

  line-height: 1;
}


.stat-card-bottom {
  font-size: 12px;
}


/* =========================================================
   PANELES
   ========================================================= */

.panel-kicker {
  font-size: 10px;

  letter-spacing: .12em;
}


.work-progress > div:first-child > span {
  font-size: 13px;
}


.work-progress > div:first-child > strong {
  font-size: 11px;
}


.progress-value {
  font-size: 13px;
}


.panel-note {
  font-size: 12px;
}


/* =========================================================
   AGENDA
   ========================================================= */

.date-box strong {
  font-size: 23px;
}


.date-box span {
  font-size: 10px;
}


.event-type {
  font-size: 10px;
}


.upcoming-row h3 {
  font-size: 14px;
}


.upcoming-row p {
  font-size: 12px;
}


/* =========================================================
   ACTIVIDAD
   ========================================================= */

.activity-marker {
  width: 9px;
  height: 9px;
}


.activity-item strong {
  font-size: 13px;
}


.activity-item p {
  font-size: 12px;
}


.activity-item div > span {
  font-size: 11px;
}


/* =========================================================
   PILLS / ETIQUETAS
   ========================================================= */

.pill {
  min-height: 28px;

  padding: 6px 10px;

  font-size: 11px;
}


/* =========================================================
   FILTROS
   ========================================================= */

.task-filters button {
  min-height: 41px;

  font-size: 12px;
}


/* =========================================================
   PROPUESTAS
   ========================================================= */

.task-number {
  font-size: 25px;
}


.task-content > span {
  font-size: 10px;

  letter-spacing: .11em;
}


.task-card p {
  font-size: 12px;
}


.task-actions .button {
  font-size: 12px;
}


/* =========================================================
   CALENDARIO
   ========================================================= */

.calendar-controls > div > span {
  font-size: 10px;
}


.calendar-controls button {
  font-size: 18px;
}


.calendar-week {
  font-size: 11px;

  font-weight: 500;
}


.calendar-grid button {
  font-size: 13px;

  font-weight: 500;
}


.calendar-grid button.has-event::after {
  width: 6px;
  height: 6px;
}


.calendar-legend {
  font-size: 11px;
}


.calendar-legend > span {
  width: 6px;
  height: 6px;
}


.day-panel .eyebrow {
  font-size: 11px;
}


.event-time {
  font-size: 11px;
}


.day-event p {
  font-size: 12px;
}


/* =========================================================
   DOCUMENTOS
   ========================================================= */

.document-icon {
  font-size: 11px;
}


.document-info p {
  font-size: 12px;
}


.document-buttons button {
  font-size: 11px;
}


/* =========================================================
   DIÁLOGOS
   ========================================================= */

.dialog-header .eyebrow {
  font-size: 11px;
}


.task-kind {
  font-size: 11px;
}


.saved-feedback .micro {
  font-size: 10px;
}


.portal-dialog label > span {
  font-size: 11px;
}


.document-body {
  font-size: 13px;
}


/* =========================================================
   TOAST
   ========================================================= */

.portal-toast {
  font-size: 12px;
}


/* =========================================================
   DEMO BANNER
   ========================================================= */

.demo-banner {
  font-size: 13px;
}


.demo-light {
  width: 8px;
  height: 8px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .topbar-avatar {
    width: 40px;
    height: 40px;

    font-size: 15px;

    line-height: 40px;
  }


  .client-avatar {
    width: 42px;
    height: 42px;

    font-size: 16px;
  }


  .nav-copy strong {
    font-size: 14px;
  }

}


/* =========================================================
   MÓVIL
   ========================================================= */

@media (max-width: 520px) {

  .portal-brand small {
    font-size: 9px;
  }


  .topbar-avatar {
    width: 38px;
    height: 38px;

    font-size: 14px;

    line-height: 38px;
  }


  .client-avatar {
    width: 40px;
    height: 40px;

    font-size: 15px;
  }


  .calendar-grid button {
    font-size: 12px;
  }


  .pill {
    font-size: 10px;
  }

}