:root {
  --pastel1: #fe026f;
  --pastel2: #ff5689;
  --pastel3: #ffdaeb;
  --pastel4: #fcf5df;
  --pastel5: #fe3e0b;
}

body {
  background: linear-gradient(135deg, #fcf5df 60%, #ffdaeb 100%) !important;
  font-family: Manrope, "Noto Sans", sans-serif;
}

.card-pastel {
  background: #fff;
  border-radius: 1.5rem;
  box-shadow: 0 4px 24px 0 rgba(254, 2, 111, 0.09), 0 1.5px 4px 0 rgba(254, 2, 111, 0.07);
  border: none;
  padding: 1.5rem 1rem;
  margin-bottom: 0.5rem;
  min-height: 120px;
  transition: box-shadow 0.2s;
}
.card-pastel svg {
  background: var(--pastel2);
  border-radius: 50%;
  padding: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 8px 0 rgba(254, 2, 111, 0.10);
}

.btn-pastel {
  background: var(--pastel1);
  color: #fff;
  border-radius: 1rem;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  transition: background 0.2s;
}
.btn-pastel:hover {
  background: var(--pastel2);
}

/* Inputs modernos, minimalistas y redondeados */
.input-pastel {
  border: 1.5px solid var(--pastel3); /* Borde suave */
  border-radius: 2rem;                /* Esquinas muy redondeadas */
  background: var(--pastel4);
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  color: #181113;
  box-shadow: 0 2px 12px 0 rgba(254, 2, 111, 0.10);
  transition: box-shadow 0.2s, background 0.2s, border 0.2s;
  outline: none;
  font-weight: 500;
  letter-spacing: 0.2px;
}

.input-pastel:focus {
  background: #fff;
  box-shadow: 0 4px 18px 0 rgba(254, 2, 111, 0.18);
  border: 1.5px solid var(--pastel1);
}

.input-pastel::placeholder {
  color: var(--pastel5);
  opacity: 1;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Selects igual de modernos */
select.input-pastel {
  appearance: none;
  -webkit-appearance: none;
  background: var(--pastel4);
  color: #6e6b6c;
  padding-right: 2.5rem;
  background-position: right 1rem center;
  background-repeat: no-repeat;
  /* border: none; */
}

select.input-pastel:focus {
  background: #fff;
  border: 1.5px solid var(--pastel1);
}

/* Opcional: icono de flecha para selects */
select.input-pastel {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' fill='none' stroke='%23fe3e0b' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
}

.table-pastel th {
  background: var(--pastel2);
  color: var(--pastel1);
  font-weight: 700;
  border-radius: 0.5rem 0.5rem 0 0;
}
.table-pastel td {
  background: #fff;
  color: #181113;
}

.table-pastel td .flex.items-center.gap-2 {
  justify-content: center; /* Centra los elementos horizontalmente */
}

.section-title {
  color: var(--pastel1);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
}

.label-pastel {
  color: var(--pastel5);
  font-weight: 600;
  font-size: 1rem;
}

/* Sidebar y main-content responsive */
@media (min-width: 1024px) {
  .sidebar-desktop {
    display: flex !important;
  }
  .main-content {
    margin-left: 0rem; /* w-64 */
  }
}
@media (max-width: 1023px) {
  .main-content {
    margin-left: 0 !important;
    padding-bottom: 90px !important; /* espacio para menú inferior */
  }
  .rounded-2xl {
    border-radius: 1rem !important;
  }
  .shadow-md {
    box-shadow: 0 2px 8px 0 rgba(254, 2, 111, 0.07) !important;
  }
  .max-w-4xl {
    max-width: 100vw !important;
  }
  header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1rem 0.5rem 1rem !important;
    border-radius: 0 0 1.5rem 1.5rem !important;
  }
  .p-6 {
    padding: 1rem !important;
  }
  .grid-cols-1, .md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
  }
  .overflow-x-auto {
    font-size: 0.95rem;
  }
}

:root {
        --pastel1: rgb(254, 2, 111);
        --pastel2: rgb(255, 86, 137);
        --pastel3: rgb(255, 218, 235);
        --pastel4: #fcf5df;
        --pastel5: rgb(254, 62, 11);
        --shadow-light: 0 2px 8px 0 rgba(254, 2, 111, 0.07);
        --shadow-card: 0 4px 24px 0 rgba(254, 2, 111, 0.09), 0 1.5px 4px 0 rgba(254, 2, 111, 0.07);
        --shadow-hover: 0 8px 32px 0 rgba(254, 2, 111, 0.13);
      }

      /* Base styles */
      body, .min-h-screen {
        background: linear-gradient(135deg, #fcf5df 60%, #ffdaeb 100%) !important;
      }

      .main-content {
        background: transparent !important;
        transition: all 0.3s ease;
      }

      /* Layout responsivo */
     @media (min-width: 1024px) {
        .sidebar-desktop {
          display: flex !important;
          position: fixed;
          z-index: 30;
          left: 0;
          top: 0;
        }
        .main-content {
          margin-left: 0rem !important; 
          padding-left: 0 !important;
          width: calc(100% - 0rem) !important;
          min-height: 100vh;
        }
      }

      @media (max-width: 1023px) {
        .sidebar-desktop {
          display: none !important;
        }
        .main-content {
          margin-left: 0 !important;
          padding-left: 0 !important;
          width: 100% !important;
        }
        body, .min-h-screen, .main-content {
          padding-bottom: 6rem !important;
        }
      }

      /* Cards y contenedores */
      .card-pastel, 
      .pastel-card,
      .chart-container,
      #filtrosGraficas,
      table.dataTable {
        background: #fff !important;
        border-radius: 1.5rem !important;
        box-shadow: var(--shadow-card);
        border: none !important;
        transition: box-shadow 0.2s ease;
      }

      .card-pastel:hover, 
      .pastel-card:hover {
        box-shadow: var(--shadow-hover);
      }

      .card-pastel {
        padding: 1.5rem 1rem !important;
        margin-bottom: 0.5rem;
        min-height: 120px;
      }

      #filtrosGraficas {
        padding: 1rem 1.5rem;
        margin-bottom: 1rem;
      }

      /* Botones */
      .btn-pastel1, .btn-pastel2 {
        border-radius: 1.5rem !important;
        font-size: 1rem;
        padding: 0.75rem 1.5rem !important;
        box-shadow: var(--shadow-light);
        border: none;
        transition: all 0.2s ease;
        font-weight: 600;
      }

      .btn-pastel1 {
        background: var(--pastel3) !important;
        color: #fff !important;
      }

      .btn-pastel1:hover {
        background: var(--pastel1) !important;
        transform: translateY(-1px);
      }

      .btn-pastel2 {
        background: var(--pastel5) !important;
        color: #fff !important;
      }

      .btn-pastel2:hover {
        background: var(--pastel2) !important;
        transform: translateY(-1px);
      }

      /* DataTables */
      table.dataTable {
        overflow: hidden;
      }

      table.dataTable thead {
        background: var(--pastel2) !important;
        color: var(--pastel1) !important;
      }

      /* Navegación sidebar */
      nav.flex-col {
        gap: 0.5rem !important;
      }

      nav.flex-col a {
        flex-direction: row;
        gap: 0.75rem;
        padding: 0.65rem 1rem;
        border-radius: 1.25rem;
        font-size: 1rem;
        justify-content: flex-start;
        color: var(--pastel1) !important;
        opacity: 0.8;
        transition: all 0.2s ease;
        min-height: 1.5rem !important;
      }

      nav.flex-col a:hover,
      nav.flex-col a.active {
        color: var(--pastel5) !important;
        opacity: 1;
        background: var(--pastel4);
      }

      nav.flex-col svg {
        background: var(--pastel4);
        border-radius: 50%;
        width: 1.25rem;
        height: 1.25rem;
        min-width: 1.25rem;
        min-height: 1.25rem;
        box-shadow: var(--shadow-light);
        display: block;
      }

      /* Navegación móvil */
      .bottom-nav {
        background: #fff !important;
        border-radius: 2rem 2rem 0 0;
        box-shadow: 0 -2px 16px 0 rgba(254, 2, 111, 0.09);
        padding: 0.5rem 1rem 1.5rem 1rem;
        margin: 0 auto;
        max-width: 100%;
      }

      .bottom-nav a {
        color: var(--pastel1) !important;
        opacity: 0.8;
        transition: all 0.2s ease;
        min-width: 64px;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        font-size: 0.75rem;
        padding: 0.5rem;
      }

      .bottom-nav a.active,
      .bottom-nav a:hover {
        color: var(--pastel5) !important;
        opacity: 1;
        background: var(--pastel4);
        border-radius: 0.75rem;
      }

      .bottom-nav svg {
        background: var(--pastel4);
        border-radius: 50%;
        padding: 0.35rem;
        width: 2.5rem;
        height: 2.5rem;
        min-width: 2.5rem;
        min-height: 2.5rem;
        margin-bottom: 0.1rem;
        box-shadow: var(--shadow-light);
        display: block;
      }

      /* Responsive adjustments */
      @media (max-width: 640px) {
        .card-pastel {
          padding: 1rem !important;
          min-height: 100px;
        }
        
        .btn-pastel1, .btn-pastel2 {
          padding: 0.5rem 1rem !important;
          font-size: 0.875rem;
        }
        
        #filtrosGraficas {
          padding: 0.75rem 1rem;
        }
        
        .bottom-nav {
          padding: 0.5rem 0.5rem 1rem 0.5rem;
        }
        
        .bottom-nav a {
          min-width: 48px;
          font-size: 0.7rem;
        }
        
        .bottom-nav svg {
          width: 2rem;
          height: 2rem;
          min-width: 2rem;
          min-height: 2rem;
        }
      }