/* ====== Fondo General ====== */
body {
  background-color: #e6f2e6; /* verde muy claro */
}

/* ====== Topbar ====== */
.topbar {
  background-color: #ffffff;
  padding: 1rem;
  border-bottom: 1px solid #c3d6b8; /* verde suave */
}

/* ====== Sidebar ====== */
aside.sidebar {
  width: 250px;
  min-height: 100vh;
  background: linear-gradient(180deg, #2c6e49 0%, #1f4d36 100%);
}
aside.sidebar .nav-link {
  color: #d8f3dc;
  padding: 10px 20px;
  border-radius: 0.375rem;
  transition: background 0.3s ease, color 0.3s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 500;
}
aside.sidebar .nav-link:hover {
  background: linear-gradient(90deg, #ff7f50, #ffa94d);
  color: #1f4d36;
  text-decoration: none;
}
aside.sidebar .nav-link.active {
  background: linear-gradient(90deg, #ffa94d, #ff7f50);
  color: #1f4d36;
}
aside.sidebar i {
  font-size: 1.25rem;
}

/* ====== Offcanvas Menu ====== */
.offcanvas-body a {
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding: 10px;
  transition: background-color 0.3s ease;
}
.offcanvas-body a:hover {
  background: linear-gradient(90deg, #ff7f50, #ffa94d);
}

/* ====== Contenido Principal ====== */
main.content {
  flex-grow: 1;
  padding: 20px;
  background-color: #f0fff4;
  min-height: 100vh;
}

/* ====== Botones Personalizados ====== */
.btn-primary {
  background: linear-gradient(90deg, #ff7f50, #ffa94d);
  border: none;
  transition: background 0.3s ease;
}
.btn-primary:hover,
.btn-primary:focus {
  background: linear-gradient(90deg, #ffa94d, #ff7f50);
  box-shadow: 0 0 8px rgba(255, 125, 80, 0.6);
}

/* ====== Íconos ====== */
.icono-verde {
  color: #2c6e49;
}

/* ====== Títulos dentro de tarjetas ====== */
.card-header-custom {
  background-color: #ffffff;
  border-bottom: 1px solid #c3d6b8;
  color: #2c6e49;
  font-weight: bold;
}

/* ====== Botón de colapso para móviles ====== */
.btn-colapsar {
  background: linear-gradient(90deg, #ff7f50, #ffa94d);
  color: #1f4d36;
  border: none;
}

/* En móvil, esconder el sidebar */
@media (max-width: 767.98px) {
  aside.sidebar {
    display: none;
  }
}
/* Modal personalizado */
.modal-content {
  background: linear-gradient(180deg, #f0fff4 0%, #ffffff 100%);
  border: 2px solid #d1e7dd;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(44, 110, 73, 0.2); /* sombra verde suave */
}

.modal-header {
  background: linear-gradient(90deg, #2c6e49, #1f4d36);
  color: #ffffff;
  border-bottom: none;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.modal-title {
  font-weight: bold;
}

.modal-body label {
  font-weight: 500;
  color: #2c6e49;
}

.modal-footer {
  border-top: none;
  background-color: #f8f9fa;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* Botones del modal */
.modal-footer .btn-primary {
  background: linear-gradient(90deg, #ff7f50, #ffa94d);
  border: none;
  color: #fff;
  font-weight: 500;
}

.modal-footer .btn-primary:hover {
  background: linear-gradient(90deg, #ffa94d, #ff7f50);
  box-shadow: 0 0 8px rgba(255, 125, 80, 0.5);
}

.modal-footer .btn-secondary {
  background-color: #ced4da;
  border: none;
  color: #2c6e49;
  font-weight: 500;
}

.modal-footer .btn-secondary:hover {
  background-color: #adb5bd;
}
.dropdown-menu {
  font-size: 0.9rem;
}
/* Asegura que el DataTable se ajuste al contenedor */
.dataTables_wrapper {
  width: 100%;
  margin: 0 auto;
}
/* Estilo para los botones de DataTables */
.dt-button {
  margin-right: 5px;
}
/* Estilo general para tablas personalizadas */
table.custom-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #ffffff;
  box-shadow: 0 2px 8px rgba(44, 110, 73, 0.1);
  border-radius: 10px;
  font-size: 0.95rem;
}

/* Cabecera de la tabla */
table.custom-table thead {
  background: linear-gradient(90deg, #2c6e49, #1f4d36);
  color: #ffffff;
  font-weight: bold;
}

table.custom-table thead th {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 2px solid #c3d6b8;
}

/* Cuerpo de la tabla */
table.custom-table tbody tr {
  transition: background-color 0.3s ease;
}

table.custom-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #e6f2e6;
  color: #2c6e49;
}

table.custom-table tbody tr:nth-child(even) {
  background-color: #f8fcf8;
}

/* Fila seleccionada (opcional para JS/DataTables) */
table.custom-table tbody tr.selected {
  background-color: #c0fff4;
}

/* Celdas destacadas (opcional) */
table.custom-table td.highlight {
  background-color: #fff3e0;
  font-weight: 500;
}

/* Botones DataTables */
.dt-button {
  margin-right: 5px;
}

/* Wrapper de DataTables */
/*.dataTables_wrapper {
  width: 100%;
  margin: 0 auto;
}*/

/* Scroll horizontal en móviles */
/*@media (max-width: 767.98px) {
  .table-responsive {
    overflow-x: auto;
  }
}*/

/* Ícono de control en la primera columna (expansión/collapse) */
table.dataTable td.control:before {
  content: '\f4fe'; /* Bootstrap icon: chevron-down */
  font-family: "Bootstrap Icons";
  font-size: 1rem;
  color: #2c6e49;
  display: inline-block;
  transition: transform 0.3s ease;
}

/* Cuando está expandido (fila abierta) */
table.dataTable tr.parent td.control:before {
  transform: rotate(180deg);
  content: '\f4fe'; /* chevron-up (usa rotación para el efecto) */
}

/* Detalle desplegado (vista responsive) */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
  content: '\f4fe';
  font-family: "Bootstrap Icons";
  color: #2c6e49;
}

/* Detalles responsivos (contenido expandido) */
table.dataTable tbody td.child {
  background-color: #f0fff4;
  padding: 1rem;
  font-size: 0.9rem;
  border-top: 1px solid #e6f2e6;
  color: #2c6e49;
}

/* Íconos de filas en vista expandida */
table.dataTable tbody td.child ul li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #e6f2e6;
}

table.dataTable tbody td.child ul li:last-child {
  border-bottom: none;
}

/* animaciones para el submenu */
.rotate-icon {
  transition: transform 0.3s ease;
}

.rotate-icon.open {
  transform: rotate(90deg);
}

input.is-invalid, select.is-invalid {
  border-color: #dc3545 !important;
}

/* animation en mensajes toast */
@keyframes toastBounce {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

.toast-bounce {
  animation: toastBounce 0.4s ease;
}
/* icono de campos requeridos */
.required-label-icon {
  color: #dc3545;
  margin-left: 4px;
  font-size: 0.8rem;
}

.bi-braces-asterisk {
  color: #dc3545;
}