{% extends 'shared/base.html' %} {% load static %} {% block content %}
<meta charset="UTF-8" />
<style>
  .card,
  .card-light {
    border-radius: 5px;
    background-color: #fff;
    margin-bottom: 30px;
    -webkit-box-shadow: 2px 6px 15px 0 rgba(69, 65, 78, 0.1);
    -moz-box-shadow: 2px 6px 15px 0 rgba(69, 65, 78, 0.1);
    box-shadow: 2px 6px 15px 0 rgba(69, 65, 78, 0.1);
    border: 0;
  }

  .card .card-header,
  .card-light .card-header {
    padding: 1rem 1.25rem;
    background-color: transparent;
    border-bottom: 1px solid #ebecec !important;
  }

  .card .card-header:first-child,
  .card-light .card-header:first-child {
    border-radius: 0;
  }

  .card .card-header .card-head-row,
  .card-light .card-header .card-head-row {
    display: flex;
    align-items: center;
  }

  .card .card-header .card-head-row .card-tools,
  .card-light .card-header .card-head-row .card-tools {
    margin-left: auto;
    float: right;
    padding-left: 15px;
  }

  .card .separator-solid,
  .card-light .separator-solid {
    border-top: 1px solid #ebecec;
    margin: 15px 0;
  }

  .card .separator-dashed,
  .card-light .separator-dashed {
    border-top: 1px dashed #ebecec;
    margin: 15px 0;
  }

  .card .separator-dot,
  .card-light .separator-dot {
    border-top: 1px dotted #ebecec;
    margin: 15px 0;
  }

  .card .full-width-separator,
  .card-light .full-width-separator {
    margin: 15px -20px 15px;
  }

  .card .b-b1,
  .card-light .b-b1 {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  .card .card-body,
  .card-light .card-body {
    padding: 1.25rem;
  }

  .card .card-footer,
  .card-light .card-footer {
    background-color: transparent;
    line-height: 30px;
    border-top: 1px solid #ebecec !important;
    font-size: 13px;
  }

  .card .pull-in,
  .card-light .pull-in {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

  .card .pull-in.sparkline-fix,
  .card-light .pull-in.sparkline-fix {
    margin-left: -1.35rem;
    margin-right: -1.35rem;
    margin-bottom: -3px;
  }

  .card .chart-as-background,
  .card-light .chart-as-background {
    position: absolute;
    bottom: 0;
    width: calc(100% + 2px);
  }

  .card .card-action,
  .card-light .card-action {
    padding: 30px;
    background-color: transparent;
    line-height: 30px;
    border-top: 1px solid #ebecec !important;
    font-size: 14px;
  }

  .card .card-footer hr,
  .card-light .card-footer hr {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .card .card-footer .legend,
  .card-light .card-footer .legend {
    display: inline-block;
  }

  @media screen and (max-width: 476px) {
    .card .card-header .card-head-row:not(.card-tools-still-right) {
      flex-direction: column;
      align-items: unset;
    }

    .card .card-header .card-head-row:not(.card-tools-still-right) .card-tools {
      margin-left: 0;
      float: left;
      padding-left: 0;
      padding-top: 10px;
    }
  }

  .card.full-height {
    height: calc(100% - 0px);
  }

  .card-space {
    padding: 0 30px;
  }

  .card-space > .card-action,
  .card-space > .card-body,
  .card-space > .card-footer,
  .card-space > .card-header {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .card-with-nav .card-header {
    border-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .card-with-nav .card-body {
    padding: 15px 25px !important;
  }

  .card-list {
    padding: 10px 0;
  }

  .card-list .item-list {
    display: flex;
    flex-direction: row;
    padding: 10px 0;
    align-items: center;
  }

  .card-list .item-list .info-user {
    flex: 1;
  }

  .card-list .item-list .info-user .username,
  .card-list .item-list .info-user a.username {
    color: #1572e8;
    font-size: 13px;
    margin-bottom: 5px;
    font-weight: 400;
  }

  .card-list .item-list .info-user .status {
    font-size: 11px;
    color: #7d7b7b;
  }

  .card-title {
    margin: 0;
    color: #575962;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.6;
  }

  .card-title a,
  .card-title a:focus,
  .card-title a:hover {
    color: #575962;
    text-decoration: none;
  }

  .card-sub {
    display: block;
    margin: 5px 0 10px 0;
    font-size: 0.9rem;
    background: #f7f8fa;
    color: #575962;
    padding: 0.85rem 1.5rem;
    border-radius: 4px;
    line-height: 1.82;
  }

  .card-category {
    margin-top: 8px;
    font-size: 14px;
    color: #8d9498;
    margin-bottom: 0;
    word-break: normal;
  }

  label {
    font-size: 14px;
    font-weight: 400;
    color: #8d9498;
    margin-bottom: 0;
  }

  .card-transparent {
    background: 0 0 !important;
    box-shadow: none;
    border-color: transparent !important;
  }

  .card-stats .card-body {
    padding: 15px !important;
  }

  .card-stats .card-title {
    margin-bottom: 0 !important;
  }

  .card-stats .card-category {
    margin-top: 0;
  }

  .card-stats .col-icon {
    width: 90px;
    height: 65px;
    margin-left: 15px;
  }

  .card-stats .icon-big {
    width: 100%;
    height: 100%;
    font-size: 2.2em;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .card-stats .icon-big.icon-danger,
  .card-stats .icon-big.icon-default,
  .card-stats .icon-big.icon-info,
  .card-stats .icon-big.icon-primary,
  .card-stats .icon-big.icon-secondary,
  .card-stats .icon-big.icon-success,
  .card-stats .icon-big.icon-warning {
    border-radius: 5px;
  }

  .card-stats .icon-big.icon-danger i,
  .card-stats .icon-big.icon-default i,
  .card-stats .icon-big.icon-info i,
  .card-stats .icon-big.icon-primary i,
  .card-stats .icon-big.icon-secondary i,
  .card-stats .icon-big.icon-success i,
  .card-stats .icon-big.icon-warning i {
    color: #fff !important;
  }

  .card-stats .icon-big.round {
    border-radius: 50% !important;
  }

  .card-stats .col-stats {
    align-items: center;
    display: flex;
    padding-left: 15px;
  }

  .card-tasks .table {
    margin-bottom: 0;
  }

  .card-tasks .table .form-check {
    padding: 0 0 0 0.75rem !important;
  }

  .card-tasks .table .form-check label {
    margin-bottom: 0 !important;
  }

  .card-tasks .table tbody td:first-child,
  .card-tasks .table thead th:first-child {
    padding-left: 15px;
    padding-right: 15px;
  }

  .card-tasks .table tbody td:last-child,
  .card-tasks .table thead th:last-child {
    padding-right: 15px;
  }

  .card-tasks .table tbody tr:last-child td {
    border-bottom-width: 0 !important;
  }

  .card-tasks .card-body {
    padding-top: 0;
    padding-bottom: 0;
  }

  .card-tasks .card-body .table td {
    font-size: 13px;
  }

  .card-tasks .card-body .table td .btn {
    font-size: 15px;
    opacity: 0.7;
    transition: all 0.3s;
  }

  .card-tasks .card-body .table td:hover .btn {
    opacity: 1;
  }

  .card-tasks .form-button-action {
    display: block !important;
  }

  .card-danger,
  .card-dark,
  .card-default,
  .card-info,
  .card-primary,
  .card-secondary,
  .card-success,
  .card-warning {
    color: #fff;
    border: 0;
  }

  .card-danger .card-header,
  .card-dark .card-header,
  .card-default .card-header,
  .card-info .card-header,
  .card-primary .card-header,
  .card-secondary .card-header,
  .card-success .card-header,
  .card-warning .card-header {
    border-bottom: transparent !important;
  }

  .card-danger .card-category,
  .card-danger .card-title,
  .card-danger label,
  .card-dark .card-category,
  .card-dark .card-title,
  .card-dark label,
  .card-default .card-category,
  .card-default .card-title,
  .card-default label,
  .card-info .card-category,
  .card-info .card-title,
  .card-info label,
  .card-primary .card-category,
  .card-primary .card-title,
  .card-primary label,
  .card-secondary .card-category,
  .card-secondary .card-title,
  .card-success .card-category,
  .card-success .card-title,
  .card-success label,
  .card-warning .card-category,
  .card-warning .card-title,
  .card-warning label {
    color: #fff;
  }

  .card-danger .icon-big > i,
  .card-dark .icon-big > i,
  .card-default .icon-big > i,
  .card-info .icon-big > i,
  .card-primary .icon-big > i,
  .card-secondary .icon-big > i,
  .card-success .icon-big > i,
  .card-warning .icon-big > i {
    color: #fff !important;
  }

  .card-round {
    border-radius: 5px;
  }

  .progress-card {
    margin-bottom: 25px;
  }

  .progress-card .progress-status {
    display: flex;
    margin-bottom: 10px;
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
  }

  .card-post .info-post .username {
    margin-bottom: 0;
    font-weight: 600;
  }

  .card-post .info-post .date {
    margin-bottom: 0;
  }

  .card-pricing {
    padding: 20px 5px;
    text-align: center;
    border-radius: 5px;
  }

  .card-pricing .card-header {
    border-bottom: 0 !important;
  }

  .card-pricing .card-footer {
    border-top: 0 !important;
    padding: 15px 15px 10px 15px;
  }

  .card-pricing .card-title {
    font-weight: 400;
    font-size: 20px;
  }

  .card-pricing .card-price .price {
    font-size: 36px;
    font-weight: 400;
  }

  .card-pricing .card-price .text {
    font-size: 18px;
    font-weight: 400;
    color: #d1d7e3;
  }

  .card-pricing .specification-list {
    list-style: none;
    padding-left: 0;
  }

  .card-pricing .specification-list li {
    padding: 8px 0 12px;
    border-bottom: 1px solid #eee;
    text-align: left;
    font-size: 12px;
    margin-bottom: 5px;
  }

  .card-pricing .specification-list li .name-specification {
    color: #83848a;
  }

  .card-pricing .specification-list li .status-specification {
    margin-left: auto;
    float: right;
    font-weight: 400;
  }

  .card-pricing.card-pricing-focus {
    padding: 40px 5px;
  }

  .card-pricing2 {
    padding-bottom: 10px;
    background: #fff !important;
    border-bottom: 7px solid;
    text-align: center;
    overflow: hidden;
    position: relative;
    border-radius: 5px;
    -webkit-box-shadow: 0 1px 15px 1px rgba(69, 65, 78, 0.08);
    -moz-box-shadow: 0 1px 15px 1px rgba(69, 65, 78, 0.08);
    box-shadow: 0 1px 15px 1px rgba(69, 65, 78, 0.08);
  }

  .card-pricing2:before {
    content: "";
    width: 100%;
    height: 350px;
    position: absolute;
    top: -150px;
    left: 0;
    transform: skewY(-20deg);
  }

  .card-pricing2 .price-value:after,
  .card-pricing2 .price-value:before {
    content: "";
    left: 50%;
    transform: translateX(-50%) scaleY(0.5) rotate(45deg);
  }

  .card-pricing2 .value:after,
  .card-pricing2 .value:before {
    content: "";
    left: 50%;
    transform: translateX(-50%) scaleY(0.5) rotate(45deg);
  }

  .card-pricing2 .pricing-header {
    padding: 20px 20px 60px;
    text-align: left;
    position: relative;
  }

  .card-pricing2 .sub-title {
    display: block;
    font-size: 16px;
  }

  .card-pricing2 .value {
    background: #fff;
  }

  .card-pricing2 .price-value {
    display: inline-block;
    width: 170px;
    height: 110px;
    padding: 15px;
    border: 2px solid;
    border-top: none;
    border-bottom: none;
    position: relative;
  }

  .card-pricing2 .price-value:after,
  .card-pricing2 .price-value:before {
    width: 121px;
    height: 121px;
    border: 3px solid;
    border-right: none;
    border-bottom: none;
    position: absolute;
    top: -60px;
  }

  .card-pricing2 .price-value:after {
    border-top: none;
    border-left: none;
    border-bottom: 3px solid;
    border-right: 3px solid;
    top: auto;
    bottom: -60px;
  }

  .card-pricing2 .value {
    width: 100%;
    height: 100%;
    border: 2px solid;
    border-top: none;
    border-bottom: none;
    z-index: 1;
    position: relative;
  }

  .card-pricing2 .value:after,
  .card-pricing2 .value:before {
    width: 97px;
    height: 97px;
    background: #fff;
    border: 3px solid;
    border-bottom: none;
    border-right: none;
    position: absolute;
    top: -48px;
    z-index: -1;
  }

  .card-pricing2 .value:after {
    border-right: 3px solid;
    border-bottom: 3px solid;
    border-top: none;
    border-left: none;
    top: auto;
    bottom: -48px;
  }

  .card-pricing2 .currency {
    display: inline-block;
    font-size: 30px;
    margin-top: 7px;
    vertical-align: top;
  }

  .card-pricing2 .amount {
    display: inline-block;
    font-size: 40px;
    font-weight: 600;
    line-height: 65px;
  }

  .card-pricing2 .amount span {
    display: inline-block;
    font-size: 30px;
    font-weight: 400;
    vertical-align: top;
    margin-top: -7px;
  }

  .card-pricing2 .month {
    display: block;
    font-size: 16px;
    line-height: 0;
  }

  .card-pricing2 .pricing-content {
    padding: 50px 0 0 80px;
    margin-bottom: 20px;
    list-style: none;
    text-align: left;
    transition: all 0.3s ease 0s;
  }

  .card-pricing2 .pricing-content li {
    padding: 7px 0;
    font-size: 13px;
    color: grey;
    position: relative;
  }

  .card-pricing2 .pricing-content li.disable:before,
  .card-pricing2 .pricing-content li:before {
    content: "\f00c";
    font-family: "Font Awesome 5 Solid";
    font-weight: 900;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 50%;
    background: #98c458;
    text-align: center;
    color: #fff;
    position: absolute;
    left: -50px;
    font-size: 9px;
  }

  .row-cardProduct {
    padding: 0 5px;
    white-space: nowrap;
    overflow-x: auto;
    display: block !important;
    margin-right: -2rem;
    width: unset !important;
  }

  .col-cardProduct {
    width: 225px;
    padding: 0 10px;
    display: inline-block;
  }

  .card-product {
    background: #fff;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 7px 15px rgba(0, 0, 0, 0.12);
    margin-bottom: 15px;
  }

  .card-product .product-summary {
    padding: 15px;
  }

  @media screen and (max-width: 768px) {
    .col-cardProduct {
      width: 175px;
    }

    .card-product .title-product {
      font-size: 14px;
    }

    .card-product .price-product {
      font-size: 18px;
    }
  }

  .skew-shadow {
    position: relative;
    overflow: hidden;
  }

  .skew-shadow:before {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    width: 50%;
    min-width: 150px;
    height: 100%;
    top: 0;
    right: -25%;
    transform: skewX(-32.5deg);
  }

  .bubble-shadow {
    position: relative;
    overflow: hidden;
  }

  .bubble-shadow:before {
    position: absolute;
    top: -10%;
    right: -140px;
    width: 300px;
    height: 300px;
    content: "";
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
  }

  .bubble-shadow:after {
    position: absolute;
    top: -65px;
    right: 80px;
    width: 150px;
    height: 150px;
    content: "";
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
  }

  .curves-shadow {
    position: relative;
    overflow: hidden;
  }

  .curves-shadow:before {
    content: "";
    position: absolute;
    background: url(../img/img-shadow.png);
    background-size: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  @media only screen and (max-width: 990px) {
    .card-pricing2 {
      margin-bottom: 30px;
    }
  }

  @media only screen and (max-width: 767px) {
    .card-pricing2:before {
      transform: skewY(-15deg);
    }
  }

  .card-annoucement .card-body {
    padding: 50px 25px;
  }

  .card-annoucement .card-opening {
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.01em;
  }

  .card-annoucement .card-desc {
    padding: 15px 0;
    font-size: 16px;
    line-height: 1.65;
    font-weight: 300;
  }

  .card-profile .profile-picture {
    text-align: center;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: -41px;
    width: 100%;
    box-sizing: border-box;
  }

  .card-profile .user-profile .name {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 5px;
  }

  .card-profile .user-profile .job {
    color: #83848a;
    margin-bottom: 5px;
  }

  .card-profile .user-profile .desc {
    color: #bbb;
    margin-bottom: 15px;
  }

  .card-profile .user-profile .social-media {
    margin-bottom: 20px;
  }

  .card-profile .user-profile .social-media .btn {
    padding: 5px !important;
  }

  .card-profile .user-profile .social-media .btn i {
    font-size: 22px !important;
  }

  .card-profile .user-stats {
    margin-bottom: 10px;
  }

  .card-profile .user-stats [class^="col"] {
    border-right: 1px solid #ebebeb;
  }

  .card-profile .user-stats [class^="col"]:last-child {
    border-right: 0;
  }

  .card-profile .user-stats .number {
    font-weight: 400;
    font-size: 15px;
  }

  .card-profile .user-stats .title {
    color: #7d7b7b;
  }

  .card-profile .card-header {
    border-bottom: 0;
    height: 100px;
    position: relative;
  }

  .card-profile .card-body {
    padding-top: 60px;
  }

  .card-profile .card-footer {
    border-top: 0;
  }

  .card-profile.card-secondary .card-header {
    background: #6861ce;
  }

  .row-card-no-pd {
    border-radius: 5px;
    margin-left: 0;
    margin-right: 0;
    background: #fff;
    margin-bottom: 30px;
    padding-top: 15px;
    padding-bottom: 15px;
    position: relative;
    -webkit-box-shadow: 2px 6px 15px 0 rgba(69, 65, 78, 0.1);
    -moz-box-shadow: 2px 6px 15px 0 rgba(69, 65, 78, 0.1);
    box-shadow: 2px 6px 15px 0 rgba(69, 65, 78, 0.1);
    border: 0;
  }

  .row-card-no-pd .card {
    margin-bottom: 0;
    border-width: 0;
    box-shadow: none;
    position: unset;
  }

  .row-card-no-pd .card .card-header {
    padding-left: 0 !important;
    padding-top: 0 !important;
    padding-right: 0 !important;
  }

  .row-card-no-pd [class*="col"] .card:before {
    position: absolute;
    height: calc(100%);
    width: 1px;
    background: #eee;
    content: "";
    right: 0;
  }

  .row-card-no-pd [class*="col"]:last-child .card:before {
    width: 0;
  }

  .accordion .card {
    border-radius: 5px !important;
    background: #f7f7f7 !important;
    color: #575962 !important;
    border: 0;
    box-shadow: none;
  }

  .accordion .card .span-icon {
    font-size: 22px;
    padding-left: 15px;
    padding-right: 15px;
  }

  .accordion .card > .card-header {
    border: 0 !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer;
    border-radius: 0 !important;
  }

  .accordion .card > .card-header > .span-mode {
    margin-left: auto;
  }

  .accordion .card > .card-header > .span-mode:before {
    content: "\f068" !important;
    font-family: "Font Awesome 5 Solid";
    font-weight: 900;
    font-size: 16px;
  }

  .accordion .card > .card-header.collapsed > .span-mode:before {
    content: "\f067" !important;
  }

  .accordion .card .card-body {
    border-top: 1px solid #ebebeb;
    padding: 30px;
  }

  .accordion.accordion-danger .card .card-header,
  .accordion.accordion-danger .card .card-header .btn-link,
  .accordion.accordion-default .card .card-header,
  .accordion.accordion-default .card .card-header .btn-link,
  .accordion.accordion-info .card .card-header,
  .accordion.accordion-info .card .card-header .btn-link,
  .accordion.accordion-primary .card .card-header,
  .accordion.accordion-primary .card .card-header .btn-link,
  .accordion.accordion-secondary .card .card-header,
  .accordion.accordion-secondary .card .card-header .btn-link,
  .accordion.accordion-success .card .card-header,
  .accordion.accordion-success .card .card-header .btn-link,
  .accordion.accordion-warning .card .card-header,
  .accordion.accordion-warning .card .card-header .btn-link {
    font-size: 14px;
  }

  .border-transparent {
    border-color: transparent !important;
  }

  .gutters-0 {
    margin-right: 0;
    margin-left: 0;
  }

  .gutters-0 > .col,
  .gutters-0 > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }

  .gutters-0 .card {
    margin-bottom: 0;
  }

  .gutters-xs {
    margin-right: -0.25rem;
    margin-left: -0.25rem;
  }

  .gutters-xs > .col,
  .gutters-xs > [class*="col-"] {
    padding-right: 0.25rem;
    padding-left: 0.25rem;
  }

  .gutters-xs .card {
    margin-bottom: 0.5rem;
  }

  .gutters-sm {
    margin-right: -0.5rem;
    margin-left: -0.5rem;
  }

  .gutters-sm > .col,
  .gutters-sm > [class*="col-"] {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .gutters-sm .card {
    margin-bottom: 1rem;
  }

  .gutters-lg {
    margin-right: -1rem;
    margin-left: -1rem;
  }

  .gutters-lg > .col,
  .gutters-lg > [class*="col-"] {
    padding-right: 1rem;
    padding-left: 1rem;
  }

  .gutters-lg .card {
    margin-bottom: 2rem;
  }

  .gutters-xl {
    margin-right: -1.5rem;
    margin-left: -1.5rem;
  }

  .gutters-xl > .col,
  .gutters-xl > [class*="col-"] {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
  }

  .gutters-xl .card {
    margin-bottom: 3rem;
  }

  .card-stats .icon-big.icon-primary {
    background: #198754;
  }
</style>
<style>
  .card-effect-up {
    transition: transform 0.3s ease, box-shadow 0.3s ease,
      border-color 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid transparent;
    position: relative;
    /* Essencial para z-index */
    z-index: 100;
    /* Valor inicial mais alto para garantir sobreposição */
  }

  .card-effect-up:hover {
    transform: translateY(-5px);
    background-color: rgba(40, 167, 69, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    border-color: rgba(40, 167, 69, 0.3);
    z-index: 1010;
    /* Valor muito maior no hover para superar qualquer elemento interno */
  }

  /* Estilos adicionais para garantir a visibilidade e atração do ícone e texto */
  .icon-big {
    transition: color 0.3s ease;
  }

  .icon-big:hover {
    color: #28a745;
    /* Mudança de cor do ícone para verde */
  }

  .card-title,
  .card-category {
    transition: color 0.3s ease;
  }

  .card:hover .card-title,
  .card:hover .card-category {
    color: #343a40;
    /* Escurecer o texto para melhor contraste no fundo claro */
  }
</style>

{% if messages %}
<div
  id="welcome-message"
  class="alert alert-success alert-dismissible fade show"
  role="alert"
>
  {% for message in messages %} {{ message }} {% endfor %}
  <button
    type="button"
    class="btn-close"
    data-bs-dismiss="alert"
    aria-label="Close"
  ></button>
</div>
{% endif %}

<div class="col-md-12">
  <div class="card full-height">
    <div class="card-body">
      <div class="card-title">Estatísticas gerais</div>
      <div class="card-category pb-3">
        Informações gerais sobre estatísticas no sistema
      </div>
      <div class="row">
        <!-- Especies -->
        <div class="col-sm-6 col-md-4">
          <div
            class="card card-stats card-round card-effect-up"
            data-bs-toggle="modal"
            data-bs-target="#topEspeciesRegistradas"
          >
            <div class="card-body">
              <div class="row align-items-center">
                <div class="col-icon">
                  <div
                    class="icon-big text-center icon-primary bubble-shadow-small"
                  >
                    <i class="fas fa-leaf"></i>
                  </div>
                </div>
                <div class="col col-stats ml-3 ml-sm-0">
                  <div class="numbers">
                    <p class="card-category">Espécies</p>
                    <h4 class="card-title">{{ numero_de_especies }}</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Especies END -->

        <!-- Modal Especies -->
        <div
          class="modal fade"
          id="topEspeciesRegistradas"
          tabindex="-1"
          aria-labelledby="exampleModalLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Espécies</h5>
                <button
                  type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div class="modal-body">
                <!-- Tabs para alternar entre finalizados e não finalizados -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link active text-dark"
                      id="nonFinalized-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#"
                      type="button"
                      role="tab"
                      aria-controls="nonFinalized"
                      aria-selected="true"
                    >
                      Ultimas Espécies Registradas
                    </button>
                  </li>
                </ul>
                <!-- Conteúdo das tabs -->
                <div class="tab-content" id="myTabContent">
                  <!-- Tab Não Finalizados -->
                  <div
                    class="tab-pane fade show active"
                    id=""
                    role="tabpanel"
                    aria-labelledby="nonFinalized-tab"
                  >
                    <div class="table-responsive">
                      <table
                        class="table table-striped table-hover table-bordered"
                      >
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Nome Científico</th>
                            <th>Nome Popular</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for especie in ultimas_especies %}
                          <tr>
                            <td class="align-middle text-truncate">
                              {{ especie.especies }}
                            </td>
                            <td class="align-middle text-truncate">
                              {{ especie.nome_popular }}
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  Fechar
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal Especies END -->

        <!-- Lotes -->
        <div class="col-sm-6 col-md-4">
          <div
            class="card card-stats card-round card-effect-up"
            data-bs-toggle="modal"
            data-bs-target="#topLotesRegistradas"
          >
            <div class="card-body">
              <div class="row align-items-center">
                <div class="col-icon">
                  <div
                    class="icon-big text-center icon-primary bubble-shadow-small"
                  >
                    <i class="fas fa-cubes"></i>
                  </div>
                </div>
                <div class="col col-stats ml-3 ml-sm-0">
                  <div class="numbers">
                    <p class="card-category">Lotes</p>
                    <h4 class="card-title">{{ numero_de_lotes }}</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Lotes END -->

        <!-- Modal Lotes -->
        <div
          class="modal fade"
          id="topLotesRegistradas"
          tabindex="-1"
          aria-labelledby="exampleModalLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Lotes</h5>
                <button
                  type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div class="modal-body">
                <!-- Tabs para alternar entre finalizados e não finalizados -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link active text-dark"
                      id="nonFinalized-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#"
                      type="button"
                      role="tab"
                      aria-controls="nonFinalized"
                      aria-selected="true"
                    >
                      Ultimos Lotes Registrados
                    </button>
                  </li>
                </ul>
                <!-- Conteúdo das tabs -->
                <div class="tab-content" id="myTabContent">
                  <!-- Tab Não Finalizados -->
                  <div
                    class="tab-pane fade show active"
                    id=""
                    role="tabpanel"
                    aria-labelledby="nonFinalized-tab"
                  >
                    <div class="table-responsive">
                      <table
                        class="table table-striped table-hover table-bordered"
                      >
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Lotes</th>
                            <th>Espécies</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for lotes in ultimos_lotes %}
                          <tr>
                            <td class="align-middle text-truncate">
                              {{ lotes.numero_lote }}
                            </td>
                            <td class="align-middle text-truncate">
                              {{ lotes.especie.especies }} - {{
                              lotes.especie.nome_popular }}
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  Fechar
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal Lotes END -->

        <!--Div Mudas Produzidas -->
        <div class="col-sm-6 col-md-4">
          <div
            class="card card-stats card-round card-effect-up"
            data-bs-toggle="modal"
            data-bs-target="#topMudasModal"
          >
            <div class="card-body">
              <div class="row align-items-center">
                <div class="col-icon">
                  <div
                    class="icon-big text-center icon-primary bubble-shadow-small"
                  >
                    <i class="fas fa-tree"></i>
                  </div>
                </div>
                <div class="col col-stats ml-3 ml-sm-0">
                  <div class="numbers">
                    <p class="card-category">Mudas Produzidas</p>
                    <h4 class="card-title">{{ total_repicada }}</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Div Mudas Produzidas END -->

        <!-- Modal Mais Mudas Produzidas -->
        <div
          class="modal fade"
          id="topMudasModal"
          tabindex="-1"
          aria-labelledby="exampleModalLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                  Mudas Mais Produzidas
                </h5>
                <button
                  type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div class="modal-body">
                <!-- Tabs para alternar entre finalizados e não finalizados -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link active text-dark"
                      id="nonFinalized-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#nonFinalizedProd"
                      type="button"
                      role="tab"
                      aria-controls="nonFinalized"
                      aria-selected="true"
                    >
                      Em Progresso
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link text-dark"
                      id="finalized-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#finalizedProd"
                      type="button"
                      role="tab"
                      aria-controls="finalized"
                      aria-selected="false"
                    >
                      Finalizados
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link text-dark"
                      id="total-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#totalTabProd"
                      type="button"
                      role="tab"
                      aria-controls="total"
                      aria-selected="false"
                    >
                      Total
                    </button>
                  </li>
                </ul>
                <!-- Conteúdo das tabs -->
                <div class="tab-content" id="myTabContent">
                  <!-- Tab Não Finalizados -->
                  <div
                    class="tab-pane fade show active"
                    id="nonFinalizedProd"
                    role="tabpanel"
                    aria-labelledby="nonFinalized-tab"
                  >
                    <div class="table-responsive">
                      <table
                        class="table table-striped table-hover table-bordered"
                      >
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Lotes</th>
                            <th>Espécies</th>
                            <th>Mudas Produzidas</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for p in mudas_produzidas_nao_finalizadas %}
                          <tr>
                            <td class="align-middle">
                              {{ p.semeadura.lote.numero_lote }}
                            </td>
                            <td
                              class="align-middle text-truncate"
                              data-bs-toggle="lists"
                              data-bs-placement="top"
                              title="{{ p.semeadura.lote.especie.nome_popular }} + {{ p.semeadura.lote.especie.especies }}"
                            >
                              {{ p.semeadura.lote.especie.nome_popular }} + {{
                              p.semeadura.lote.especie.especies }}
                            </td>
                            <td class="align-middle">
                              {{ p.quantidade_repicada|floatformat:"-3" }} Qtd
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>

                  <!-- Tab Finalizados -->
                  <div
                    class="tab-pane fade"
                    id="finalizedProd"
                    role="tabpanel"
                    aria-labelledby="finalized-tab"
                  >
                    <div class="table-responsive">
                      <table
                        class="table table-striped table-hover table-bordered"
                      >
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Lotes</th>
                            <th>Espécies</th>
                            <th>Mudas Produzidas</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for p in mudas_produzidas_finalizadas %}
                          <tr>
                            <td class="align-middle">
                              {{ p.semeadura.lote.numero_lote }}
                            </td>
                            <td
                              class="align-middle text-truncate"
                              data-bs-toggle="lists"
                              data-bs-placement="top"
                              title="{{ p.semeadura.lote.especie.nome_popular }} + {{ p.semeadura.lote.especie.especies }}"
                            >
                              {{ p.semeadura.lote.especie.nome_popular }} + {{
                              p.semeadura.lote.especie.especies }}
                            </td>
                            <td class="align-middle">
                              {{ p.quantidade_repicada|floatformat:"-3" }} Qtd
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div
                    class="tab-pane fade"
                    id="totalTabProd"
                    role="tabpanel"
                    aria-labelledby="total-tab"
                  >
                    <div class="table-responsive">
                      <table
                        class="table table-striped table-hover table-bordered"
                      >
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Espécies</th>
                            <th>Mudas Produzidas</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for item in mudas_produzidas_agrupadas %}
                          <tr>
                            <td
                              class="align-middle text-truncate"
                              data-bs-toggle="lists"
                              data-bs-placement="top"
                              title="{{ item.semeadura__lote__especie__nome_popular }} + {{ item.semeadura__lote__especie__especies }}"
                            >
                              {{ item.semeadura__lote__especie__nome_popular }}
                              + {{ item.semeadura__lote__especie__especies }}
                            </td>
                            <td class="align-middle">
                              {{ item.total_mudas_produzidas|floatformat:"-3" }}
                              Qtd
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  Fechar
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal Mudas Mais Produzidas END -->

        <!--Div Mudas Mais vendidas -->
        <div class="col-sm-6 col-md-4">
          <div
            class="card card-stats card-round card-effect-up"
            data-bs-toggle="modal"
            data-bs-target="#topSalesMudasModal"
          >
            <div class="card-body">
              <div class="row align-items-center">
                <div class="col-icon">
                  <div
                    class="icon-big text-center icon-primary bubble-shadow-small"
                  >
                    <i class="fas fa-shopping-cart"></i>
                  </div>
                </div>
                <div class="col col-stats ml-3 ml-sm-0">
                  <div class="numbers">
                    <p class="card-category">Mudas vendidas</p>
                    <h4 class="card-title">{{ total_mudas_vendidas }}</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--Div Mudas vendidas END -->

        <!-- Modal Protocolos Finalizados -->
        <div
          class="modal fade"
          id="topSalesMudasModal"
          tabindex="-1"
          aria-labelledby="exampleModalLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                  Protocolos Finalizados
                </h5>
                <button
                  type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div class="modal-body">
                <!-- Tabs para alternar entre finalizados e não finalizados -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link active text-dark"
                      id="finalizados-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#finalizadosTab"
                      type="button"
                      role="tab"
                      aria-controls="finalizados"
                      aria-selected="true"
                    >
                      Protocolos Finalizados
                    </button>
                  </li>
                </ul>
                <!-- Conteúdo das tabs -->
                <div class="tab-content" id="myTabContent">
                  <div
                    class="tab-pane fade show active"
                    id="finalizadosTab"
                    role="tabpanel"
                    aria-labelledby="finalizados-tab"
                  >
                    <div class="table-responsive">
                      <table
                        class="table table-striped table-hover table-bordered"
                      >
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th scope="col">Número do Protocolo</th>
                            <th scope="col">Data de Criação</th>
                            <th scope="col">Quantidade de Mudas</th>
                            <th scope="col">Nome Cliente / Empresa</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for dados in grouped_finalizados %}
                          <tr>
                            <td class="align-middle">
                              {{ dados.numero_protocolo }}
                            </td>
                            <td class="align-middle">
                              {{ dados.data_criacao }}
                            </td>
                            <td class="align-middle">
                              {{ dados.quantidade_mudas }}
                            </td>
                            <td class="align-middle">
                              {{ dados.cliente_nome }}
                            </td>
                          </tr>
                          {% empty %}
                          <tr>
                            <td class="align-middle">
                              Nenhum protocolo finalizado encontrado.
                            </td>
                            <td class="align-middle"></td>
                            <td class="align-middle"></td>
                            <td class="align-middle"></td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  Fechar
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal Protocolos Finalizados END -->

        <!-- Estoque de sementes -->
        <div class="col-sm-6 col-md-4">
          <div
            class="card card-stats card-round card-effect-up"
            data-bs-toggle="modal"
            data-bs-target="#stockSeedsModal"
          >
            <div class="card-body">
              <div class="row align-items-center">
                <div class="col-icon">
                  <div
                    class="icon-big text-center icon-primary bubble-shadow-small"
                  >
                    <i class="fas fa-seedling"></i>
                  </div>
                </div>
                <div class="col col-stats ml-3 ml-sm-0">
                  <div class="numbers">
                    <p class="card-category">Estoque de sementes</p>
                    <h4 class="card-title">{{ total_sementes }}</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Estoque de Sementes END -->

        <!-- Modal Estoque de sementes -->
        <div
          class="modal fade"
          id="stockSeedsModal"
          tabindex="-1"
          aria-labelledby="exampleModalLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                  Estoque de Sementes
                </h5>
                <button
                  type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div class="modal-body">
                <div class="table-responsive">
                  <table class="table table-striped table-hover table-bordered">
                    <thead class="bg-success bg-gradient text-white">
                      <tr>
                        <th>Lotes</th>
                        <th>Espécies</th>
                        <th>Estoque</th>
                      </tr>
                    </thead>
                    <tbody>
                      {% for lote in dez_maiores_lotes %}
                      <tr>
                        <td class="align-middle">{{ lote.numero_lote }}</td>
                        <td
                          class="align-middle text-truncate"
                          data-bs-toggle="lists"
                          data-bs-placement="top"
                          title="{{ lote.especie.nome_popular }} + {{ lote.especie.especies }}"
                        >
                          {{ lote.especie.nome_popular }} + {{
                          lote.especie.especies}}
                        </td>

                        <td class="align-middle">
                          {{ lote.entrada_sementes_kg|floatformat:"-3" }} Kg
                        </td>
                      </tr>
                      {% endfor %}
                    </tbody>
                  </table>
                </div>
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  Fechar
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal Estoque De Sementes END -->

        <!-- Mortalidade de Mudas -->
        <div class="col-sm-6 col-md-4">
          <div
            class="card card-stats card-round card-effect-up"
            data-bs-toggle="modal"
            data-bs-target="#mortalitySeedsModal"
          >
            <div class="card-body">
              <div class="row align-items-center">
                <div class="col-icon">
                  <div
                    class="icon-big text-center icon-primary bubble-shadow-small"
                  >
                    <i class="fas fa-skull-crossbones"></i>
                  </div>
                </div>
                <div class="col col-stats ml-3 ml-sm-0">
                  <div class="numbers">
                    <p class="card-category">Mortalidades Mudas</p>
                    <h4 class="card-title">{{ total_mortalidade }}</h4>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- Mortalidade de Mudas END -->

        <!-- Modal Maiores Mortalidades De Mudas -->
        <div
          class="modal fade"
          id="mortalitySeedsModal"
          tabindex="-1"
          aria-labelledby="exampleModalLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                  Maiores Mortalidades De Mudas
                </h5>
                <button
                  type="button"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  aria-label="Close"
                ></button>
              </div>
              <div class="modal-body">
                <!-- Tabs para alternar entre finalizados e não finalizados -->
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link active text-dark"
                      id="nonFinalized-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#nonFinalized"
                      type="button"
                      role="tab"
                      aria-controls="nonFinalized"
                      aria-selected="true"
                    >
                      Em Progresso
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link text-dark"
                      id="finalized-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#finalized"
                      type="button"
                      role="tab"
                      aria-controls="finalized"
                      aria-selected="false"
                    >
                      Finalizados
                    </button>
                  </li>
                  <li class="nav-item" role="presentation">
                    <button
                      class="nav-link text-dark"
                      id="total-tab"
                      data-bs-toggle="tab"
                      data-bs-target="#totalTab"
                      type="button"
                      role="tab"
                      aria-controls="total"
                      aria-selected="false"
                    >
                      Total
                    </button>
                  </li>
                </ul>
                <!-- Conteúdo das tabs -->
                <div class="tab-content" id="myTabContent">
                  <!-- Tab Não Finalizados -->
                  <div
                    class="tab-pane fade show active"
                    id="nonFinalized"
                    role="tabpanel"
                    aria-labelledby="nonFinalized-tab"
                  >
                    <div class="table-responsive">
                      <table
                        class="table table-striped table-hover table-bordered"
                      >
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Lotes</th>
                            <th>Espécies</th>
                            <th>Mortalidades</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for p in maiores_mortalidades_nao_finalizadas %}
                          <tr>
                            <td class="align-middle">
                              {{ p.semeadura.lote.numero_lote }}
                            </td>
                            <td
                              class="align-middle text-truncate"
                              data-bs-toggle="lists"
                              data-bs-placement="top"
                              title="{{ p.semeadura.lote.especie.nome_popular }} + {{ p.semeadura.lote.especie.especies }}"
                            >
                              {{ p.semeadura.lote.especie.nome_popular }} + {{
                              p.semeadura.lote.especie.especies }}
                            </td>
                            <td class="align-middle">
                              {{ p.quantidade_mortalidade|floatformat:"-3" }}
                              Qtd
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <!-- Tab Finalizados -->
                  <div
                    class="tab-pane fade"
                    id="finalized"
                    role="tabpanel"
                    aria-labelledby="finalized-tab"
                  >
                    <div class="table-responsive">
                      <table
                        class="table table-striped table-hover table-bordered"
                      >
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Lotes</th>
                            <th>Espécies</th>
                            <th>Mortalidades</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for p in maiores_mortalidades_finalizadas %}
                          <tr>
                            <td class="align-middle">
                              {{ p.semeadura.lote.numero_lote }}
                            </td>
                            <td
                              class="align-middle text-truncate"
                              data-bs-toggle="lists"
                              data-bs-placement="top"
                              title="{{ p.semeadura.lote.especie.nome_popular }} + {{ p.semeadura.lote.especie.especies }}"
                            >
                              {{ p.semeadura.lote.especie.nome_popular }} + {{
                              p.semeadura.lote.especie.especies }}
                            </td>
                            <td class="align-middle">
                              {{ p.quantidade_mortalidade|floatformat:"-3" }}
                              Qtd
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div
                    class="tab-pane fade"
                    id="totalTab"
                    role="tabpanel"
                    aria-labelledby="total-tab"
                  >
                    <div class="table-responsive">
                      <table
                        class="table table-striped table-hover table-bordered"
                      >
                        <thead class="bg-success bg-gradient text-white">
                          <tr>
                            <th>Espécies</th>
                            <th>Mortalidades</th>
                          </tr>
                        </thead>
                        <tbody>
                          {% for item in maiores_mortalidades_agrupadas %}
                          <tr>
                            <td
                              class="align-middle text-truncate"
                              data-bs-toggle="lists"
                              data-bs-placement="top"
                              title="{{ item.semeadura__lote__especie__nome_popular }} + {{ item.semeadura__lote__especie__especies }}"
                            >
                              {{ item.semeadura__lote__especie__nome_popular }}
                              + {{ item.semeadura__lote__especie__especies }}
                            </td>
                            <td class="align-middle">
                              {{ item.total_mortalidade|floatformat:"-3" }} Qtd
                            </td>
                          </tr>
                          {% endfor %}
                        </tbody>
                      </table>
                    </div>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  Fechar
                </button>
              </div>
            </div>
          </div>
        </div>
        <!-- Modal Maiores Mortalidades De Mudas END -->
      </div>
    </div>
  </div>
</div>

<!-- Card exclusivo para promoção do plano pago -->

<div class="col-12 mt-4">
  <div class="card border border-success shadow-lg">
    <div class="card-body text-center">
      <h5 class="card-title text-success fw-bold">
        Estatísticas Premium Disponíveis
      
      <p class="card-text mb-4">
        Acesso exclusivo para clientes com plano ativo: gráficos completos com
        dados de vendas, estoque, repiques e histórico anual.
      </p>
      </h5>
      <img
        src="{% static 'assets/img/grafico.png' %}"
        alt="Estatísticas Premium VerdeSoft"
        class="img-fluid rounded mb-4"
        style="max-height: 450px"
      />
      <a
        href="mailto:contato@verdesoft.com.br"
        class="btn btn-success px-4 py-2 fw-bold"
      >
        <i class="fa-solid fa-envelope me-2"></i> Fale com a administração
      </a>
    </div>
  </div>
</div>
<!--
<div class="row">
  <div class="col-md-12">
    <div class="card full-height">
      <div class="card-body">
        <div class="card-title">Metas</div>
        <div class="card-category pb-3">
          Informações gerais sobre metas no sistema
        </div>
        <div class="mt-3 mb-3">
          <div class="row">
            {% for meta in metas_info %}
            <div class="col-md-4">
              <div class="card p-3 mb-2">
                <div class="d-flex justify-content-between">
                  <div class="d-flex flex-row align-items-center">
                    <div class="ms-2 c-details">
                      <h6 class="mb-0">{{ meta.criado_por }}</h6> <span>Faltam {{ meta.data_final|timeuntil }}</span>
                    </div>
                  </div>
                  <div class="badge"> <span>{{ meta.tipo_meta }}</span> </div>
                </div>
                <div class="mt-5">
                  <h3 class="heading">{{ meta.especie }}</h3>
                  <div class="mt-5">
                    <div class="progress">
                      <div class="progress-bar bg-success" role="progressbar" 
                           data-percentage="{{ meta.percentual }}" 
                           style="width: 0%;" 
                           aria-valuenow="0" 
                           aria-valuemin="0" 
                           aria-valuemax="100">
                        0%
                      </div>
                    </div>
                    <div class="mt-3">
                      <span class="text1">
                        {% if meta.tipo_meta == "Semeadura" %}
                        Feito: {{ meta.quantidade_feita|floatformat:3 }} kg
                        {% else %}
                        Feito: {{ meta.quantidade_feita|floatformat:0 }}
                        {% endif %}
                        <span class="text2">
                          / Meta:
                          {% if meta.tipo_meta == "Semeadura" %}
                          {{ meta.quantidade_meta|floatformat:3 }} kg
                          {% else %}
                          {{ meta.quantidade_meta|floatformat:0 }}
                          {% endif %}
                        </span>
                      </span>
                    </div>

                  </div>
                </div>
              </div>
            </div>
            {% endfor %}
          </div>
          {% if total_metas > 3 %}
          <div class="d-flex justify-content-end mt-3"> 
            <a href="{% url 'metas_list' %}" class="btn btn-success">Ver Mais</a>
          </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const progressBars = document.querySelectorAll('.progress-bar');
    
    progressBars.forEach(function(bar) {
      const percentage = bar.getAttribute('data-percentage');
      
      // Anima a barra de progresso para o valor real
      setTimeout(function() {
        bar.style.width = percentage + '%';
        bar.setAttribute('aria-valuenow', percentage);
        bar.textContent = percentage + '%';
      }, 100); // Pequena pausa para suavizar a animação
    });
  });
</script>
<style>
  .badge span {
    background-color: #198754;
    width: 110px;
    height: 25px;
    padding-bottom: 3px;
    border-radius: 5px;
    display: flex;
    color: #fff;
    justify-content: center;
    align-items: center
  }

  .progress {
    height: 10px;
    border-radius: 10px
  }

  .progress div {
    background-color: red
  }

  .text1 {
    font-size: 14px;
    font-weight: 600
  }

  .text2 {
    color: #a5aec0
  }
</style>
<div class="row">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <div class="card-head-row">
          <div class="card-title">Entrada Acumulada</div>
          <div id="dadosContainer" data-dados-repicados="{{ dados_repicados|safe }}"></div>
        </div>
      </div>
      <div class="card-body">
        <div class="canvas-wrapper">
          <canvas class="chart" id="saleschart"></canvas>
        </div>
      </div>
    </div>
  </div>

  
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <div class="card-head-row">
          <div class="card-title">Vendas Acumuladas do Mês</div>
          <div id="dadosVendasContainer" data-dados-vendas="{{ dados_protocolos|safe }}"></div>
        </div>
      </div>
      <div class="card-body">
        <div class="canvas-wrapper">
          <canvas class="chart" id="trafficflow"></canvas>
        </div>
      </div>
    </div>
  </div>


  <div class="row">
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <div class="card-head-row">
            <div class="card-title">Dados dos anos</div>
            <div id="dadosAnuaisContainer" data-dados-anuais="{{ dados_anuais }}"></div>
          </div>
        </div>
        <div class="card-body">
          <div class="canvas-wrapper">
            <canvas class="chart" id="bar-chart"></canvas>
          </div>
        </div>
      </div>
    </div>

    
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">
          <div class="card-head-row">
            <div class="card-title">Estoque de mudas</div>
          </div>
        </div>
        <div class="card-body">
          <div class="canvas-wrapper">
            <div class="table-responsive">
              <table class="table">
                <thead class="bg-success bg-gradient text-white">
                  <tr>
                    <th>Lote</th>
                    <th>Espécies</th>
                    <th>Estoque</th>
                  </tr>
                </thead>
                <tbody>
                  {% for lote in dez_maiores_lotes %}
                  <tr>
                    <td class="align-middle">{{ lote.numero_lote }}</td>
                    <td class="align-middle text-truncate" data-bs-toggle="lists" data-bs-placement="top"
                      title="{{ lote.especie.nome_popular }} + {{ lote.especie.especies }}">
                      {{ lote.especie.nome_popular }} + {{ lote.especie.especies}}
                    </td>

                    <td class="align-middle text-end">
                      {{ lote.entrada_sementes_kg|floatformat:"-3" }} Kg
                    </td>
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
-->
<script>
  $(document).ready(function () {
    $(".table").DataTable({
      paging: false, // Remove a paginação
      searching: false, // Remove a caixa de pesquisa
      lengthChange: false, // Remove o controle de número de registros mostrados
      ordering: false,
      info: false,
    });
  });
</script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    var dadosAnuaisStr = document.getElementById("dadosAnuaisContainer").dataset
      .dadosAnuais;
    var dadosAnuais = JSON.parse(dadosAnuaisStr);
    console.log("Dados Anuais:", dadosAnuais);

    var anos = [];
    var total_sementes = [];
    var total_vendas = [];
    var total_mortalidade = [];

    dadosAnuais.reverse().forEach(function (item) {
      console.log("Item:", item);
      anos.push(item.ano);
      total_sementes.push(item.total_sementes);
      total_vendas.push(item.total_vendas);
      total_mortalidade.push(item.total_mortalidade);
    });

    var ctx = document.getElementById("bar-chart").getContext("2d");
    var myChart = new Chart(ctx, {
      type: "bar",
      data: {
        labels: anos,
        datasets: [
          {
            label: "Total Produzido",
            data: total_sementes,
            backgroundColor: "rgba(0,0,255, 0.6)", // Azul muito escuro
            borderColor: "rgba(0,0,255, 0.6)", // Azul muito escuro
            borderWidth: 1,
          },
          {
            label: "Total de Vendas",
            data: total_vendas,
            backgroundColor: "rgba(0, 100, 0, 0.6)", // Verde muito escuro
            borderColor: "rgba(0, 100, 0, 1)", // Verde muito escuro
            borderWidth: 1,
          },
          {
            label: "Total de Mortalidade",
            data: total_mortalidade,
            backgroundColor: "rgba(220,20,60, 0.6)", // Vermelho muito escuro
            borderColor: "rgba(220,20,60, 1)", // Vermelho muito escuro
            borderWidth: 1,
          },
        ],
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true,
              },
            },
          ],
        },
      },
    });
  });
</script>

<script>
  // Define um tempo de 5 segundos para esconder a mensagem de boas-vindas
  setTimeout(function () {
    var welcomeMessage = document.getElementById("welcome-message");
    if (welcomeMessage) {
      welcomeMessage.classList.remove("show"); // Oculta a mensagem
    }
  }, 4000); // 5000 milissegundos = 5 segundos
</script>

{% endblock %}