/* =============================================
   BOTONES DE ACCIONES CON FONDO DE COLOR
   Para: Cuentas Contables, Proveedores, Conceptos, etc.
   ============================================= */

/* Contenedor de botones en FILA HORIZONTAL */
.btn-group,
.btn-group-horizontal {
  display: flex !important;
  flex-direction: row !important;
  gap: 4px;
  justify-content: center;
  flex-wrap: nowrap;
}

/* Estilos base para TODOS los botones de acción */
.btn-accion,
.btn-accion-cuenta,
.btnEditarProveedor,
.btnEliminarProveedor,
.btnEditarConcepto,
.btnEliminarConcepto,
.btnEditarCuenta,
.btnEliminarCuenta,
.btnVerDetalle,
.btnEditarEmpresa,
.btnEliminarEmpresa,
.btnEditarSucursal,
.btnEliminarSucursal {
  margin: 0 !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  border: none !important;
  transition: all 0.2s ease !important;
  font-size: 13px !important;
  min-width: 36px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-weight: 600 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Hover general - más oscuro + elevación */
.btn-accion:hover,
.btn-accion-cuenta:hover,
.btnEditarProveedor:hover,
.btnEliminarProveedor:hover,
.btnEditarConcepto:hover,
.btnEliminarConcepto:hover,
.btnEditarCuenta:hover,
.btnEliminarCuenta:hover,
.btnVerDetalle:hover,
.btnEditarEmpresa:hover,
.btnEliminarEmpresa:hover,
.btnEditarSucursal:hover,
.btnEliminarSucursal:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
  filter: brightness(0.9);
}

/* EDITAR - Amarillo/Naranja con fondo */
.btn-warning,
.btnEditarProveedor,
.btnEditarConcepto,
.btnEditarCuenta,
.btnEditarEmpresa,
.btnEditarSucursal {
  background: #f39c12 !important;
  color: white !important;
}

.btn-warning:hover,
.btnEditarProveedor:hover,
.btnEditarConcepto:hover,
.btnEditarCuenta:hover,
.btnEditarEmpresa:hover,
.btnEditarSucursal:hover {
  background: #e67e22 !important;
  color: white !important;
}

/* ELIMINAR - Rojo con fondo */
.btn-danger,
.btnEliminarProveedor,
.btnEliminarConcepto,
.btnEliminarCuenta,
.btnEliminarEmpresa,
.btnEliminarSucursal {
  background: #e74c3c !important;
  color: white !important;
}

.btn-danger:hover,
.btnEliminarProveedor:hover,
.btnEliminarConcepto:hover,
.btnEliminarCuenta:hover,
.btnEliminarEmpresa:hover,
.btnEliminarSucursal:hover {
  background: #c0392b !important;
  color: white !important;
}

/* VER DETALLE - Azul con fondo */
.btn-info,
.btnVerDetalle {
  background: #3498db !important;
  color: white !important;
}

.btn-info:hover,
.btnVerDetalle:hover {
  background: #2980b9 !important;
  color: white !important;
}

/* Iconos dentro de los botones */
.btn-accion i,
.btn-accion-cuenta i,
.btnEditarProveedor i,
.btnEliminarProveedor i,
.btnEditarConcepto i,
.btnEliminarConcepto i,
.btnEditarCuenta i,
.btnEliminarCuenta i,
.btnVerDetalle i,
.btnEditarEmpresa i,
.btnEliminarEmpresa i,
.btnEditarSucursal i,
.btnEliminarSucursal i {
  font-size: 13px;
  margin: 0;
}

/* Responsive - En móviles mantener horizontal pero más pequeños */
@media (max-width: 768px) {
  .btn-accion,
  .btn-accion-cuenta,
  .btnEditarProveedor,
  .btnEliminarProveedor,
  .btnEditarConcepto,
  .btnEliminarConcepto,
  .btnEditarCuenta,
  .btnEliminarCuenta,
  .btnVerDetalle {
    padding: 5px 8px !important;
    font-size: 11px !important;
    min-width: 32px;
  }
  
  .btn-group {
    gap: 3px;
  }
}

/* Quitar estilos de btn-group-vertical (AdminLTE) */
.btn-group-vertical {
  display: flex !important;
  flex-direction: row !important;
}

/* Labels con borde de color (sin fondo) */
.label {
  padding: 5px 12px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 11px;
  border: 2px solid;
}

.label-success {
  background: white !important;
  color: #27ae60 !important;
  border-color: #27ae60 !important;
}

.label-danger {
  background: white !important;
  color: #e74c3c !important;
  border-color: #e74c3c !important;
}

.label-warning {
  background: white !important;
  color: #f39c12 !important;
  border-color: #f39c12 !important;
}

.label-primary {
  background: white !important;
  color: #3498db !important;
  border-color: #3498db !important;
}

.label-info {
  background: white !important;
  color: #1abc9c !important;
  border-color: #1abc9c !important;
}

.label-default {
  background: white !important;
  color: #95a5a6 !important;
  border-color: #95a5a6 !important;
}