/* Campo inválido para formularios */
.campo-invalido {
  border: 2px solid #e74c3c !important;
  box-shadow: 0 0 4px #e74c3c;
}
/* Fila editando en tabla de plan de cuentas */
tr.fila-editando {
  border: 3px solid #1976d2 ;
  border-radius: 12px ;
  animation: bordeEditandoPulse 1.2s infinite;
  box-shadow: 0 0 0 0 #1976d2;
  transition: border-color 0.5s;
}
@keyframes bordeEditandoPulse {
  0%, 100% { border-color: #1976d2; box-shadow: 0 0 0 0 #1976d2; }
  50% { border-color: #42a5f5; box-shadow: 0 0 8px 2px #42a5f5; }
}
/* Fondo principal: degradado de azul claro a azul oscuro */
.container-3cg {
  position: relative;
  background: linear-gradient(135deg, #1267a0 0%, #011c39 100%);
  overflow: hidden;
}

/* Círculos decorativos */
.container-3cg::before,
.container-3cg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  animation: float 8s ease-in-out infinite;
}

/* Círculo grande superior izquierda */
.container-3cg::before {
  width: 400px;
  height: 400px;
  top: -100px;
  left: -100px;
}

/* Círculo mediano inferior derecho */
.container-3cg::after {
  width: 300px;
  height: 300px;
  bottom: -80px;
  right: -80px;
  animation-duration: 10s;
}

/* Animación suave de vaivén */
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  50%      { transform: translateY(20px) translateX(20px) scale(1.05); }
}



/* Estilo para tablas en modo oscuro */

/* Unificación de colores para todas las tablas e inputs en modo oscuro */

.dark-mode table,
.dark-mode table th,
.dark-mode table td,
.dark-mode table.dataTable,
.dark-mode table.dataTable th,
.dark-mode table.dataTable td {
  background-color: #181a1b ;
  color: #e0e0e0 ;
  border-color: #3a3f44 ;
}

/* Mejor visibilidad para celdas numéricas en modo oscuro */
.dark-mode table td.dt-type-numeric,
.dark-mode table.dataTable td.dt-type-numeric {
  color: #90caf9 ;
  font-weight: 600;
}

.dark-mode .modal-content {
  background-color: #23272b;
  color: #e0e0e0;
}

.dark-mode div.dt-container .dt-paging .dt-paging-button,
.dark-mode div.dt-container .dt-paging .dt-paging-button.disabled,
.dark-mode div.dt-container .dt-paging .dt-paging-button:disabled,
.dark-mode div.dt-container .dt-paging .dt-paging-button:active,
.dark-mode div.dt-container .dt-paging .dt-paging-button:focus {
  background-color: #343a40 ;
  color: #e0e0e0 ;
  border-color: #3a3f44 ;
  opacity: 1 ;
}

/* Inputs dentro de cualquier tabla en modo oscuro */
.dark-mode table input.form-control {
  background-color: #343a40 ;
  color: #e0e0e0 ;
  border-color: #3a3f44 ;
}

/* Select de cantidad de registros DataTables en modo oscuro */
.dark-mode .dt-input,
.dark-mode select.dt-input {
  background-color: #343a40 ;
  color: #e0e0e0 ;
  border: 1px solid #3a3f44 ;
  border-radius: 6px;
}

/* Select2 y selects en modales en modo oscuro */
.dark-mode .modal-content select.form-control,
.dark-mode .modal-content .select2-selection,
.dark-mode .modal-content .select2-selection__rendered,
.dark-mode .modal-content .select2-selection__arrow {
  background-color: #fff ;
  color: #23272b ;
  border-color: #3a3f44 ;
}

/* Labels, títulos y mensajes informativos en modales en modo oscuro */
.dark-mode .modal-content label,
.dark-mode .modal-content h5,
.dark-mode .modal-content .dt-info,
.dark-mode .modal-content .dt-column-title {
  color: #fff ;
}

/* Input-group-text dentro de cualquier tabla en modo oscuro */
.dark-mode table .input-group-text {
  background-color: #fff ;
  color: #23272b ;
  border-color: #3a3f44 ;
}

/* ===== CONTENT WRAPPER (fondo principal) ===== */
body:not(.dark) .content-wrapper,
body:not(.dark) .main-header + .content-wrapper {
  background: #ffffff ;
  color: #0a1030;
}

body.dark .content-wrapper,
body.dark .main-header + .content-wrapper {
  background: linear-gradient(135deg, #0d0d26 0%, #1c1c3c 60%, #2a2a56 100%) ;
  color: #ffffff ;
}

/* Opcional: efecto vidrio a las cards en dark */
body.dark .card,
body.dark .content-wrapper .container,
body.dark .content-wrapper .row {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(4px);
  border-radius: 12px;
}