.dashboard {
  color: #eaeaea;

  .dashboard_header {
    margin-bottom: 26px;

    h1 {
      font-size: 28px;
      font-weight: 600;
      letter-spacing: 0.3px;
    }

    p {
      color: #7a7a7a;
      font-size: 13px;
      margin-top: 4px;
    }
  }

  /* KPIS */
  .kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 28px;

    .card {
      background: linear-gradient(145deg, #111, #0e0e0e);
      border: 1px solid #1f1f1f;
      padding: 18px;
      border-radius: 14px;
      transition: all 0.25s ease;
      position: relative;
      overflow: hidden;

      /* pequeño brillo sutil */
      &::before {
        content: "";
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: radial-gradient(circle, rgba(133, 14, 72, 0.08), transparent 60%);
        opacity: 0;
        transition: opacity 0.3s ease;
      }

      &:hover {
        transform: translateY(-3px);
        border-color: rgba(133, 14, 72, 0.25);

        &::before {
          opacity: 1;
        }
      }

      h3 {
        font-size: 30px;
        font-weight: 700;
        color: #fff;
        position: relative;
      }

      p {
        color: #8a8a8a;
        font-size: 13px;
        margin-top: 4px;
        position: relative;
      }
    }
  }

  /* GRID PRINCIPAL */
  .dashboard_grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
  }

  .panel {
    background: #111;
    border: 1px solid #1f1f1f;
    padding: 20px;
    border-radius: 14px;

    h2 {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 14px;
      color: #e5e5e5;
      letter-spacing: 0.2px;
    }

    ul {
      list-style: none;

      li {
        padding: 10px 0;
        border-bottom: 1px solid #1a1a1a;
        font-size: 13px;
        color: #a3a3a3;
        transition: color 0.2s ease;

        &:hover {
          color: #eaeaea;
        }
      }
    }

    .acciones {
      display: flex;
      flex-direction: column;
      gap: 10px;

      a {
        text-decoration: none;
        color: #eaeaea;
        padding: 10px 12px;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid #1f1f1f;
        transition: all 0.2s ease;

        &:hover {
          background: rgba(133, 14, 72, 0.12);
          border-color: rgba(133, 14, 72, 0.3);
          transform: translateX(3px);
        }
      }
    }
  }
}