@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');


/* =========================================================
   TOASTS / NOTIFICACIONES
   ========================================================= */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);

  z-index: 99999;

  max-width: min(90vw, 460px);

  padding: 14px 20px;

  border-radius: 16px;

  background: rgba(25, 25, 30, 0.96);

  color: #fff;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;

  text-align: center;

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.25);

  border: 1px solid rgba(255, 255, 255, 0.12);

  backdrop-filter: blur(12px);
/* =========================================================
   FIVE MODAL
   ========================================================= */

.five-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;

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

  padding: 20px;

  background: rgba(0, 0, 0, 0.55);

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  animation: fiveModalFade 0.18s ease-out;
}

.five-modal {
  width: min(420px, 100%);

  padding: 28px;

  border-radius: 24px;

  background: #11151a;

  border: 1px solid rgba(255,255,255,0.12);

  box-shadow:
    0 25px 70px rgba(0,0,0,0.45);

  text-align: center;

  animation: fiveModalIn 0.22s ease-out;
}

.five-modal-icon {
  font-size: 34px;
  margin-bottom: 12px;
}

.five-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: #fff;

  margin-bottom: 8px;
}

.five-modal-message {
  font-size: 14px;
  color: rgba(255,255,255,0.65);

  line-height: 1.5;

  margin-bottom: 24px;
}

.five-modal-actions {
  display: flex;
  gap: 10px;
}

.five-modal-actions button {
  flex: 1;

  border: 0;

  padding: 13px 16px;

  border-radius: 13px;

  font-size: 14px;
  font-weight: 700;

  cursor: pointer;
}

.five-modal-cancel {
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.five-modal-delete {
  background: #ff4d5a;
  color: #fff;
}

.five-modal-cancel:hover {
  background: rgba(255,255,255,0.13);
}

.five-modal-delete:hover {
  background: #ff3947;
}

@keyframes fiveModalFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fiveModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}  -webkit-backdrop-filter: blur(12px);

  animation: toastIn 0.25s ease-out;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translate(-50%, 15px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
/* =========================================================
   GRÁFICOS DE BALANCE / INGRESOS / GASTOS
========================================================= */

.financial-card {
  position: relative;
  overflow: hidden;
  min-height: 150px;
}

.card-chart {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 65px;

  opacity: 0.85;

  pointer-events: none;

  overflow: hidden;
}

.card-chart svg {
  width: 100%;
  height: 100%;

  display: block;

  overflow: visible;
}

.chart-line {
  fill: none;

  stroke: currentColor;

  stroke-width: 2.2;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;

  opacity: 0.75;

  filter: drop-shadow(
    0 0 5px currentColor
  );

  stroke-dasharray: 500;
  stroke-dashoffset: 500;

  animation: chartDraw 1.4s cubic-bezier(
    0.22,
    1,
    0.36,
    1
  ) forwards;
}


/* INGRESOS */

.chart-up {
  color: #b5ff22;
}


/* GASTOS */

.chart-down {
  color: #ff6565;
}


/* BALANCE POSITIVO */

.card-value.positive + .chart-up {
  color: #b5ff22;
}


/* BALANCE NEGATIVO */

.card-value.negative + .chart-down {
  color: #ff6565;
}


/* Animación */

@keyframes chartDraw {

  from {
    stroke-dashoffset: 500;
    opacity: 0;
  }

  to {
    stroke-dashoffset: 0;
    opacity: 0.75;
  }

}


/* Pequeño degradado visual */

.financial-card::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 50px;

  pointer-events: none;

  opacity: 0.18;

  background: linear-gradient(
    to top,
    currentColor,
    transparent
  );
}


/* No interferir con el contenido */

.financial-card > * {
  position: relative;
  z-index: 2;
}

.financial-card .card-chart {
  z-index: 1;
}

/* =========================================================
   FINTRACK AUTH
   ========================================================= */

.auth-page {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(180, 255, 35, 0.07),
      transparent 35%
    ),
    #080b0e;

  color: #f4f6f8;
}

/* Luz ambiental */

.auth-bg-glow {
  position: absolute;
  width: 600px;
  height: 600px;

  top: -300px;
  left: 50%;

  transform: translateX(-50%);

  background: rgba(180, 255, 35, 0.08);

  filter: blur(100px);

  border-radius: 50%;

  pointer-events: none;

  animation: authGlow 8s ease-in-out infinite;
}

@keyframes authGlow {
  0%,
  100% {
    opacity: 0.5;
    transform: translateX(-50%) scale(1);
  }

  50% {
    opacity: 0.8;
    transform: translateX(-50%) scale(1.12);
  }
}

/* Contenedor */

.auth-container {
  width: min(430px, calc(100% - 40px));
  position: relative;
  z-index: 2;

  animation: authAppear 0.6s ease both;
}

@keyframes authAppear {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo */

.auth-brand {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  margin-bottom: 28px;

  font-size: 22px;
  font-weight: 700;

  letter-spacing: -0.5px;
}

.auth-logo {
  width: 10px;
  height: 10px;

  border-radius: 50%;

  background: #b5ff22;

  box-shadow:
    0 0 12px rgba(181, 255, 34, 0.8),
    0 0 28px rgba(181, 255, 34, 0.3);

  animation: logoPulse 2.5s ease-in-out infinite;
}

@keyframes logoPulse {
  0%,
  100% {
    box-shadow:
      0 0 10px rgba(181, 255, 34, 0.7),
      0 0 20px rgba(181, 255, 34, 0.2);
  }

  50% {
    box-shadow:
      0 0 15px rgba(181, 255, 34, 1),
      0 0 35px rgba(181, 255, 34, 0.4);
  }
}

/* Card */

.auth-card {
  background:
    linear-gradient(
      145deg,
      rgba(19, 24, 29, 0.96),
      rgba(12, 16, 20, 0.96)
    );

  border: 1px solid #252d35;

  border-radius: 20px;

  padding: 34px;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);

  backdrop-filter: blur(20px);
}

/* Header */

.auth-header {
  text-align: center;

  margin-bottom: 30px;
}

.auth-icon {
  width: 48px;
  height: 48px;

  margin: 0 auto 18px;

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

  border-radius: 14px;

  background: rgba(181, 255, 34, 0.08);

  border: 1px solid rgba(181, 255, 34, 0.18);

  color: #b5ff22;

  font-size: 22px;

  box-shadow:
    0 0 30px rgba(181, 255, 34, 0.05);
}

.auth-header h1 {
  margin: 0 0 9px;

  font-size: 28px;
  font-weight: 700;

  letter-spacing: -1px;
}

.auth-header p {
  margin: 0;

  color: #89929c;

  font-size: 14px;

  line-height: 1.5;
}

/* Formulario */

.auth-form {
  display: flex;
  flex-direction: column;

  gap: 18px;
}

.auth-field {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.auth-field label {
  font-size: 12px;

  font-weight: 600;

  color: #a5adb5;

  letter-spacing: 0.2px;
}

.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Inputs */

.auth-input-wrap {
  height: 52px;

  display: flex;
  align-items: center;

  padding: 0 14px;

  gap: 10px;

  border-radius: 11px;

  background: #10151a;

  border: 1px solid #29313a;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.auth-input-wrap > span {
  color: #65707b;

  font-size: 14px;

  width: 18px;

  text-align: center;

  transition: color 0.2s ease;
}

.auth-input-wrap:focus-within {
  border-color: rgba(181, 255, 34, 0.65);

  background: #11171c;

  box-shadow:
    0 0 0 3px rgba(181, 255, 34, 0.07);
}

.auth-input-wrap:focus-within > span {
  color: #b5ff22;
}

.auth-input-wrap input {
  flex: 1;

  min-width: 0;

  border: none !important;
  outline: none !important;

  background: transparent !important;

  color: #f4f6f8 !important;

  font-size: 14px;

  padding: 0 !important;
}

.auth-input-wrap input::placeholder {
  color: #555f69;
}

/* Mostrar contraseña */

.password-toggle {
  border: none;

  background: transparent;

  color: #727d87;

  font-size: 11px;

  cursor: pointer;

  padding: 5px;

  transition: color 0.2s ease;
}

.password-toggle:hover {
  color: #b5ff22;
}

.forgot-password {
  border: none;

  background: none;

  color: #9aaa82;

  font-size: 11px;

  cursor: pointer;

  padding: 0;
}

.forgot-password:hover {
  color: #b5ff22;
}

/* Requisitos */

.password-requirements {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  margin-top: -7px;
}

.password-requirements span {
  color: #69737d;

  font-size: 10px;

  padding: 5px 8px;

  border-radius: 6px;

  background: #0d1216;

  border: 1px solid #222a31;

  transition: all 0.2s ease;
}

.password-requirements span.valid {
  color: #b5ff22;

  border-color: rgba(181, 255, 34, 0.2);

  background: rgba(181, 255, 34, 0.05);
}

/* Botón principal */

.auth-submit {
  width: 100%;

  height: 52px;

  border: none;

  border-radius: 11px;

  background: #b5ff22;

  color: #080b0e;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  font-size: 14px;

  font-weight: 700;

  cursor: pointer;

  margin-top: 4px;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.auth-submit:hover {
  transform: translateY(-2px);

  background: #c0ff42;

  box-shadow:
    0 10px 30px rgba(181, 255, 34, 0.18);
}

.auth-submit:active {
  transform: translateY(0);
}

.auth-submit:disabled {
  cursor: wait;

  opacity: 0.8;

  transform: none;
}

.auth-submit-arrow {
  font-size: 18px;

  transition: transform 0.2s ease;
}

.auth-submit:hover .auth-submit-arrow {
  transform: translateX(4px);
}

/* Loading */

.auth-submit.loading .auth-spinner {
  width: 15px;
  height: 15px;

  border: 2px solid rgba(0, 0, 0, 0.2);

  border-top-color: #080b0e;

  border-radius: 50%;

  animation: authSpin 0.7s linear infinite;
}

@keyframes authSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Error */

.auth-error {
  min-height: 17px;

  text-align: center;

  color: #ff6565;

  font-size: 12px;

  margin-top: -5px;

  animation: errorShake 0.3s ease;
}

@keyframes errorShake {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

/* Separador */

.auth-divider {
  display: flex;

  align-items: center;

  gap: 12px;

  margin: 24px 0 20px;

  color: #4f5963;

  font-size: 11px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";

  flex: 1;

  height: 1px;

  background: #252c33;
}

/* Cambiar login/register */

.auth-switch {
  display: flex;

  justify-content: center;

  align-items: center;

  gap: 6px;

  color: #747e88;

  font-size: 12px;
}

.auth-switch button {
  border: none;

  background: transparent;

  color: #b5ff22;

  font-weight: 600;

  cursor: pointer;

  padding: 0;

  transition: color 0.2s ease;
}

.auth-switch button:hover {
  color: #d0ff72;
}

/* Footer */

.auth-footer {
  display: flex;

  justify-content: center;

  gap: 7px;

  margin-top: 22px;

  color: #4d5660;

  font-size: 10px;
}

.auth-footer span:first-child {
  color: #68727c;

  font-weight: 600;
}

/* Móvil */

@media (max-width: 520px) {

  .auth-container {
    width: calc(100% - 24px);
  }

  .auth-card {
    padding: 26px 20px;

    border-radius: 16px;
  }

  .auth-header h1 {
    font-size: 25px;
  }

  .auth-header {
    margin-bottom: 25px;
  }

  .password-requirements {
    flex-direction: column;

    gap: 5px;
  }

  .password-requirements span {
    width: fit-content;
  }
}

* { box-sizing: border-box;
}

:root {
  --bg: #080b0f; --panel: #0e1217; --panel-hover: #12171d; --border: #252b33; --text: #f1f3f5; --muted: #858d98; 
  --green: #b7ff32; --green-dark: rgba(183, 255, 50, .10); --red: #ff6262; --red-dark: rgba(255, 98, 98, .10);
}


body {
  margin: 0;

  background:
    radial-gradient(
      circle at 80% 0%,
      rgba(183,255,50,.035),
      transparent 25%
    ),
    var(--bg);

  color: var(--text);

  font-family: "Nunito", sans-serif;

  font-weight: 500;

  letter-spacing: -0.01em;
}

button,
input,
select,
textarea {
  font-family: "Nunito", sans-serif;
}

button, input, select { font: inherit;
}

button { cursor: pointer;
}

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

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

.sidebar { width: 240px; min-height: 100vh; position: fixed; left: 0; top: 0; bottom: 0; padding: 25px 18px; 
  background: #090d11; border-right: 1px solid var(--border); display: flex; flex-direction: column; z-index: 
  20;
}

.brand { display: flex; align-items: center; gap: 10px; font-size: 19px; font-weight: 750; margin-bottom: 42px;
}

.brand-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px 
  rgba(183,255,50,.65);
}

.sidebar-title { color: #69717c; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: 
  uppercase; margin: 0 0 10px 2px;
}

.sidebar-section { margin-bottom: 28px;
}

.sidebar-button { width: 100%; border: 0; background: transparent; color: #9aa2ad; border-radius: 10px; padding: 
  11px 10px; text-align: left; display: flex; align-items: center; gap: 11px; transition: .2s ease; 
  margin-bottom: 3px;
}

.sidebar-button:hover { background: #11161b; color: white; transform: translateX(2px);
}

.sidebar-button.active { color: white; background: #151a20; box-shadow: inset 2px 0 0 var(--green);
}

.sidebar-button .sidebar-icon { width: 22px; text-align: center; font-size: 16px;
}

.action-button { border: 0;
}

.action-button.income:hover { color: var(--green);
}

.action-button.expense:hover { color: var(--red);
}

/* CATEGORÍAS */

.category-toggle { display: flex; justify-content: space-between; align-items: center;
}

.category-toggle-left { display: flex; align-items: center; gap: 10px;
}

.category-list { margin-top: 5px;
}

.category-item { width: 100%; border: 0; background: transparent; color: #a3aab3; padding: 8px 8px 8px 12px; 
  border-radius: 9px; display: flex; align-items: center; gap: 10px; text-align: left; transition: .2s ease;
}

.category-item:hover { background: #12171c; color: white;
}

.category-item.active { background: #171c21; color: white;
}

.category-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; font-size: 
  13px;
}

.category-name { flex: 1; font-size: 13px;
}

.category-count { color: #68717c; font-size: 11px;
}

/* COLORES CATEGORÍAS */

.cat-transporte { background: rgba(255, 177, 67, .13); color: #ffb143;
}

.cat-personal { background: rgba(202, 91, 255, .13); color: #d58cff;
}

.cat-suscripciones { background: rgba(76, 211, 143, .13); color: #57d99a;
}

.cat-comida { background: rgba(62, 159, 255, .13); color: #54aaff;
}

.cat-ropa { background: rgba(184, 101, 255, .13); color: #c47dff;
}

.cat-ocio { background: rgba(255, 142, 67, .13); color: #ff9b5c;
}

.cat-inversion { background: rgba(118, 118, 255, .13); color: #9a9aff;
}

.cat-nomina { background: rgba(255, 190, 53, .13); color: #ffc83d;
}

.sidebar-bottom { margin-top: auto;
}

/* ========================= MAIN ========================= */

.main { width: calc(100% - 240px); margin-left: 240px; padding: 38px 38px 50px;
}

.hero { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px;
}

.hero h2 { font-size: 32px; letter-spacing: -.035em; margin: 0 0 5px;
}

.hero p { color: var(--muted); margin: 0;
}

.date { color: #737c87; font-size: 12px;
}

/* ========================= CARDS ========================= */

.cards { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 14px; margin-bottom: 20px;
}

.card { position: relative; min-height: 136px; padding: 23px; border: 1px solid var(--border); border-radius: 
  15px; background: linear-gradient(145deg, #10151a, #0c1014); overflow: hidden; transition: transform .25s 
  ease, border-color .25s ease;
}

.card:hover { transform: translateY(-3px); border-color: #353c45;
}

.card::after { content: ""; position: absolute; width: 130px; height: 130px; right: -70px; bottom: -80px; 
  border-radius: 50%; background: rgba(183,255,50,.04); filter: blur(20px);
}

.card-label { color: #929aa5; font-size: 11px; letter-spacing: .13em; font-weight: 700; text-transform: 
  uppercase;
}

.card-value { font-size: 31px; font-weight: 700; margin-top: 25px; letter-spacing: -.025em;
}

.positive { color: var(--green);
}

.negative { color: var(--red);
}

/* ========================= FILTERS ========================= */

.filters { display: flex; gap: 12px; align-items: center; margin: 22px 0;
}

.filter-select { min-width: 230px; background: #0d1217; border: 1px solid var(--border); color: white; 
  border-radius: 11px; padding: 11px 14px; outline: none;
}

.filter-tabs { display: flex; background: #0d1217; border: 1px solid var(--border); border-radius: 12px; 
  padding: 4px;
}

.filter-tab { border: 0; background: transparent; color: #929aa5; padding: 8px 17px; border-radius: 9px; 
  transition: .2s ease;
}

.filter-tab:hover { color: white;
}

.filter-tab.active { color: var(--green); background: rgba(183,255,50,.08);
}

.filter-spacer { flex: 1;
}

/* ========================= MOVIMIENTOS ========================= */

.movements-panel { border: 1px solid var(--border); background: #0d1116; border-radius: 15px; overflow: hidden;
}

.movements-header { padding: 21px; border-bottom: 1px solid var(--border);
}

.movements-header h3 { margin: 0; font-size: 18px;
}

.movement-table-header { display: grid; grid-template-columns: minmax(260px, 2.5fr) 1.2fr 100px 130px 130px 
  130px; padding: 13px 20px; color: #727b86; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; 
  border-bottom: 1px solid var(--border);
}

.movement { display: grid; grid-template-columns: minmax(260px, 2.5fr) 1.2fr 100px 130px 130px 130px; 
  align-items: center; padding: 18px 20px; border-bottom: 1px solid #20262d; transition: background .2s ease; 
  animation: movementIn .35s ease both;
}

.movement:last-child { border-bottom: 0;
}

.movement:hover { background: #11161b;
}

@keyframes movementIn { from { opacity: 0; transform: translateY(8px);
  }
  to { opacity: 1; transform: translateY(0);
  }
}

.movement-concept { display: flex; align-items: center; gap: 13px;
}

.movement-icon { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-size: 
  18px; flex-shrink: 0;
}

.movement-name { font-size: 14px; font-weight: 650; margin-bottom: 7px;
}

.movement-kind { display: inline-block; font-size: 9px; font-weight: 700; padding: 4px 7px; border-radius: 5px; 
  background: rgba(255,98,98,.12); color: var(--red);
}

.movement-kind.income { color: var(--green); background: rgba(183,255,50,.11);
}

.category-badge { display: inline-block; border-radius: 5px; padding: 5px 8px; font-size: 10px; font-weight: 
  750;
}

.movement-date, .movement-account, .movement-payment { color: #a0a7b0; font-size: 13px;
}

.movement-amount { text-align: right; font-size: 15px; font-weight: 700;
}

.movement-actions { text-align: right;
}

.delete { border: 0; background: transparent; color: #606872; font-size: 12px; transition: .2s ease;
}

.delete:hover { color: var(--red);
}

/* ========================= MODAL ========================= */

.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.72); backdrop-filter: blur(8px); display: 
  flex; justify-content: center; align-items: center; z-index: 100; animation: fadeIn .2s ease;
}

.modal { width: min(530px, calc(100vw - 30px)); background: #0e1318; border: 1px solid #303740; border-radius: 
  17px; box-shadow: 0 30px 100px rgba(0,0,0,.55); animation: modalIn .25s ease;
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }
}

@keyframes modalIn { from { opacity: 0; transform: translateY(15px) scale(.98);
  }
  to { opacity: 1; transform: translateY(0) scale(1);
  }
}

.modal-header { padding: 21px; border-bottom: 1px solid var(--border); display: flex; align-items: center; 
  justify-content: space-between;
}

.modal-header h3 { margin: 0;
}

.modal-close { border: 0; background: transparent; color: #737b85; font-size: 20px;
}

.modal-body { padding: 21px;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px;
}

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

.field.full { grid-column: 1 / -1;
}

.field label { color: #858d97; font-size: 11px;
}

.field input, .field select { width: 100%; background: #11161b; border: 1px solid #282f37; color: white; 
  padding: 12px; border-radius: 9px; outline: none; transition: .2s ease;
}

.field input:focus, .field select:focus { border-color: rgba(183,255,50,.55); box-shadow: 0 0 0 3px 
  rgba(183,255,50,.06);
}

.primary { width: 100%; border: 0; border-radius: 9px; background: var(--green); color: #080b0f; font-weight: 
  800; padding: 13px; transition: .2s ease;
}

.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(183,255,50,.15);
}

/* ========================= RESPONSIVE ========================= */

@media (max-width: 1100px) { .movement-table-header, .movement { grid-template-columns: 2fr 1fr 90px 110px;
  }

  .movement-payment { display: none;
  }

  .movement-table-header > :nth-child(5) { display: none;
  }
}

@media (max-width: 850px) { .sidebar { width: 70px; padding: 20px 10px;
  }

  .brand span:not(.brand-dot), .sidebar-title, .sidebar-button span:not(.sidebar-icon), .category-name, 
  .category-count {
    display: none;
  }

  .main { width: calc(100% - 70px); margin-left: 70px; padding: 25px 18px;
  }

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

  .filters { flex-wrap: wrap;
  }

  .filter-spacer { display: none;
  }
}
/* =========================================================
   FORMULARIO DE MOVIMIENTOS - VERTICAL
   ========================================================= */

.form-vertical {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-vertical .field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-vertical .field.full {
  width: 100%;
}

.form-vertical input,
.form-vertical select {
  width: 100%;
  box-sizing: border-box;
}

.form-vertical .primary {
  width: 100%;
}

/* =========================================================
   SHORTCUT TOKEN
========================================================= */

.shortcut-token-alert {
  position: fixed;
  inset: 0;
  z-index: 200;

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

  padding: 20px;

  background: rgba(0, 0, 0, 0.72);

  backdrop-filter: blur(10px);

  animation: shortcutFadeIn .2s ease;
}

.shortcut-token-content {
  width: min(500px, 100%);

  background:
    linear-gradient(
      145deg,
      #11171c,
      #0c1115
    );

  border: 1px solid #2b333b;

  border-radius: 18px;

  padding: 24px;

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

  animation: shortcutModalIn .25s ease;
}

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

  gap: 20px;

  margin-bottom: 20px;
}

.shortcut-token-title {
  color: #f1f3f5;

  font-size: 18px;

  font-weight: 700;

  letter-spacing: -.02em;
}

.shortcut-token-subtitle {
  margin-top: 6px;

  color: #858d98;

  font-size: 12px;

  line-height: 1.5;
}

.shortcut-token-close {
  border: 0;

  background: transparent;

  color: #737c86;

  font-size: 24px;

  line-height: 1;

  padding: 0;

  cursor: pointer;

  transition: .2s ease;
}

.shortcut-token-close:hover {
  color: white;

  transform: rotate(90deg);
}

.shortcut-token-value {
  display: flex;

  align-items: center;

  gap: 10px;

  padding: 13px;

  background: #090e12;

  border: 1px solid #282f37;

  border-radius: 11px;
}

.shortcut-token-value span {
  flex: 1;

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  color: #b7ff32;

  font-family:
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 12px;
}

.shortcut-token-copy {
  flex-shrink: 0;

  border: 1px solid rgba(183,255,50,.25);

  background: rgba(183,255,50,.08);

  color: #b7ff32;

  border-radius: 8px;

  padding: 8px 11px;

  font-size: 11px;

  font-weight: 700;

  cursor: pointer;

  transition: .2s ease;
}

.shortcut-token-copy:hover {
  background: rgba(183,255,50,.15);

  border-color: rgba(183,255,50,.4);
}

.shortcut-token-info {
  margin-top: 14px;

  color: #69737d;

  font-size: 10px;

  line-height: 1.5;
}

@keyframes shortcutFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes shortcutModalIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* FiveTrack notifications */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 99999;
  width: max-content;
  max-width: 90vw;
  padding: 14px 20px;
  border-radius: 16px;
  background: rgba(25, 25, 30, 0.96);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fiveTrackToastIn 0.25s ease-out;
}

@keyframes fiveTrackToastIn {
  from {
    opacity: 0;
    transform: translate(-50%, 15px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}