@import url('../../../assets/fontawesome/css/all.min.css');

@font-face {
  font-family: Poppins-Regular;
  src: url('../fonts/poppins/Poppins-Regular.ttf');
}

@font-face {
  font-family: Poppins-Bold;
  src: url('../fonts/poppins/Poppins-Bold.ttf');
}

@font-face {
  font-family: Poppins-Medium;
  src: url('../fonts/poppins/Poppins-Medium.ttf');
}

@font-face {
  font-family: Montserrat-Bold;
  src: url('../fonts/montserrat/Montserrat-Bold.ttf');
}

.root {
  width: 100%;
  height: 100%;
}

.modal-form {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100vh - 120px);
  background: white;
  overflow: auto;
  z-index: 100;
  padding: 20px;
  /*padding-bottom: 90px;*/
  border-radius: 10px;
  /*margin-bottom: 90px;*/
  box-sizing: border-box;
}

.modal-header-form {
  display: flex;
  font-size: 12px;
  margin: 0;
  padding: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  background: #09437c;
}

.modal-header-title {
  margin: 0;
  padding: 0 0 0 15px;
  color: #fff;
  font-family: Montserrat-Bold;
  font-size: 16px;
  line-height: 1.5;
  text-align: left;
  user-select: none;
}

[data-modal="close-crud"] {
  cursor: pointer;
  padding: 8px 12px;
  background-color: #e4af2f;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  transition: all 0.5s ease-in-out;
}

[data-modal="close-crud"]:hover {
  background-color: #b68c25;
}

.pagination-info {
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: #666;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
  height: 60px;
}

.pagination a {
  color: #007bff;
  background-color: #ffffff;
  border: 1px solid #ddd;
  text-decoration: none;
  margin: 0 5px;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 14px;
  transition: color 0.3s, background-color 0.3s;
}

.pagination span {
  color: #666;
  padding: 5px 10px;
  margin: 0 5px;
  font-size: 14px;
}

.pagination a:hover {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  cursor: pointer;
}

.pagination .current-page {
  font-weight: bold;
  color: #ffffff;
  background-color: #007bff;
  border-color: #007bff;
  padding: 5px 10px;
  border-radius: 5px;
}

.pagination input[type="number"] {
  width: 30px;
  padding: 5px 10px;
  margin: 0 0px;
  font-size: 14px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s, box-shadow 0.3s;
  appearance: textfield;
  -moz-appearance: textfield;
}

.pagination input[type="number"]:focus {
  border-color: #09437c;
  box-shadow: 0 0 0 2px rgba(9, 67, 124, 0.2);

  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  cursor: pointer;
  font-weight: bold;
  outline: none;
}

/* Ocultar los controles de subir y bajar */
.pagination input[type="number"]::-webkit-inner-spin-button,
.pagination input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.filter-section {
  display: flex;
  /* flex-wrap: nowrap; */
  gap: 20px;
  /* padding: 10px 20px; */
  margin-bottom: 10px;
  /* border-radius: 5px; */
  align-items: center;
  justify-content: space-between;
}

#form-filtro {
  display: flex;
  gap: 20px;
  align-items: center;
}

.filter-item {
  display: flex;
  flex-direction: column;
}

.filter-button,
#operador-filtro {
  flex-grow: 0;
  flex-shrink: 0;
}

.filter-select,
.filter-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

.filter-button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.filter-button:hover {
  background-color: #0056b3;
}

@media (max-width: 600px) {
  #form-filtro {
    flex-wrap: wrap;
    gap: 10px;
  }

  .filter-item {
    flex-grow: 0;
    width: 100%;
  }
}

.filter-results {
  flex-grow: 1;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.table--container {
  width: 100%;
}

.table--container table {
  width: 100%;
  border-collapse: collapse;
}

.table--container thead {
  background: #7163ba;
  color: #fff;
}

.table--container th {
  padding: 8px;
  text-align: center;
}

.table--container tbody {
  background: #f2f2f2;
}

.table--container td {
  padding: 4px;
  font-size: 14px;
  color: #333;
}

.table--container tr:nth-child(even) {
  background: #fff;
}

.table--container tbody tr:hover {
  background: #e0e0e0;
  color: #333;
}

.table--container tfoot {
  background: #7163ba;
  font-weight: bold;
  color: #fff;
}

.table--container tfoot td {
  padding: 8px;
  color: #fff;
}

/* Estilos generales para los botones */
.table--container td button {
  border: none;
  background-color: transparent;
  padding: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s;
}

/* Estilos específicos para cada botón */
.table--container td button:first-child i {
  color: #7163ba;
  /* Morado */
}

.table--container td button:nth-child(2) i {
  color: #09437c;
  /* Azul oscuro */
}

.table--container td button:last-child i {
  color: #fb0000;
  /* Rojo */
}

/* Estilos al pasar el cursor sobre los botones */
.table--container td button:first-child:hover i {
  color: #5a4a9c;
  transform: scale(1.2);
}

.table--container td button:nth-child(2):hover i {
  color: #073263;
  transform: scale(1.2);
}

.table--container td button:last-child:hover i {
  color: #c00000;
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .table--container th {
    display: none;
    /* Oculta los encabezados */
  }

  .table--container td {
    display: block;
    /* Cada td como bloque */
    width: 100%;
    text-align: left;
    /* Alineación del texto */
    padding-top: 10px;
    /* Espaciado para mejor legibilidad */
    box-sizing: border-box;
  }

  .table--container tbody td::before {
    content: attr(data-header) "";
    font-weight: bold;
    width: 120px;
    display: inline-block;
    /* Hace que el encabezado esté en línea con el texto */
    background: #7163ba;
    color: #fff;
    padding: 15px;
    text-align: left;
  }

  .table--container tr {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    padding: 8px;
  }
}

.show {
  display: flex;
}

.hide {
  display: none;
}

/* Container Styles */
.seccion-control-container {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  height: 80vh;
}

/* Navigation Styles */
.seccion-control-nav {
  display: flex;
  border-bottom: 1px solid #e2e8f0;
}

.seccion-control-nav-btn {
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.seccion-control-nav-btn:hover {
  background-color: #f7fafc;
}

.seccion-control-nav-btn.active {
  color: #1a202c;
  border-bottom: 2px solid #4299e1;
}

/* Content Styles */
.seccion-control-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 24px;
  min-height: 0;
  /*overflow: hidden;*/
}

.seccion-control-content-section {
  display: none;
  flex: 1;
  min-height: 0;
}

.seccion-control-content-section.active {
  display: flex;
  flex-direction: column;
}

.seccion-control-content-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a202c;
  margin-bottom: 16px;
}

.seccion-control-content-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

/* Submit Button Styles */
.seccion-control-submit-btn {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background-color: #4299e1;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.seccion-control-submit-btn:hover {
  background-color: #3182ce;
}

.seccion-control-content-form > div {
  flex: 1;
  overflow-y: auto;
  padding-right: 10px;
  margin-right: -10px;
  min-height: 0;
}